Checkout Step Progress
The finished stage folds into a one-line recap while the following one opens and the rail fills.
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 { useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Checkout Step Progress
*
* Checkout advances by folding what is settled out of the way: the step
* you just finished collapses into a one-line summary, the following oneAbout this pattern
Checkout gets shorter as you go. Closing a stage folds its fields away on a short eased height tween and leaves a single recap line in their place, the stage below opens into the room that freed up, and the connector beside them fills to mark what is behind you. Keeping exactly one stage open means the page never grows while it is being read, and the recap lines double as the edit affordance. Nothing springs on height — a form that bounces open reads as rubber, not as progress.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Each closed section becomes a single editable recap line above the open one.
Related patterns
- Wizard Step AdvanceThe rail fills toward the step you are entering while the panel travels the way you sent it.
- Cart Item RemoveA removed line collapses its own height and gap while the survivors travel up and the total falls.
- Secure Checkout BadgeA lock strokes itself shut and the payment fields firm up behind it.