Typography in Motion

Animate text expressively: splitting copy into lines/words/characters, staggering reveals, masking, blurring, morphing weight, and running text along a path. Produces runnable code for the web (CSS, GSAP, Framer Motion) and video (Remotion), plus an After Effects expression approach.

When to use

• Headline / tagline entrances and animated title cards.
• Lyric videos, caption/subtitle reveals, kinetic-typography pieces.
• Variable-font animation (weight, width, slant, optical size).
• Text-on-path, text stroke draw-on, and per-character morph effects.

Core workflow

1. Get static typography right first

Motion cannot rescue bad type. Before animating, lock line-height (1.1-1.2 for display headlines, 1.4-1.6 for body), tracking (tighten display by -1% to -3%, e.g. letter-spacing: -0.02em), alignment, and weight. Then split and animate.

2. Choose split granularity