Staggered Text

Flexible, feature-rich text animation component for staggered reveals

staggered-text-tw

Build faster
than ever

Customize

Tweak the props live

Text & Segmentation

Text

Separator

Segment By

Stagger Direction

Animation

Direction

Easing

Duration1s

Delay80ms

Effects & Callbacks

Blur Effect

Show Callback

Props

Name	Type	Default	Description
`text`	string	`""`	The text content to animate with staggered effect.
`className`	string	`""`	Additional CSS classes to apply to the container.
`as`	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span"	`"p"`	The HTML element to render as.
`segmentBy`	"chars" \| "words" \| "lines"	`"words"`	How to split the text for staggered animation.
`separator`	string	`undefined`	Custom separator to split text into rows/lines before segmenting.
`delay`	number	`80`	Delay between each segment animation in milliseconds.
`duration`	number	`0.6`	Duration of each segment animation in seconds.
`easing`	Easing \| Easing[]	`(t) => t`	Motion easing function (single or per-keyframe).
`threshold`	number	`0.1`	IntersectionObserver threshold for scroll trigger.
`rootMargin`	string	`"0px"`	IntersectionObserver rootMargin for scroll trigger.
`direction`	"top" \| "bottom" \| "left" \| "right"	`"top"`	Direction of movement for the animation.
`blur`	boolean	`true`	Enable blur effect in the default animation.
`staggerDirection`	"forward" \| "reverse" \| "center"	`"forward"`	Direction of stagger: forward (start to end), reverse (end to start), or center (middle out).
`respectReducedMotion`	boolean	`true`	Respect user's prefers-reduced-motion setting.
`exitOnScrollOut`	boolean	`false`	Automatically trigger exit animation when component scrolls out of view.
`from`	MotionStyle	`undefined`	Override default initial animation state.
`to`	MotionStyle \| MotionStyle[]	`undefined`	Override default final animation state(s).
`onAnimationComplete`	() => void	`undefined`	Callback fired when the last segment finishes animating.
`onExitComplete`	() => void	`undefined`	Callback fired when exit animation completes.

textstring

The text content to animate with staggered effect.

Default:""

classNamestring

Additional CSS classes to apply to the container.

Default:""

as"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"

The HTML element to render as.

Default:"p"

segmentBy"chars" | "words" | "lines"

How to split the text for staggered animation.

Default:"words"

separatorstring

Custom separator to split text into rows/lines before segmenting.

Default:undefined

delaynumber

Delay between each segment animation in milliseconds.

Default:80

durationnumber

Duration of each segment animation in seconds.

Default:0.6

easingEasing | Easing[]

Motion easing function (single or per-keyframe).

Default:(t) => t

thresholdnumber

IntersectionObserver threshold for scroll trigger.

Default:0.1

rootMarginstring

IntersectionObserver rootMargin for scroll trigger.

Default:"0px"

direction"top" | "bottom" | "left" | "right"

Direction of movement for the animation.

Default:"top"

blurboolean

Enable blur effect in the default animation.

Default:true

staggerDirection"forward" | "reverse" | "center"

Direction of stagger: forward (start to end), reverse (end to start), or center (middle out).

Default:"forward"

respectReducedMotionboolean

Respect user's prefers-reduced-motion setting.

Default:true

exitOnScrollOutboolean

Automatically trigger exit animation when component scrolls out of view.

Default:false

fromMotionStyle

Override default initial animation state.

Default:undefined

toMotionStyle | MotionStyle[]

Override default final animation state(s).

Default:undefined

onAnimationComplete() => void

Callback fired when the last segment finishes animating.

Default:undefined

onExitComplete() => void

Callback fired when exit animation completes.

Default:undefined