Signup Progress Meter
A slim meter advances as each account requirement is satisfied, and every row marks itself as it passes.
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 · Signup Progress Meter
*
* A slim meter advances as each account requirement is satisfied, and
* every satisfied row marks itself as the meter passes it.About this pattern
The account-setup checklist, paced so finishing it feels like momentum rather than admin. The fill scales from its left edge instead of animating width, which keeps it on the compositor and stops the track reflowing, and the spring is damped to about a ratio of one: a bar that overshoots sixty percent has briefly reported sixty-eight, and this bar is making a factual claim. Each requirement acknowledges itself as the meter reaches it — the ring recolors, the mark strokes in, the row shifts a couple of pixels toward the reader — while the percentage crossfades in a fixed slot with tabular figures so no digit change moves the heading beside it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Setup checklist
A requirements list with a single bar reporting how close the account is to live.
Related patterns
- Invite Code AcceptA valid invite code turns the field into the workspace tile it lets you into.
- Setup Checklist CompleteA finished task fills its box, draws its mark, sweeps a rule through the label, and moves the counter up by one.
- Team Seat JoinA teammate joins the avatar stack while the seat count rolls and the usage bar grows.