Active Speaker Grid

Build a video-call grid that promotes the active speaker. Structure: a 3-column grid of participant tiles, each with an initial, a name chip and a mute badge. The grid problem is the opposite of the single-avatar one: at six tiles a ring around one avatar is lost. The answer is POSITION - give the active speaker's tile `grid-column: span 2` and `grid-row: span 2` so it becomes four times the area and the grid reflows around it. That is the only signal that survives at this scale. (For a single avatar, a voice-driven ring is the right component; copying the ring into a grid is exactly the mistake this avoids.) Give every tile a `layout` prop with a stiff, heavily damped spring (stiffness ~380, damping ~34), so the other tiles visibly make room instead of teleporting into a new arrangement. Six tiles moving at once must settle immediately or the whole call looks unstable. Transition the initial's font size with the cell, so the promoted tile is legible at its new size rather than holding a small letter in a big box. Keep the mute badge in the name chip at both sizes, so a muted participant is identifiable whether or not they are speaking. Accessibility: a caption below the grid, aria-live="polite", naming who is speaking. Under prefers-reduced-motion, let the layout change but drop the travel animation. Colors as tokens: ink tiles, paper text, one accent for the active border, a reserved status red for the mute badge. Use placeholder names. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.