Avatar Stack Overflow
Participants slide into the overlapping stack and the overflow count takes over.
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 { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Avatar Stack Overflow
*
* A stack has a capacity, and the interesting moment is the one where
* it is reached: after that, arrivals stop being faces and become aAbout this pattern
A stack has a capacity, and the interesting moment is the one where it is reached: after that, arrivals stop being faces and become a number. Each new participant slides in from the trailing edge while the stack shifts to make room, and once the stack is full the count picks up instead — swapping digits on a short vertical roll at a constant size, never scaling the chip. Discs are initials on a tinted circle, so the stack has no photo to wait for.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Team members
Faces gather in the corner and spill into a count once the row is full.
Related patterns
- Group JoinA joining member's avatar drops into the stack, the others make room, and the count rolls by one.
- Presence DotThe status dot eases between tints, settles once, and sends a single ring out on coming online.
- Avatar Group LoadOverlapping faces deal themselves out along the stack, then the overflow count lands.