# 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.

- Skill: `xpert-ai/kinetic-headline` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/kinetic-headline`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/kinetic-headline/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/kinetic-headline

---


# kinetic-headline

Words or letters stagger in, one after another. Part of
[motion-anything](https://github.com/nexu-io/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.