kinetic-headline

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

1. Copy kinetic-headline.css and kinetic-headline.js and link them.
2. Mark a heading: <h1 data-kinetic>…</h1> (or data-kinetic="letters" for short lines).

Accessibility & performance

• prefers-reduced-motion: shown immediately. Transform/opacity only.