KQ-233 · VIGNETTE/VOICE/NOTE

Voice Note Vignette

A voice note as a scene: speaker, a fixed waveform, and a play head that sweeps the bars — each brightening as the head passes, the way a message app renders playback. The waveform is provided data, not audio analysis, and nothing plays; it is the shape of a voice for heroes about talking to software.

KQ-233 · VIGNETTE/VOICE/NOTE

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/vignette-voice-note

Props

PropTypeDefaultDescription
waveformnumber[]Bar heights 0–1 — a fixed shape, so SSR and client agree.
speaker / durationstringWho left it and its pre-formatted length.
sweepSecondsnumber6One playback sweep.