Leaderboard Climb
Your row travels up the board while the rows it passes slide down to make the space.
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 { useEffect, useMemo, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Leaderboard Rank Climb
*
* Your row moves up the board and the rows it passes slide down to make
* the space. Shared layout does the work, so the board never re-rendersAbout this pattern
A standings change told as one continuous move rather than as a new list. Each row keeps its React key across the re-sort, so shared layout animates every row from where it was to where it now belongs; your row rises, the rows it overtakes fall past it, and nothing is destroyed and rebuilt. Two details keep it readable. Names and totals use position-only layout animation so text is translated and never stretched by the layout engine. And the rank number crossfades inside a fixed-width slot, so a row changing standing does not change width and drag its own name sideways. The springs are damped well above the wobble threshold — rows that overshoot their slots show the wrong standing, however briefly.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Leaderboard
Board re-sorting with the athlete's own row highlighted as it moves.
Related patterns
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.
- Challenge CompleteA seal presses onto the finished challenge card and settles a couple of degrees off square.
- Goal Ring CloseAn activity ring runs out the last of its gap, the caps meet, and the total settles once.