Voice moments drawn as waveforms: a note playing back, or a live recording turning into a transcript.
illustrationsvgvoiceaudiowaveformtranscriptionloop
Waveform
waveform.tsxA voice note plays back: the waveform fills behind a moving playhead while the bars breathe.
$npx shadcn@latest add @geturui-pro/sound-bites-waveform
| Prop | Type | Default | Description |
|---|---|---|---|
duration | string | "0:24" | Duration label shown on the note. |
speed | number | 1 | Speed multiplier for the loop (six seconds at 1). |
title | string | — | Accessible description of the scene, used as the aria-label. |
className | string | — | Classes for the SVG; it fills its container width and keeps its ratio. |
Transcript
transcript.tsxLive bars dance while words land one by one and a highlight follows the spoken word.
$npx shadcn@latest add @geturui-pro/sound-bites-transcript
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Speed multiplier for the loop (seven seconds at 1). |
title | string | — | Accessible description of the scene, used as the aria-label. |
className | string | — | Classes for the SVG; it fills its container width and keeps its ratio. |
Install the whole set
Installs every sound bites variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/sound-bites
Accessibility
- Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
- Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
- Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.