Staggered Text
Flexible, feature-rich text animation component for staggered reveals
staggered-text-tw
Build faster
than ever
Customize
1s
80ms
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. |