Animations/SplitText
SplitText
Split text into words or characters and reveal them with staggered animation on scroll-into-view. Perfect for hero headings and section titles.
import { SplitText } from "@animui/ui"Word split
Character split
Direction variants
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | The text to split and animate. Must be a plain string. |
splitBy | "words" | "chars" | "words" | Whether to animate per word or per character. |
from | "bottom" | "top" | "left" | "right" | "fade" | "bottom" | Direction of the enter animation. |
stagger | number | 0.05 | Delay between each word/char in seconds. |
delay | number | 0 | Initial delay before animation starts. |
duration | number | 0.5 | Duration of each word/char animation. |
once | boolean | true | Only animate once when scrolled into view. |
as | "p" | "h1" | "h2" | "h3" | "h4" | "span" | "div" | "p" | HTML element to render. |