Kinetic Headline

Stagger a headline's words (or letters) in on load, one after another. Use for a single hero headline or a title card in a launch video. Honors prefers-reduced-motion. One per screen; never use on body copy or must-read content.

Nexu Updated

File contents

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.

nexu-io/motion-anything/tree/main/recipes/web/kinetic-headline commit 8f05a2a78b

Frequently asked questions

npx skillmds@latest add nexu-io/kinetic-headline