Words or letters stagger in, one after another. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- One hero headline or a single key line. Title cards in launch / release videos.
When NOT to use it (restraint)
- Body copy or must-read content. Never more than one kinetic line per screen.
How to apply
- Copy
kinetic-headline.cssandkinetic-headline.jsand link them. - Mark a heading:
<h1 data-kinetic>…</h1>(ordata-kinetic="letters"for short lines).
Accessibility & performance
prefers-reduced-motion: shown immediately. Transform/opacity only.