Setup Checklist Complete
A finished task fills its box, draws its mark, sweeps a rule through the label, and moves the counter up by one.
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 { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Setup Checklist Complete
*
* A setup task finishes: the box fills, its mark draws itself, a rule
* sweeps through the label, the row settles back, and the counter aboveAbout this pattern
The moment a setup task is satisfied. Four things happen in a short chain rather than at once: the box fills, the mark inside is written with pathLength, a rule sweeps left to right through the label, and the row settles back to half opacity so the remaining work reads as the live part of the list. The counter above swaps its value on a short vertical crossfade at a constant font size — a number that rolls through digits would pull attention off the row that actually moved. The label itself never moves or resizes; the rule does all the talking.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Setup checklist
Activation steps that mark themselves off with a running completion count.
Related patterns
- Goal PickerChosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.
- Invite Team SendEach address leaves the compose box and travels into a waiting seat, then marks itself sent.
- Sample Data PopulateExample figures sweep into an empty report so a new account can see what the product does before it has data of its own.