KQ-873 · AVATAR/CLUSTER

Avatar Cluster

Faces overlap by ten pixels until the cluster is hovered or holds focus, and then each face's own margin glides apart on glide so the cluster widens rather than sliding faces out from under each other. Avatars are procedural — initials over a rim signature hashed from the id into pathLength fractions, rounded before they reach an attribute — and the speaking member lifts on snap under a cobalt ring that breathes. The overflow count rolls in the direction it moved, and a roving tabindex over the faces is the keyboard's path to the spread.

KQ-873 · AVATAR/CLUSTER

Coldbrook standup · 09:15

6 in the room · speaking Ines

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/avatar-cluster

Props

people: ClusterPerson[]; default —; The room, in stacking order; the first face sits on top.
label: string; default —; Names the cluster and the overflow chip ("Coldbrook standup").
max: number; default 4; Faces drawn before the overflow chip.
speakingId: string | null; default null; Who is speaking; that face lifts, rings and rises above its neighbours.
onSelect: (id: string) => void; default —; Fires from a face's click, Enter or Space.
onOverflowSelect: () => void; default —; Fires from the overflow chip.

Prop	Type	Default	Description
people	ClusterPerson[]	—	The room, in stacking order; the first face sits on top.
label	string	—	Names the cluster and the overflow chip ("Coldbrook standup").
max	number	4	Faces drawn before the overflow chip.
speakingId	string \| null	null	Who is speaking; that face lifts, rings and rises above its neighbours.
onSelect	(id: string) => void	—	Fires from a face's click, Enter or Space.
onOverflowSelect	() => void	—	Fires from the overflow chip.