A play preview button whose waveform bars come alive while playing, with an elapsed timer and a progress hairline along the bottom. The play icon spins into pause and the bars already played stay lit.
Night Drive
Analog Hearts · 4 tracks · 2026
npx shadcn@latest add https://hyperblur.dev/r/button-equalizer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-equalizer.tsx.
import { ButtonEqualizer } from "@/components/hyperblur/button-equalizer"
<ButtonEqualizer caption="Night Drive" duration={30} />| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Play preview" | Button label. |
| playing | boolean | undefined | Controlled playing state. |
| defaultPlaying | boolean | false | Initial state when uncontrolled. |
| onPlayingChange | (playing: boolean) => void | undefined | Called on toggle and when the preview reaches the end. |
| duration | number | 30 | Length of the preview in seconds; playback stops and rewinds at the end. |
| bars | number | 14 | Number of equalizer bars, from 4 to 32. |
| caption | string | undefined | Optional text shown before the timer, such as a track name. |
| accent | string | "#ff7a45" | Color of the disc, bars and progress line. |