Avatar Group Load
Overlapping faces deal themselves out along the stack, then the overflow count lands.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Avatar Group Load
*
* An overlapping avatar stack that deals itself out left to right: each
* face slides from behind the one before it and settles, about fifty
* milliseconds apart, with the overflow count and the caption arrivingAbout this pattern
A collaborator stack that populates after the body of the page has already rendered. Each face slides out from behind the one before it and settles about fifty milliseconds later, which gives the eye a direction of travel through what is otherwise a clump of circles; the overflow chip and the caption arrive last, so the group reads as a count rather than an unfinished list. Earlier faces keep the higher z-index, so a new one appears to come from behind its neighbour instead of landing on top of it. The faces carry a silhouette rather than initials on purpose: they scale on entry, and a two-letter monogram growing from two-thirds size goes blurry on the way.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Design canvas
Collaborator avatars populate the toolbar as each session connects.
Related patterns
- Avatar Stack OverflowParticipants slide into the overlapping stack and the overflow count takes over.
- Presence DotThe status dot eases between tints, settles once, and sends a single ring out on coming online.
- Staggered List EntranceRows fade and lift into place about fifty milliseconds apart, top to bottom.