Wizard Step Advance
The rail fills toward the step you are entering while the panel travels the way you sent it.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Wizard Step Advance
*
* Two things move on every advance and they agree with each other: the
* rail fills toward the step you are entering, and the panel travels inAbout this pattern
A multi-part flow where the marker and the content are saying the same thing at the same time: the rail segment fills from the left toward the step being entered, the marker behind it takes its completion mark, and the panel travels in that same direction — reversed exactly when you go back. Agreement is the whole point, because a header that advances while the body slides the other way is how a flow starts feeling arbitrary. The panels are text, so they translate and fade and never scale, on springs damped hard enough that no field overshoots its resting line. The one thing that pops is the completion mark, which is a glyph and can carry a little more life than a paragraph can. The body is a fixed height so the buttons underneath never hop.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
A row of stages that fills as the buyer moves through information, shipping and payment.
Related patterns
- Checkout Step ProgressThe finished stage folds into a one-line recap while the following one opens and the rail fills.
- Bottom Sheet PresentA sheet rises from the bottom edge over a dimming backdrop and settles once.
- Drawer Slide InA side drawer travels in over the page, and the page eases back a little to hand it the foreground.