TextReveal

Reveals a short headline or sentence once as it mounts: each word rises out of its own clip while it sharpens from a soft blur.

When to use

• Hero headlines, empty-state titles and one-line ledes on first paint.
• When the entrance must never wait for hydration: the animation runs in CSS, so text is never left hidden when scripts are slow.
• For titles further down a page that should animate as they scroll into view, use InViewTitle. For a label that changes between states, use TextMorph.

Usage

import { TextReveal } from "@/components/iris/text-reveal/text-reveal";

<TextReveal as="h1" className="hero-title" text={"On brand. Fact-checked.\nPublished."} />
<TextReveal as="p" delay={0.35} text="Polaris writes from what your team has approved." />

Props

Prop	Type	Default	Description
text	string	—	The text (required). Use \n for a deliberate line break.
as	"h1" | "h2" | "h3" | "p"	"h2"	Element to render. Paragraphs use a softer blur.
delay	number	0	Seconds before the first word rises.
className	string	—	Typography and layout; the component sets max-width: 24ch and text-wrap: balance.
id	string	—	Id on the element.

Notes

• Headings take their accessible name from aria-label, so the sentence is read once; paragraphs keep a visually hidden copy. The animated word spans are aria-hidden.
• The total stagger is capped, so long sentences do not drag. Change the element's key to replay.
• Reduced motion replaces the rise and blur with a short fade.
• Text colour defaults to --ink; font size and weight come from your className.