hero-kinetic-typography
Installation
SKILL.md
Oversized Kinetic Typography Hero
What this builds
A full-viewport hero dominated by large-scale text that enters with per-character or per-line choreography, reacts to scroll and pointer, and breathes when idle. Not a single fade-in of a text block -- each letter, word, or line is an independently animated element with its own timing offset, rotation, and opacity arc.
- GSAP SplitText splits headline into chars/words/lines with overflow-clip masks
- Multi-line choreographed entrance: each line slides up out of its mask in sequence
- Per-character stagger with slight rotation for the "typeset drop" feel
- Scroll-scrubbed secondary text that reveals word-by-word as the user scrolls
- Pointer-reactive weight or position shift on individual characters (desktop only)
- Idle loop: subtle variable-font weight wave or Y oscillation
- Pure DOM text: no canvas, no WebGL, fully accessible and SEO-visible