Stagger Text

Text that swaps for a second line on hover, its letters rolling one after another under a wave of color.

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

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

Stagger 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

API reference

Also accepts native span attributes. Size and weight come from className.

Prop	Type	Default	Description
text* (required)	string	—	Text at rest. This is what assistive tech reads.
hoverText* (required)	string	—	Text while hovered or active.
interval	number	28	Milliseconds between letters.
colors	string[]	chart tokens 1, 3 and 4	Colors the letters pass through. Any CSS colors. An empty array turns the wave off.
active	boolean	—	Controlled state.
onActiveChange	(active: boolean) => void	—	Called when hover or a tap changes the state.

Assistive tech reads only the resting text. The swap is decoration, so never put information in hoverText that is not available elsewhere.
It is not focusable on its own. Inside a link or button, drive it with active from that element's hover and focus, as the second example does.
It reserves the width of the longer line, so nothing around it moves when it swaps.

Letters leave upward and arrive from below on the smooth spring, 28ms apart.
Each letter takes an accent color as the wave reaches it and returns to the text color after.
With reduced motion the lines cross-fade in place and the color wave still passes.

<StaggerText
  text="Design"
  hoverText="Engineer"
  interval={45}
  colors={["var(--chart-2)", "var(--chart-5)"]}
/>

API reference

Also accepts native span attributes. Size and weight come from className.

Prop	Type	Default	Description
text* (required)	string	—	Text at rest. This is what assistive tech reads.
hoverText* (required)	string	—	Text while hovered or active.
interval	number	28	Milliseconds between letters.
colors	string[]	chart tokens 1, 3 and 4	Colors the letters pass through. Any CSS colors. An empty array turns the wave off.
active	boolean	—	Controlled state.
onActiveChange	(active: boolean) => void	—	Called when hover or a tap changes the state.

Accessibility

Assistive tech reads only the resting text. The swap is decoration, so never put information in hoverText that is not available elsewhere.
It is not focusable on its own. Inside a link or button, drive it with active from that element's hover and focus, as the second example does.
It reserves the width of the longer line, so nothing around it moves when it swaps.