Podium Reveal
A 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.
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 · Podium Reveal
*
* The closing beat of a contest, challenge, or leaderboard week.
* Three podium steps fade in on a short stagger as context; the
* winner's avatar rises onto the top step on the file's only spring,About this pattern
The closing beat of a contest, challenge, or leaderboard week, at home on a leaderboard or in an activity summary. Three steps fade in on a short stagger as context; the winner's avatar is the event and rises onto the top step on the file's only spring, over-damped so it settles once with no wobble. The spotlight ring expands as an eased scale tween, because it is a flat graphic and a spring would read as bounce, and the champion line never moves and never scales, it only fades in after the ring is still. The runners-up arrive last, on a small fade stagger. What keeps it calm is that the celebration is single and finite: one spring, one ring, then the composition holds. Under reduced motion the order survives and the travel goes: the winner simply appears and the ring simply opens.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Leaderboard
The weekly contest closes: a podium settles on the board, the winner rises onto the top step, and a spotlight ring lands beneath them.
- Activity summary
The week in review ends with a podium flourish: the winner's avatar rises onto the first-place step as the spotlight ring opens beneath it.
Related patterns
- Loyalty Card CompleteThe final punch lands on a loyalty card, the card lifts, and a reward strip unfolds beneath it.
- Daily Goal MetThe day's tile turns over from its running total to its completed face.
- First Time BadgeThe first time an account does something, a small rosette settles beside the row and a marker line follows.