KQ-902 · MIC/RING

Mic Ring

Your voice, as a ring. One motion value holds the level and everything reads from it: a halo behind the button grows with it on flick, the rim fills a level arc by strokeDashoffset, and a thinner outer arc holds the recent peak and falls back linearly to the live level. Muting closes the ring on snap while a slash draws across the glyph on flick, and unmuting retracts it on the exit ease. The button is a real switch, so Space and Enter toggle it and the level sits beside it as a meter that can be queried but never announces.

KQ-902 · MIC/RING

MicrophoneOnlevel 6 · peak 0

Mic on · level 6 · peak 0

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/mic-ring

Props

level: number; default —; Input level, 0 to 1, clamped. Supplied by the host; the component never reads a device.
muted / defaultMuted: boolean; default false; Controlled or initial mute state.
onMutedChange: (muted: boolean) => void; default —; Fires from the button, from Space and from Enter.
onPeakChange: (peak: number) => void; default —; Fires when the held peak changes, as a rounded percentage 0 to 100.
peakDecay: number; default 0.6; How fast a held peak falls back towards the live level, in level per second.
name: string; default "You"; Whose voice it is; owns the spoken sentences and the meter's label.
showReadout: boolean; default true; Draws the level and peak figures beside the button instead of the band word.
disabled: boolean; default false; Holds the button; the ring still shows the level.

Prop	Type	Default	Description
level	number	—	Input level, 0 to 1, clamped. Supplied by the host; the component never reads a device.
muted / defaultMuted	boolean	false	Controlled or initial mute state.
onMutedChange	(muted: boolean) => void	—	Fires from the button, from Space and from Enter.
onPeakChange	(peak: number) => void	—	Fires when the held peak changes, as a rounded percentage 0 to 100.
peakDecay	number	0.6	How fast a held peak falls back towards the live level, in level per second.
name	string	"You"	Whose voice it is; owns the spoken sentences and the meter's label.
showReadout	boolean	true	Draws the level and peak figures beside the button instead of the band word.
disabled	boolean	false	Holds the button; the ring still shows the level.