Order Tracking Progress
A shipment walks its stages while the connector fills from stop to stop.
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 · Order Tracking Progress
*
* A shipment walks its stages: the connector fills from stop to stop,
* each stop marks itself as the fill reaches it, and the live detail
* settles in once the track catches up with reality. The travel is theAbout this pattern
The card a shopper opens from a shipping notification. Each connector segment fills toward the next stop and the stop marks itself as the fill arrives, so the distance travelled is legible before a single label has been read; segments overlap slightly so the whole run reads as one move rather than four. Stage names change opacity and nothing else — moving text at the moment someone is reading it costs more than it buys. The live detail settles in once the track catches up.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Order tracking
Named stages fill left to right as the job moves through the kitchen and out the door.
Related patterns
- Refund StatusA refund walks down its stages while the vague estimate firms up into a real date.
- Shipping Option SelectOne plate travels to the chosen speed while the arrival estimate restates itself and the total follows.
- Cart Badge CountThe cart badge rolls each changed digit in the direction of the change and settles once.