Number ticker
Also called animated counter, count-up animation, or odometer effect
A number that animates to its new value, either counting through the values in between or rolling each digit into place like an odometer.
import { useEffect, useRef } from 'react';
import {
animate,
motion,
useInView,
useMotionValue,
useReducedMotion,
useTransform
} from 'motion/react';
const DURATION = 1.2;
const format = new Intl.NumberFormat('en-US');
export function StatTicker({ value, label }: { value: number; label: string }) {
const ref = useRef<HTMLDivElement>(null);
const inView = useInView(ref, { once: true });
const reduceMotion = useReducedMotion();
const count = useMotionValue(0);
const text = useTransform(count, (latest) =>
format.format(Math.round(latest))
);
useEffect(() => {
if (!inView) return;
if (reduceMotion) {
count.set(value);
return;
}
const controls = animate(count, value, {
duration: DURATION,
ease: 'easeOut'
});
return () => controls.stop();
}, [inView, reduceMotion, value, count]);
return (
<div ref={ref} className='flex flex-col gap-1'>
{/* tabular-nums keeps the width steady while digits change. */}
<p className='text-4xl font-bold tracking-tight tabular-nums'>
<span className='sr-only'>{format.format(value)}</span>
{/* A motion value as a child updates the text without re-rendering. */}
<motion.span aria-hidden>{text}</motion.span>
</p>
<p className='text-sm text-muted-foreground'>{label}</p>
</div>
);
}Animate the landing page stats with a number ticker: when each stat scrolls into view, count from 0 to its value over 1.2 seconds with an ease-out curve, formatted with Intl.NumberFormat and tabular-nums so the width stays steady. Give screen readers the final value only, and show the final number immediately when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Number ticker?
A number ticker turns a jump in value into motion. The count-up style tweens the number itself, so 0 becomes 1,284 by passing through the values in between. The odometer style gives each digit its own vertical strip of 0 to 9 and rolls the strips until the new value lines up.
Use count-ups for stats on a landing page as they scroll into view, and rolling digits for live values that change in place: prices, scores, follower counts, and dashboard metrics. The motion draws the eye to what changed.
Keep it under about a second and ease out so the final value lands softly. Use tabular numbers so the width stays steady while digits change, format with Intl.NumberFormat so separators stay correct, and give screen readers only the final value. With reduced motion, show the new number immediately.
Often confused with
- Tabular numbers
- Tabular numbers is a font setting that gives every digit the same width. A number ticker is the animation, and it looks steadier with tabular numbers.
Related terms
All termsTabular numbers
A font setting that gives every digit the same width, so numbers line up in columns and timers or counters stop shifting as they change.
Tweening
Generating the in-between frames of an animation from a start and an end state, so an element moves smoothly from one to the other.
Scroll reveal
An animation that fades or slides content into place as it scrolls into view, so each section appears just as the reader reaches it.
Text morph
A text transition where the letters two words share slide to their new spots while the others fade out or in, so a label changes without a hard cut.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.