Characters or words fade, slide up and sharpen in one after another with a stagger.
npx shadcn@latest add https://hyperblur.dev/r/split-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/split-text.tsx.
import { SplitText } from "@/components/hyperblur/split-text"
<SplitText text="Hyperblur" by="chars" stagger={0.03} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| by | "chars" | "words" | "chars" | Split into characters or words. |
| stagger | number | 0.03 | Seconds between each item starting. |
| duration | number | 0.6 | Seconds each item takes to animate in. |
| distance | number | 20 | Upward travel in pixels. |
| trigger | "view" | "mount" | "view" | Play when scrolled into view, or immediately on mount. |
| once | boolean | true | Play only the first time it enters the viewport. When false it resets and replays on each entry. |
| onComplete | () => void | Called after the last item finishes animating. |