Setup Complete
The last item checks itself off, the checklist clears, and a single confirmation takes its place.
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 type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Setup Complete
*
* The last item checks itself off and the whole list resolves into one
* line. Deliberately restrained: no confetti, no particles, nothingAbout this pattern
The end of a setup flow, played straight. The final item's stroke draws itself, the four rows fade up and out in quick order, the panel eases down to one line, and a confirmation settles into the space the list used to occupy. The only ornament is a single slow pass of light across that line, and even that is off in the quietest variant. No confetti, no particles, no bounce: a milestone that overacts reads as cheap, and it reads that way every time after the first — the reward for finishing setup is that the setup is gone. The height change is the one tween here, because a list collapsing genuinely is a size change; everything else is opacity and a few pixels of travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Setup checklist
A finished activation list is replaced by a single confirmation row rather than a fanfare.
Related patterns
- Onboarding Step TransitionThe next panel enters from the right as the current one leaves left, with the progress bar advancing behind them.
- Resume Where You LeftA welcome-back card settles, draws the setup already finished, then marks the step waiting to be picked up.
- Import Data ConnectA line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.