First Time Badge
The first time an account does something, a small rosette settles beside the row and a marker line follows.
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 · First Time Badge
*
* The first time someone does a thing, and the small rosette that shows
* up beside it to say so. The row itself is already on screen — it is
* the event — so nothing about it moves; only the seal arrives, settlesAbout this pattern
The debut of an action, marked once and never again. The activity row is already on screen — it is the event — so nothing about it moves; only the seal arrives, drops a few pixels onto its resting place, and settles a single time. A beat later a small marker line appears in a slot that was always reserved for it, so the row never reflows. Two decisions keep this usable in a real feed. The seal is a drawn object rather than a label, which is why it is allowed to scale on entry while the wording beside it only ever fades and translates. And the whole sequence is under half a second of travel: a debut marker fires on somebody's best day with the product, so it should read as the product noticing, not as the product cheering.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
A debut marker dropping beside a freshly completed row in the activity list.
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.
- Progress Bar CompleteThe last segment fills, then the completion colour runs left to right across the whole bar.
- Certificate IssueThe border strokes itself around the sheet, the seal settles on, and the name is written last.