Presence Dots

Create a presence indicator row (avatar stack with live status dots). An overlapping row of 4 circular avatars (36-40px, 2px surface-colored ring, overlapping by ~8px). Each avatar has a status dot pinned to its bottom corner (10-13px, 2px surface border): green for online, amber for away, gray for offline. Offline avatars dim to 45% opacity with a slight grayscale. Below the stack, a monospace counter pill reads 'N online' next to a small green dot. Status changes animate: when someone comes online, their dot pops in with a spring (from 30% scale, stiffness 500, damping 22) and emits a ping ring that expands to 2.4x while fading out over 0.7s; the avatar fades back to full opacity over 0.25s. The counter digit rolls vertically to the new number (old digit slides up and out, new one slides in from below, 0.3s). Demo it with a scripted, deterministic timeline (a teammate comes online after ~1.5s, another goes away, and so on), or drive it from real presence data. Accessibility: give each avatar an aria-label like 'Maya, online'; the counter pill uses aria-live="polite". If prefers-reduced-motion is set, swap statuses instantly with no ping rings or digit rolls. 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.