Milestone Reached
A milestone card rises over the page and one soft band of light crosses it — no confetti.
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 · Milestone Reached
*
* A milestone panel arriving over the page it belongs to. The card
* rises, and one soft band of light crosses it. That is the entire
* celebration.About this pattern
The celebration moment, built without scattered debris. The card rises into place on an over-damped spring, its lines arrive a few frames apart, and a single raked band of light travels across the face once and leaves. The omission is the design decision: falling particles occlude the message the user is meant to read, cannot be made to feel expensive at any budget, and play identically whether someone crossed their first ten items or their thousandth. A light pass scales with the moment because it reads as material quality rather than as decoration bolted on top. Because the card sits above a scrim it uses the CSS system colors for background and text, so it stays opaque and correctly toned in either theme.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Announcement panels that arrive with one quiet gesture and no ornament.
Related patterns
- Personal RecordThe newest column overtakes the best-ever marker, which rides up on it while the beaten mark drops away as a reference.
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.
- Challenge CompleteA seal presses onto the finished challenge card and settles a couple of degrees off square.