Team Seat Join
A teammate joins the avatar stack while the seat count rolls and the usage bar grows.
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, type CSSProperties } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Team Seat Join
*
* A teammate accepting an invitation, seen from the workspace side. The
* avatar joins the stack, the overflow chip slides over to make room,About this pattern
An invitation being accepted, seen from the workspace side. Three elements move on the same beat so it reads as one event rather than three updates: the new disc travels in from the right, the overflow chip slides over to make room on a slightly tighter spring, and the seat number rolls to its new value. The disc carries initials and the counter carries a digit, so both translate and neither scales — the digit rolls inside a fixed box at a constant size, which keeps the line from reflowing as the number changes. Avatars are initials on a coloured disc throughout, so there is nothing to fetch and nothing to fail.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Team members
A stack of faces that makes room as someone new arrives.
Related patterns
- Invite Code AcceptA valid invite code turns the field into the workspace tile it lets you into.
- Signup Progress MeterA slim meter advances as each account requirement is satisfied, and every row marks itself as it passes.
- Group JoinA joining member's avatar drops into the stack, the others make room, and the count rolls by one.