Empty Leaderboard Start
Three silhouette avatars rise onto an empty podium in stagger, then an invite line 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 · Empty Leaderboard Start
*
* The first-frame animation for a leaderboard that has just opened with
* no scores in it: three silhouette avatars rise from behind the podium
* bars in a short stagger, the podium numbers settle with them, and aAbout this pattern
Where it belongs: a leaderboard that has just opened with no scores in it. The three avatar silhouettes rise up from behind the podium bars with a short stagger, so the screen reads as empty-not-broken; the podium numbers and a single invite line fade in only after the rise has settled. What keeps it calm: one sprung axis shared by all three avatars, the text never moves, and the whole sequence runs exactly once.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Leaderboard
A fresh season with no scores yet: three silhouette avatars rise onto the podium one after another, the invite line fades in last.
- Onboarding flow
Setup ends on a community board that is still empty; the avatars rise once to show where the new member will appear.
Related patterns
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Empty CartThe cart mark drops and settles once, then recently viewed items slide in as the way back to shopping.
- Empty Comments DiscussionA comment-thread empty state assembles itself: a dashed bubble drifts in, an avatar pops into place, skeleton lines draw across, and a caret blinks twice in the empty reply box before the block holds still.