Presence Avatar Cluster
Expandable team presence cluster that fans into a readable arc, spotlights each teammate and springs the selected avatar into the lead position.
About This Component
An expandable team-presence cluster for dashboards and collaboration surfaces. A compact stack fans into a shallow arc, each teammate lands with a status pulse, and selecting someone promotes them to the lead position with a spring-settled reorder.
Read the full effect overview
The component is built from semantic buttons and initials, so it works offline with no image pipeline. It includes a discoverable Show team control, touch tap behavior, keyboard navigation, live selection announcements and three materially different visual variants.
What's Included
- Compact avatar stack fans into a shallow arc with a quick elastic stagger
- Avatar rings and availability dots pulse as each person lands
- Hover or focus reveals a teammate name and presence status
- Click or tap promotes a person and reorders the cluster with a spring settle
- Show team / Collapse team affordance makes the interaction discoverable
- Keyboard arrows move across avatars; Enter and Space select the focused person
- Three CSS-only looks: night, studio and day
Perfect For
- Collaboration dashboards with live teammates and availability
- Project workspaces showing who is currently active
- Support or operations consoles with on-call presence
- Shared documents and review surfaces with a small team roster
How It Works
A measured fan
The script keeps every avatar button in one centered list and calculates compact and expanded x, y and rotation targets from the current item count. The open state uses a shallow arc and a staggered elastic.out settle; closing sends every item back through a power4.in tween, so a second open starts cleanly.
Focus is part of the composition
Fine pointers open the fan when the cluster is entered, while focus follows the same path for keyboard users. The focused or selected button gets the readable label, its ring lifts, and the live region announces the new lead. Coarse pointers use taps only, with no hover-only state.
Reorder without stale transforms
Selecting a person prepends that button in the list, then renders every current item against its new target. GSAP animates the full set together with an elastic settle rather than leaving an old transform on the moved node; all items receive a fresh target on every open, close and resize.
