Avatar Stack

Build a stack of overlapping avatars that fans apart on hover. Structure: an inline-flex row of circles with negative margin between them, plus a final plus-N chip. Show four, count the rest. The separation trick: each circle carries a 2px box-shadow RING in your SURFACE colour, not a border. The ring is the page showing through; an actual border draws a visible outline on the circles that are not overlapped, and the row looks inconsistent. The fan: animate MARGIN from negative overlap to a small positive gap, on a spring (stiffness 460, damping 34) with about 20ms of stagger per avatar. Use margin, not x transform: the row must genuinely get WIDER so anything beside it moves. Slide them on x and they overlap their neighbours instead. The plus-N chip is a DIFFERENT object: surface background, a border, muted ink. It is a count, not a person, and dressing it as another accent circle makes people try to recognise a face that is not there. Set z-index explicitly, descending left to right, so the first face sits on top. Leave it to document order and the stack reads backwards. Accessibility: mark every circle aria-hidden and give the WRAPPER one accessible name listing everyone ("7 people: Sam, Ada, Kit..."). Otherwise a screen reader reads a string of two-letter initials. Bind the fan to hover, focus AND click, so it works on touch. Under prefers-reduced-motion, never fan. The stack stays overlapped and the plus-N still says how many are hidden. Colors as tokens: accent with on-primary initials for the people, surface and border for the plus-N, surface for the rings. Use neutral placeholder names, never real ones. 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.