KQ-1298 · VOICE/MODE

Voice Mode

A voice call with an assistant, drawn around an orb that breathes with whoever is talking: one level, smoothed each frame with a fast attack and a slower release, ripples a blob, pushes a ring of dots or trails two rings, while the orb's resting size moves between listening, thinking and speaking on snap, shrinks away on glide when the call ends, and its pigment cross-fades with the state. The conversation plays from data at speaking pace, the caller's words arriving in light ink and firming as each line settles and every new line rising 8px on snap, and Interrupt halts the reply mid-word, tracked to the character. Mute, Interrupt and End are real buttons (Mute a toggle with aria-pressed), and each finished line is announced once, never per word.

KQ-1298 · VOICE/MODE

Coldbrook Assist0:00Connecting

Connecting…

connecting · coldbrook card line

Open it on the Studio stage

Install

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

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

Props

orb: "blob" | "rings" | "dots"; default "blob"; How the orb draws the voice: a closed curve rippling on three seeded harmonics, a disc with two rings trailing the level on slower smoothings, or 28 dots each pushed out on its own phase.
captions: "transcript" | "live" | "off"; default "transcript"; What is shown of the words: the conversation as lines (beside the orb from 40rem), only the current utterance large under the orb, or nothing (lines are still announced).
level: number; default 0.6; How far the orb swells with the voice, 0 to 1. At 0 it stays round and only its colour changes.
turns: VoiceTurn[]; default defaultVoiceTurns; The conversation, { id, role: "user" | "assistant", text }, played in order at speaking pace. Append turns as they are transcribed and the call carries on from where it is.
live / defaultLive: boolean; default true; Whether the call is on. Turning it back on starts the conversation from the top.
onLiveChange: (live: boolean) => void; default —; Fires from End and Call again.
muted / defaultMuted: boolean; default false; The microphone is muted: the orb greys and stills, and the caller's turn waits until it is unmuted.
onMutedChange: (muted: boolean) => void; default —; Fires from the Mute button.
onInterrupt: (turn: VoiceTurn, spoken: string) => void; default —; The reply was cut off, with the part of it already said (empty when it was cut while thinking). Stop your speech output here.
onPhaseChange: (phase: "connecting" | "listening" | "thinking" | "speaking" | "ended") => void; default —; The call moved between listening, thinking, speaking and ended.
meter: () => number; default —; Reads the live input level, 0 to 1, each frame while listening, for example from an analyser on the microphone. Without it a seeded voice is simulated; nothing is ever recorded.
pace: number; default 2.6; Speaking pace in words a second. Longer words take longer and punctuation adds a breath.
agent: string; default "Coldbrook Assist"; Who is on the other end: the header, the speaker names and the announcements.
status: "ready" | "connecting" | "error"; default "ready"; The line is still connecting (a faint orb with a turning arc), or the microphone could not be reached (a message with Retry).
onRetry: () => void; default —; Retry was pressed after an error.
label: string; default —; The surface's accessible name. Defaults to "Voice call with" and the agent.
sound: boolean; default false; A blup when the visitor interrupts, a click on Mute, End and Call again. The call itself is silent.
disabled: boolean; default false; The controls do nothing; the call still plays.
className: string; default —; Classes for the root. It is 540px tall by default; pass a height class to change it.

Prop	Type	Default	Description
orb	"blob" \| "rings" \| "dots"	"blob"	How the orb draws the voice: a closed curve rippling on three seeded harmonics, a disc with two rings trailing the level on slower smoothings, or 28 dots each pushed out on its own phase.
captions	"transcript" \| "live" \| "off"	"transcript"	What is shown of the words: the conversation as lines (beside the orb from 40rem), only the current utterance large under the orb, or nothing (lines are still announced).
level	number	0.6	How far the orb swells with the voice, 0 to 1. At 0 it stays round and only its colour changes.
turns	VoiceTurn[]	defaultVoiceTurns	The conversation, { id, role: "user" \| "assistant", text }, played in order at speaking pace. Append turns as they are transcribed and the call carries on from where it is.
live / defaultLive	boolean	true	Whether the call is on. Turning it back on starts the conversation from the top.
onLiveChange	(live: boolean) => void	—	Fires from End and Call again.
muted / defaultMuted	boolean	false	The microphone is muted: the orb greys and stills, and the caller's turn waits until it is unmuted.
onMutedChange	(muted: boolean) => void	—	Fires from the Mute button.
onInterrupt	(turn: VoiceTurn, spoken: string) => void	—	The reply was cut off, with the part of it already said (empty when it was cut while thinking). Stop your speech output here.
onPhaseChange	(phase: "connecting" \| "listening" \| "thinking" \| "speaking" \| "ended") => void	—	The call moved between listening, thinking, speaking and ended.
meter	() => number	—	Reads the live input level, 0 to 1, each frame while listening, for example from an analyser on the microphone. Without it a seeded voice is simulated; nothing is ever recorded.
pace	number	2.6	Speaking pace in words a second. Longer words take longer and punctuation adds a breath.
agent	string	"Coldbrook Assist"	Who is on the other end: the header, the speaker names and the announcements.
status	"ready" \| "connecting" \| "error"	"ready"	The line is still connecting (a faint orb with a turning arc), or the microphone could not be reached (a message with Retry).
onRetry	() => void	—	Retry was pressed after an error.
label	string	—	The surface's accessible name. Defaults to "Voice call with" and the agent.
sound	boolean	false	A blup when the visitor interrupts, a click on Mute, End and Call again. The call itself is silent.
disabled	boolean	false	The controls do nothing; the call still plays.
className	string	—	Classes for the root. It is 540px tall by default; pass a height class to change it.