KQ-903 · SPEAKER/GRID

Speaker Grid

Whoever speaks, comes forward. The speaker is derived rather than declared — the loudest participant at or above threshold — and when that changes every tile travels to its new cell with FLIP on glide, because all tiles are siblings of one list and keep their identity across a re-lay. The speaking tile lifts by 4px and rings on snap with the ring's opacity following the level. It is a listbox: arrows step across and down, Home and End jump, and Enter or Space pins a tile to the front whatever the levels do.

KQ-903 · SPEAKER/GRID

No one speaking · 3 on the call

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/speaker-grid

Props

participants: SpeakerTile[]; default —; People on the call in join order, each with an id, a name, an optional 0–1 level and a muted flag.
threshold: number; default 0.18; Level at or above which a participant counts as speaking.
columns: number; default 2; Grid columns, clamped 1 to 4; also the stride Arrow Up and Down move by.
pinnedId / defaultPinnedId: string | null; default null; Controlled or initial pin; a pinned tile holds the front cell whatever the levels do.
onPinnedChange: (id: string | null) => void; default —; Fires from a click, from Enter and from Space.
onSpeakerChange: (id: string | null) => void; default —; Fires when the derived speaker changes.
label: string; default —; Names the grid for assistive technology.

Prop	Type	Default	Description
participants	SpeakerTile[]	—	People on the call in join order, each with an id, a name, an optional 0–1 level and a muted flag.
threshold	number	0.18	Level at or above which a participant counts as speaking.
columns	number	2	Grid columns, clamped 1 to 4; also the stride Arrow Up and Down move by.
pinnedId / defaultPinnedId	string \| null	null	Controlled or initial pin; a pinned tile holds the front cell whatever the levels do.
onPinnedChange	(id: string \| null) => void	—	Fires from a click, from Enter and from Space.
onSpeakerChange	(id: string \| null) => void	—	Fires when the derived speaker changes.
label	string	—	Names the grid for assistive technology.