Queue Position Advance
Your place in line steps down, the figure swapping upward as the bar of people ahead shortens.
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 · Queue Position Advance
*
* A waiting room that proves it is still moving. Each advance sends the
* old position out through the top and brings the new one up from belowAbout this pattern
A waiting room's only job is to prove it is still moving. Each advance sends the old place out through the top and brings the new one up from below — upward, because moving up a queue is literally what is happening — using translation and a crossfade at one constant size, since a figure that scales as it changes reads as a score rather than a position. The bar gives up exactly one place at the same moment, so the two readings can never disagree, and the estimate under them stays deliberately coarse: a queue that quotes seconds invites a stopwatch. The whole thing is calm by construction — nothing flashes, nothing counts down in red, and closing the tab is explicitly safe.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
A support conversation shows where you sit in line and roughly how long it will be.
Related patterns
- Connection RestoredThe offline bar turns green, confirms, and retracts in one continuous move.
- Undo SnackbarA removed row leaves a bar behind, and a hairline drains across it toward the point of no return.
- Field Valid CheckA small mark strokes itself in at the right edge of a field the moment its value becomes acceptable.