Stagger reveal
An editorial entrance where a headline rises line by line, then followers stagger in behind it.
API reference
Components
<StaggerReveal />
Orchestration container for a headline plus staggered followers.
children
One StaggerRevealHeadline and any number of StaggerRevealItem followers.
as?
The element to render. Defaults to "div".
className?
Merged onto the container.
id?
Forwarded to the container element.
<StaggerRevealHeadline />
Split-target heading the container reveals line by line.
children
Plain headline text to split and reveal.
as?
The element to render. Defaults to "h1".
ariaLabel?
Whole-headline announce for assistive tech. Defaults to children.
className?
Merged onto the heading.
id?
Forwarded to the heading.
<StaggerRevealItem />
Follower the container staggers in after the headline.
children
The follower's content.
as?
The element to render. Defaults to "div".
className?
Merged onto the follower.
id?
Forwarded to the follower element.
Hooks
useStaggerReveal
Headless orchestration for a headline plus follower items.
useStaggerReveal(): StaggerRevealHandleReturns
ref
Attach to the container element.
Functions
runStaggerPreparation
Runs asynchronous measurement/splitting and always invokes the visible-state fallback.
runStaggerPreparation(prepare: () => Promise<void>, reveal: () => void): Promise<void>Featured in
See the stagger reveal composed into full sections.
