KQ-853 · VOICE/BUBBLE

Voice Bubble

Hold the mic and a waveform pill opens on snap; a 100ms tick advances a seeded level for each bar, re-targeted on flick so the wave reads as the voice, while a clock counts. Releasing after a real hold resamples the take into a 32-bar note that the parent appends, and its bubble rises on recoil with a play control and a wave that is a slider: press and drag scrub it, Arrow keys step a second, Home and End jump. No microphone is read; a tap shows a hold hint instead.

KQ-853 · VOICE/BUBBLE

9:41

Hold the mic to record a voice note

Idle · 1 note

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/voice-bubble

Props

notes: VoiceNote[]; default —; The thread, oldest first: id, from (me or peer), whole seconds, a wave of 0..1 levels, and an optional time.
onSend: (note: { seconds: number; wave: number[] }) => void; default —; Fires from a release or a Space/Enter stop after a real hold, with the seconds and a 32-bar profile.
onCancel: () => void; default —; Fires from Escape during a take, or a release that was only a tap.
onRecording: (seconds: number | null) => void; default —; Fires at the start of a take and on each whole second; null when the take ends.
onPlayChange: (id: string | null) => void; default —; Fires with the note that started playing, or null when playback stops.
maxSeconds: number; default 30; The take stops itself here.
peerName: string; default "Them"; Names the other side in the bubbles' sentences.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
notes	VoiceNote[]	—	The thread, oldest first: id, from (me or peer), whole seconds, a wave of 0..1 levels, and an optional time.
onSend	(note: { seconds: number; wave: number[] }) => void	—	Fires from a release or a Space/Enter stop after a real hold, with the seconds and a 32-bar profile.
onCancel	() => void	—	Fires from Escape during a take, or a release that was only a tap.
onRecording	(seconds: number \| null) => void	—	Fires at the start of a take and on each whole second; null when the take ends.
onPlayChange	(id: string \| null) => void	—	Fires with the note that started playing, or null when playback stops.
maxSeconds	number	30	The take stops itself here.
peerName	string	"Them"	Names the other side in the bubbles' sentences.
label	string	—	Names the thread list for assistive technology.