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.

xpert-ai 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.

xpert-ai/xpert-plugins/tree/main/xpertai/apps/motion/assets/upstream/recipes/web/kinetic-headline commit 8f05a2a78b

Frequently asked questions

npx skillmds@latest add xpert-ai/kinetic-headline