Year in Review Stat
A headline figure counts up over two deliberate seconds, then the line that explains it arrives.
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,
useReducedMotion,
useTransform,
} from "motion/react";About this pattern
One number, given the whole card and most of two seconds. The curve is the entire performance: the figure covers most of its distance early and then crawls the last stretch, so the eye is given time to arrive at the value rather than being handed it. Nothing springs and nothing scales — a headline statistic that bounces reads as a scoreboard instead of a summary. Two structural details do the quiet work. An invisible copy of the final string reserves the width, so digits arriving one at a time cannot shove the layout sideways. And the explanatory line waits on the figure itself rather than on a stopwatch, which is what makes the pause between them read as a held beat rather than as a gap. Reduced motion is simply the finished card, because the counting was only ever the presentation of a total that is already true.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Annual totals presented one statistic per card, at a deliberately slow pace.
Related patterns
- Certificate IssueThe border strokes itself around the sheet, the seal settles on, and the name is written last.
- Rank PromotionThe old tier ring fades while the new tier's ring strokes itself around the badge.
- Trophy Shelf AddA new award settles into the first slot while the awards already there slide over to make room.