Components · primitive

Avatar stack. The room, condensed.

For team rosters, recent viewers, collaborators-on-this-doc — the face pile that says some number of people are here without listing them. Overlap, spread, overflow counter, status dot, and a staggered entrance for first paint.

Sizes

Token-driven — set --as-size or use the modifier classes.

EP MV RH +3

EP MV RH AS +12

EP MV RH JT +99

Hover to spread

On parent hover, each item slides apart and the stack breathes.

EP MV RH AS JT NQ

Hover anywhere on the stack. Hover an individual avatar for the name tooltip.

Status dot

Tiny bottom-end dot per item — online, away, busy.

EP MV RH AS JT

Three states: green (online), yellow (away), magenta (busy). Default = offline.

Staggered entrance

Each face fades and lifts in with a 90ms cascade. Replay to see again.

EP MV RH JT NQ +8

In context · "viewing now"

Stack inline with body copy. The face pile is a sentence ending.

Editing this document right now

EP MV RH +2

Usage

Wrap items in .as. Each face is .as__item; overflow counter is .as__more.
Size modifiers: .as--sm, .as--md, .as--lg — or override --as-size directly.
Add .as--spread for hover-spread, .as--enter for staggered entrance.
Per-item: data-tone="1..6" for gradient, data-status for the dot, data-name for the tooltip.