Letters bob up and down in a rolling wave, each one a beat behind the last.
npx shadcn@latest add https://hyperblur.dev/r/wave-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/wave-text.tsx.
import { WaveText } from "@/components/hyperblur/wave-text"
<WaveText text="HYPERBLUR" amplitude={8} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| amplitude | number | 8 | How far each letter travels, in pixels. |
| speed | number | 1 | Animation speed multiplier. |
| stagger | number | 0.06 | Seconds of delay between one letter and the next. |