Season Track Advance
A progress token slides to the next season tier, the track fills beneath it, and the reached tier unlocks with a star pop.
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 · Season Track Advance
*
* A season track with five tiers. The progress token slides from the
* last cleared tier to the next one, the track fills beneath it, and
* the reached tier unlocks: its lock fades out and a star pops in onAbout this pattern
A season track should show progress as a journey, not a jump. This belongs on the achievements screen when a session's points land, the season tab after a challenge clears, and the profile header when a tier is about to turn. The token only translates on an eased tween, because a marker that changes size stops reading as a position; the track fills as a width tween, the one size change the pattern allows, because the fill really is the distance covered; the lock only fades, because a fastener should not perform; and the star lands on one critically damped spring, the only settle in the file, because an award should arrive rather than bounce. The reward chip only fades in after the star is still, 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
A season track advances to the next tier as its token slides in and the star pops.
- Leaderboard
The season track under the standings advances when a player's points clear the next tier.
Related patterns
- Skill Tree UnlockA locked node blooms open as its connector extends: the line reaches out from the lit parent on an eased tween, the seal scales up on a single spring, and the label only fades in once the node is still.
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.
- Loyalty Card CompleteThe final punch lands on a loyalty card, the card lifts, and a reward strip unfolds beneath it.