While hovered, a wave rolls through the label letter by letter, lifting each glyph and tinting it at the crest. A hand-drawn squiggle draws itself underneath and keeps flowing.
npx shadcn@latest add https://hyperblur.dev/r/button-wave-letters.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-wave-letters.tsx.
import { ButtonWaveLetters } from "@/components/hyperblur/button-wave-letters"
<ButtonWaveLetters label="Start free trial" />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Start free trial" | Button text, split into letters for the wave and kept whole for screen readers. |
| accent | string | "#5eead4" | Color of the crest, the squiggle and the status dot. |
| stagger | number | 45 | Delay in milliseconds between neighboring letters. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |