Staggered Text

Text that staggers in by letter, word or line

staggered-text-tw

Build faster
than ever

Customize

Text

Separator

Duration

1.0s

Delay

80ms

Blur EffectShow 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.

Defaultundefined

delaynumber

Delay between each segment animation in milliseconds.

Default80

durationnumber

Duration of each segment animation in seconds.

Default0.6

easingEasing | Easing[]

Motion easing function (single or per-keyframe).

Default(t) => t

thresholdnumber

IntersectionObserver threshold for scroll trigger.

Default0.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.

Defaulttrue

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.

Defaulttrue

exitOnScrollOutboolean

Automatically trigger exit animation when component scrolls out of view.

Defaultfalse

fromMotionStyle

Override default initial animation state.

Defaultundefined

toMotionStyle | MotionStyle[]

Override default final animation state(s).

Defaultundefined

onAnimationComplete() => void

Callback fired when the last segment finishes animating.

Defaultundefined

onExitComplete() => void

Callback fired when exit animation completes.

Defaultundefined

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.