Personal Record
The newest column overtakes the best-ever marker, which rides up on it while the beaten mark drops away as a reference.
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,
motion,
useMotionValue,
useMotionValueEvent,
useReducedMotion,
useTransform,About this pattern
A new best, shown as an overtake rather than an announcement. The latest session rises to its value and the best-ever marker is carried up on top of it the moment it is passed — the marker's height is the value, so the line and the figure beside it physically cannot disagree with the data or arrive a beat apart from it. The mark that was beaten is not deleted: it fades in as a dashed reference, drops a few pixels and stays, because a record only means anything next to the thing it beat. No springs anywhere. A measurement that overshoots is a number the person did not earn, so the climb is a decelerating tween that stops exactly where the result stops, and the figure counts on the same value without ever changing size.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
A session summary calling out a new best against the previous mark on the same axis.
Related patterns
- Milestone ReachedA milestone card rises over the page and one soft band of light crosses it — no confetti.
- First Time BadgeThe first time an account does something, a small rosette settles beside the row and a marker line follows.
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.