typography-animation

What problem does it solve?

Kinetic typography improves perceived quality and engagement by making headings and key copy feel alive, while still keeping the text readable and accessible.

Core Features & Use Cases

• Text splitting and reveal strategies: Breaks text into characters, words, or lines for character-by-character reveals, fade-ups, slide-ins, blur resolves, and staggered headline animations.
• Variable font motion: Animates font variation axes (such as wght, wdth, opsz) to produce morphing weight/shape effects that static fonts cannot.
• Production-ready integrations: Supports common implementations with CSS/JS, Framer Motion word reveals, and GSAP SplitText (including scroll-triggered reveals).
• User-safe motion controls: Provides reduced-motion fallbacks and accessibility guidance (preserving semantics via aria-label and aria-hidden spans).

Quick Start

Ask: "Using the typography-animation skill, create a variable-font headline reveal that animates by characters with a reduced-motion fallback."