# Avatar stack with presence > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The "who's here" stack in the header of a collaborative document ("Rift"). Up to five 36px avatars overlap by 10px, each an initials pair on its own muted tint with a 2px page-coloured ring; a sixth chip reads "+N" for the overflow. Hovering (or focusing into) the stack fans the avatars apart to a 6px gap so each one is readable; hovering one avatar lifts it 2px and shows a dark tooltip with the name and status. A 10px presence dot sits at the bottom-right of each avatar: green for active (with a calm 2s expanding ring), amber for idle, grey for away. A timer simulates someone joining or leaving every 4s so the pop-in, shrink-out and overflow count can be seen; a Pause button stops it. The detail worth copying is that the fan-out is a `margin-left` transition on the avatars, driven by `:hover` and `:focus-within` on the container, so keyboard users get the same expansion. ## Reference behaviour 1. Initial state: header (104px) with the title "Q4 planning", meta line, and on the right the stack (5 avatars + "+2"), a "Comments" button and a solid "Share" button. Below: document text with a green collaborator caret labelled "Ivo", and a 340px presence panel listing all 7 people with status, an activity log, and the pause control. 2. Hover the stack: every avatar's `margin-left` transitions from −10px to 6px over 240ms. Moving out reverses it. 3. Hover or focus one avatar: it rises 2px, comes to the top of the stack, and a tooltip appears 10px below it (name in 12px/500, status in 11px), fading in and settling 4px over 160ms with a 4px caret. 4. Hover "+2": its tooltip lists the overflow names on separate lines. 5. Active avatars show a green dot with a ring that expands from scale 1 to 2 while fading over 2000ms, looping. Idle dots are amber, away grey, no ring. 6. Every 4000ms the simulation steps: on odd ticks someone from the away pool joins (inserted at the front with a 280ms spring pop from scale .4); on even ticks someone other than the first person leaves (if visible, shrinks to scale 0 and width 0 over 240ms before removal). The "+N" chip, the "N now" count and the people list update; the activity log gets a timestamped line at the top and keeps five. 7. Pause toggles `aria-pressed` and stops the timer; Resume restarts it. 8. Keyboard: Tab into the stack fans it open (via `:focus-within`); each avatar is a button with a tooltip on focus. ## Structure ``` 1280 × 800 (padding 0 72) ┌──────────────────────────────────────────────────────────────────────────┐ │ Q4 planning (26px Syne) (IM)(SI)(TR)(ML)(AV)(+2) [Comments] [Share] │ head 104 │ Rift · Product · edited 2 minutes ago │ ├──────────────────────────────────────────────────────────────────────────┤ │ Goals for the quarter ┌ panel 340 ─────────────┐ │ │ Ship the shared-cursor beta to every… │ IN THIS DOCUMENT 5 now│ │ │ │ (IM) Ivo Marchetti Editing │ │ Presence has to be honest. A green dot…|Ivo │ (SI) Sana Iqbal Viewing │ │ │ (TR) Tomas Reyes Idle · 6 min │ │ Open questions: do we show viewers… │ … │ │ │ │ ACTIVITY │ │ │ │ 09:14:02 Mei … joined │ │ │ │ Simulated every 4s [Pause] │ │ └────────────────────────┘ │ └──────────────────────────────────────────────────────────────────────────┘ stack detail: ◯◯◯◯◯ +2 (36px, overlap −10) → hover: ◯ ◯ ◯ ◯ ◯ +2 (gap 6) ``` - `
` → title block, `.right` with `.stack[role=group][aria-label]`, two `.btn`s. - `.stack` → `