Badge Unlock
An earned badge lands and one band of light crosses its face — a single pass, then still.
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 { useId } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Badge Unlock Reveal
*
* An earned badge lands, and one band of light crosses its face. One
* pass, then the object is simply there — the celebration is in theAbout this pattern
The moment a criterion is finally met. The badge drops the last few percent into place on an over-damped spring, and once it has landed a single raked band of light travels across the metal and leaves. That one pass is the entire celebration: it says the object is precious without asking the viewer to sit through a firework. The restraint is functional, not just taste — badges are shown again every time the profile is opened, so anything that plays twice becomes something users learn to look away from. The name and criterion only fade and translate; a title that scales in reads as a prize card rather than a label.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Badge lands with its name and criterion arriving a beat behind it.
Related patterns
- Challenge CompleteA seal presses onto the finished challenge card and settles a couple of degrees off square.
- Goal Ring CloseAn activity ring runs out the last of its gap, the caps meet, and the total settles once.
- Leaderboard ClimbYour row travels up the board while the rows it passes slide down to make the space.