AnimatedText

Word-by-word or character-by-character staggered text reveal.

stable motion #motion#text#reveal

DesignsystemsthattalktoAIagents.

Loading preview…

Usage

Use to give headings and body copy a deliberate entrance. Especially effective on hero sections and section intros where you want to control reading pace. - Use `as="h1"` or `as="h2"` to preserve semantic heading hierarchy — the animation wraps the element, not a div. - Keep stagger under 0.08s for sentences longer than 6 words — longer stagger makes the end of a sentence feel like it's loading. - **Not** for dynamic content that updates frequently — the animation fires once via IntersectionObserver.

Do / Don't

- **Do** use `as=` to match the correct semantic element — headings should remain headings. - **Do** use lower stagger values (0.03–0.05s) for prose; higher (0.08s) only for 2–3 word phrases. - **Don't** animate full paragraphs word-by-word — use AnimatedText for headings, static text for body copy. - **Don't** stack multiple AnimatedText blocks that animate simultaneously — they'll compete for attention.

Tokens

CharacterReveal

A11y

Respects prefers-reduced-motion — renders text statically when enabled. Screen readers read the complete text; animation is purely visual.

Source

src/components/AnimatedText.tsx

Live playground

DesignsystemsthattalktoAIagents.

DesignsystemsthattalktoAIagents.