Level Up
The points bar runs out of room, the level number rolls over, and the overflow refills from empty.
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, useRef, useState } from "react";
import {
animate,
AnimatePresence,
motion,
useMotionValue,
useReducedMotion,
useTransform,About this pattern
A level boundary is a scale change, and the motion says so. The bar fills to the top of the current level, the track takes one pass of light, the level chip rolls to its next value, and then the bar restarts from empty and lays down only the points that carried across. Resetting to zero in view is the whole idea — it is what tells the reader the axis behind the bar just changed, which a bar that simply kept sliding could never communicate. The fills are tweens rather than springs: a points meter that overshoots draws a total the account does not contain.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Stars meter filling to a tier boundary, then restarting with the carried-over balance.
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.