Checklist Complete
The remaining items check off one by one, then the card earns a completion band once the last one lands.
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 · Checklist Complete
*
* A setup checklist finishing in the open. The remaining items check
* off one by one, each check drawing itself, and once the last oneAbout this pattern
A setup checklist finishing in the open. The checks draw rather than appear, one after another on a short stagger, so the order of completion stays readable and every tick gets its own beat. Only transform and opacity move: each check strokes itself in on an eased tween, its box lands on a single soft spring, and the finished rows dim without changing size. Text never scales and never bounces. When the last check lands, the header count updates to the full total and a completion band sweeps the card's top edge on a short eased tween, the one size change the pattern allows. Under reduced motion the stagger and the sweep are dropped and the card simply arrives complete. It belongs anywhere a checklist is a progress surface: onboarding steps, quest lists, setup flows.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Setup checklist
The remaining steps tick in sequence and the card earns its completion band when the last one lands.
- Achievements
A quest list completes and the header count updates to the full total.
Related patterns
- Progress Bar CompleteThe last segment fills, then the completion colour runs left to right across the whole bar.
- Habit Calendar FillToday's square fills in the month grid and the run it belongs to draws itself underneath.
- Daily Goal MetThe day's tile turns over from its running total to its completed face.