Animations/BlurText
BlurText
Text that blurs in from sharp to clear with a staggered word or character reveal. Elegant, cinematic, and perfect for hero headings.
import { BlurText } from "@animui/ui"Word blur
Character blur
Hero composition
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Text string to animate. |
splitBy | "words" | "chars" | "words" | Unit to animate — words or individual characters. |
blurAmount | number | 10 | Starting blur amount in px. |
stagger | number | 0.06 | Delay between each unit in seconds. |
delay | number | 0 | Initial delay before animation starts. |
duration | number | 0.6 | Duration per unit in seconds. |
once | boolean | true | Trigger only once on scroll-into-view. |
as | "p" | "h1" | "h2" | "h3" | "h4" | "span" | "div" | "p" | HTML element. |