Leaderboard Rank

Create an animated leaderboard. A card of player rows: rank number (monospace), name, score. The current user's row is marked with an accent border, tinted background and accent name. When scores change and positions swap, rows GLIDE to their new slots via animated layout (FLIP / Framer Motion layout prop with a spring, stiffness 380, damping 30): never re-render the list in place. As a row changes position, its rank number rolls inside an overflow-hidden slot (old number slides up and out, new one springs in from below, stiffness 480, damping 30), and the #1 rank stays in the accent color. When the user's row climbs, its background tint brightens briefly. Keep stable keys per player so the layout animation tracks identity, and drive changes from real score updates (demo: swap two rows every few seconds). Accessibility: rows are list items; announce the user's rank changes via aria-live="polite" ("You're now #2"). If prefers-reduced-motion is set, reorder instantly with no gliding or rolling. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.