Stagger Text

Words or characters that rise into place one after another, on mount or on scroll.

Every word arrives on its own beat.

Loading preview

Installation

npx shadcn@latest add @loomui/stagger-text

Usage

import { StaggerText } from "@/components/ui/stagger-text"

<h1 className="text-4xl font-semibold">
  <StaggerText startOnView>Every word arrives on its own beat.</StaggerText>
</h1>

children must be a plain string. The component splits it, wraps each piece in its own span, and hands each span an animation-delay. The animation itself is pure CSS, so a hundred words cost one render.

Splitting by character multiplies the element count. Keep by="character" for short strings, headlines rather than paragraphs.

Props

Prop	Type	Default	Description
`children`	`string`	none	The text to reveal. Plain text only.
`by`	`"word" \| "character"`	`"word"`	How the string is split.
`stagger`	`number`	`0.04`	Seconds between one unit starting and the next.
`duration`	`number`	`0.5`	Seconds for a single unit to arrive.
`delay`	`number`	`0`	Seconds before the first unit starts.
`startOnView`	`boolean`	`false`	Wait until the text scrolls into view.
`repeat`	`boolean`	`false`	Replay on every re-entry. Requires `startOnView`.
`disabled`	`boolean`	`false`	Render the finished state with no animation.
`className`	`string`	none	Merged onto the outer span.

Any other <span> prop is forwarded.

Accessibility

The full string is rendered once in a visually hidden span and announced as one phrase, so screen readers never hear it letter by letter. The split copy is aria-hidden. Under prefers-reduced-motion every unit is visible immediately.