Resume Where You Left
A welcome-back card settles, draws the setup already finished, then marks the step waiting to be picked up.
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 · Resume Where You Left
*
* Coming back to something half-finished. The card settles, the work
* already done draws itself along the track, and only then does the
* unfinished step take the accent — so the person is shown their creditAbout this pattern
Re-entry into something half-finished, ordered so the person is shown their credit before their homework. The card settles once, the track draws to the fraction genuinely completed on the previous visit, and only after that does the unfinished step take the accent and offer somewhere to restart. The finished steps deliberately do not animate: they happened last time, and replaying them is the product taking credit twice — leaving them still is exactly what gives the next step somewhere to stand out. The track stops on its earned value with no overshoot, and the focus on the pending row is painted by fading a tint layer in rather than by animating a colour, since a theme-derived neutral is a color-mix() value no engine can interpolate.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Re-entry after a break leading with what was already completed before asking for more.
Related patterns
- Setup CompleteThe last item checks itself off, the checklist clears, and a single confirmation takes its place.
- Onboarding Step TransitionThe next panel enters from the right as the current one leaves left, with the progress bar advancing behind them.
- Import Data ConnectA line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.