Medal Ribbon Pin
A pin bar settles across the ribbon top, two straps draw down to the medal, and the disc lands on one soft spring while its star fades in.
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 · Medal Ribbon Pin
*
* A medal earned, pinned in place. A pin bar settles across the top of
* the ribbon, two straps draw down to the medal, and the disc lands
* once on a single soft spring while its star fades in. The copy fadesAbout this pattern
A medal should feel pinned, not thrown. This belongs on the achievements list when a new medal is earned, the profile header after a milestone, and the leaderboard row when a season closes. The pin bar only fades, because a fastener should not perform; the two straps draw down as pathLength tweens, which is how the ribbon earns its length rather than appearing all at once; the disc lands on one critically damped spring, the only settle in the file, because an award should arrive rather than bounce; the star only fades in after the disc is still, and the copy only fades after that, because words that move read as unfinished work. Under reduced motion the beats keep their order and lose their travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
The new medal pins to the top row of the achievements list.
- Profile page
The medal pins beside the avatar in the profile header.
Related patterns
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.
- Trophy Shelf AddA new award settles into the first slot while the awards already there slide over to make room.
- Certificate IssueThe border strokes itself around the sheet, the seal settles on, and the name is written last.