Preview live, install via shadcn or copy the source.
This will install the component and its dependencies automatically.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | string | — | Yes | The full text to animate. |
| per | 'word' | 'char' | 'line' | word | No | How to segment the text for animation. |
| as | keyof React.JSX.IntrinsicElements | p | No | HTML tag to render as. |
| variants | { container?: Variants; item?: Variants } | — | No | Override Motion variants for the container and each segment. |
| className | string | — | No | Class name for the container element. |
| preset | 'blur' | 'fade-in-blur' | 'scale' | 'fade' | 'slide' | fade | No | Built-in animation presets for the segments. |
| delay | number | 0 | No | Delay (seconds) before child animations begin. |
| speedReveal | number | 1 | No | Multiplier controlling stagger speed across segments (higher = faster). |
| speedSegment | number | 1 | No | Multiplier controlling per-segment animation duration (higher = faster). |
| trigger | boolean | true | No | Whether the animation is active (renders with AnimatePresence). |
| onAnimationComplete | () => void | — | No | Called when the animation completes. |
| onAnimationStart | () => void | — | No | Called when the animation starts. |
| segmentWrapperClassName | string | — | No | Optional extra class applied to each segment wrapper. |
| containerTransition | Transition | — | No | Transition override merged into the container variants. |
| segmentTransition | Transition | — | No | Transition override merged into each segment’s variants. |
| style | React.CSSProperties | — | No | Inline styles for the container element. |