Real-time text animations with position, scale, and scroll effects

Glyphica

TypeScript

Webapp

SvelteKit

HTML Canvas

Text Animation Engine

Background

Glyphica explores generative design by bringing motion to static typography. What started as simple wave-based text animations turned into a modular system with layered effects—position, scale, and scroll-based movement. Each character, word, or sentence can move on its own, using sine waves, noise, or easing functions. The result ranges from subtle rhythm to bold kinetic typography.

Technologies & Tools

SvelteKit
TypeScript
HTML5 Canvas
TailwindCSS
Svelte Tweakpane UI
Google Fonts API
MediaRecorder API

Features

Real-time text animation with 60 FPS rendering
Dual animation system: position and scale with independent wave controls
Canvas export capabilities: high-resolution PNG and video recording
Advanced font management with Google Fonts integration
Preset system with import/export for sharing configurations
Pan and zoom interface for detailed animation inspection
Responsive tweakpane controls for real-time parameter adjustment

Challenges

The most significant challenge was to create a sensible system that allows for a wide variety of possible text animations. It required a lot of experimenting to come up with the final approach.

Learnings

Math is your friend. By combining fairly simple math functions, it is possible to create a wide variety of cool looking text animations. However, the more abstract the concepts are for the user, the more important it is to ensure an understandable UI.

Click here for the live demo

This project allowed me to explore the intersection between creative coding and typography by making a tool that makes these concepts accessible to everyone.