Cinematic Text

A headline whose words drift out of a heavy blur and settle into focus as it scrolls into view.

Interfaces that move with intent.

pnpm dlx shadcn@latest add @latheui/cinematic-text

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Cinematic Text is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

Also accepts native attributes of the element it renders.

Prop	Type	Default	Description
children* (required)	string	—	The text. It is split on spaces.
as	"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span" \| "div"	"p"	Element to render.
delay	number	0	Seconds before the first word starts.
stagger	number	0.09	Seconds between words.
duration	number	0.9	Seconds each word takes to settle.
blur	number	14	Blur radius in pixels each word starts from.
distance	number	14	Pixels each word drifts down.
once	boolean	true	Play once, or every time the text scrolls back into view.

Screen readers get the full sentence once, as plain text. The animated words are hidden from them.
Pick the element with as so the text keeps its place in the heading outline.
The text is real text: it can be selected, translated and found with in-page search.
Keep it to short lines. A reader should never wait on an animation to finish a paragraph.

Each word fades in, drops 14px and sharpens from a 14px blur over 900ms, 90ms after the one before.
It starts when 40% of the text is in view.
With reduced motion the line is not split. It fades in as one block, with no blur or movement.

<CinematicText as="h1" stagger={0.16} duration={1.4} blur={24} className="text-7xl font-semibold">
  Take your time.
</CinematicText>

<CinematicText once={false}>Seen again each time it scrolls into view.</CinematicText>

API reference

Also accepts native attributes of the element it renders.

Prop	Type	Default	Description
children* (required)	string	—	The text. It is split on spaces.
as	"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span" \| "div"	"p"	Element to render.
delay	number	0	Seconds before the first word starts.
stagger	number	0.09	Seconds between words.
duration	number	0.9	Seconds each word takes to settle.
blur	number	14	Blur radius in pixels each word starts from.
distance	number	14	Pixels each word drifts down.
once	boolean	true	Play once, or every time the text scrolls back into view.

Accessibility

Screen readers get the full sentence once, as plain text. The animated words are hidden from them.
Pick the element with as so the text keeps its place in the heading outline.
The text is real text: it can be selected, translated and found with in-page search.
Keep it to short lines. A reader should never wait on an animation to finish a paragraph.