Crown Placed
A crown drops onto the new number one's avatar and settles on a single spring while the avatar ring draws itself in and sparkles pop around the crown.
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 · Crown Placed
*
* The moment a leaderboard crowns its new number one. A gold crown
* drops from above onto the winner's avatar and settles on the file's
* only spring, the avatar ring draws itself in on an eased tween, andAbout this pattern
A leaderboard crowning its winner in the open. The crown falls straight down onto the winner's avatar on one soft spring, the only sprung element in the file, so the landing reads as a single confident beat with no wobble. Only transform and opacity move: the avatar ring draws itself in on an eased pathLength tween once the crown lands, three sparkles pop around the crown on a short stagger with eased scale and opacity, and the winner row earns a warm wash that fades in by opacity alone. Text never scales and never bounces; the ranks, names and points are static context. Under reduced motion the crown simply appears, the ring is simply drawn and nothing shifts. It belongs anywhere first place changes hands: weekly leaderboards, season finals, top-contributor boards.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Leaderboard
The crown drops onto the new number one's avatar while the ring draws in and the row earns its wash.
- Achievements
A season champion is crowned on the achievements screen as sparkles pop around the landed crown.
Related patterns
- Podium RevealA podium settles at the close of a contest: the winner rises onto the top step on one spring while a spotlight ring lands beneath them.
- 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.