Text that snaps into place dragging a blurred trail behind it.
npx shadcn@latest add https://hyperblur.dev/r/motion-blur-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-blur-text.tsx.
import { MotionBlurText } from "@/components/hyperblur/motion-blur-text"
<MotionBlurText text="HYPERBLUR" direction="left" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| direction | "left" | "right" | "up" | "down" | "left" | Where the text comes from. |
| distance | number | 40 | Travel distance in pixels. |
| duration | number | 0.7 | Seconds for the whole move. |
| trigger | "mount" | "hover" | "mount" | Play once on mount, or replay on hover. |