Words come into focus from a heavy blur with a soft upward drift, staggered.
npx shadcn@latest add https://hyperblur.dev/r/blur-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blur-text.tsx.
import { BlurText } from "@/components/hyperblur/blur-text"
<BlurText text="Come into focus" by="words" blur={12} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| by | "words" | "chars" | "words" | Animate whole words or single characters. |
| blur | number | 12 | Starting blur radius in pixels. |
| stagger | number | 0.08 | Seconds between each item starting. |
| duration | number | 0.7 | Seconds each item takes to focus. |
| 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. |