Group Join
A joining member's avatar drops into the stack, the others make room, and the count rolls by one.
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, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Group Join
*
* Someone joins: their avatar drops into the front of the stack, the
* others make room, and the member count rolls over by one. Three smallAbout this pattern
Three movements, one event: the new avatar falls into the front of the stack, the discs already there shuffle aside to let it in, and the member total rolls over. Because they share a spring and start together, they read as a single arrival rather than as three widgets updating. The stack shifts with position-only layout animation, so the monograms travel without ever being stretched, and the number rolls on a tween — numerals that overshoot and settle back look like a fault, and text is not allowed to bounce here. The status line underneath lives in a fixed-height slot so naming who joined never grows the header and pushes the conversation down.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
The group header updates its participant count as people are added.
Related patterns
- Avatar Stack OverflowParticipants slide into the overlapping stack and the overflow count takes over.
- Like ButtonThe heart takes on its fill and settles once — no particle spray, no confetti.
- Live Viewer CountOne ring per arrival, digits rolling to the new total, and the size of the jump floating off above it.