Each rolling digit sits in a digit window; the line across a flip card is its hinge line
Count-Up vs. Odometer vs. Flip Clock
/ font-variant-numeric: tabular-nums · <NumberFlow value={1312} /> /
also called number counter, number ticker, animated counter, rolling numbers, slot machine counter, split-flap display
“The digits that roll up one by one when a number changes” are an odometer, “a total that counts up from zero when you scroll to it” is a count-up, and “those old clocks with flip-down numbers” are a flip clock. A count-up runs the whole number toward its total and slows as it lands (CountUp.js); an odometer, named after the mileage counter in a car, rolls each digit up or down inside its own small window, like the price in a stock app (NumberFlow). A flip clock folds the top half of each card down over a hinge, like the old split-flap boards in airports and stations (Solari boards). A wheel picker looks like an odometer but is turned by hand to choose a value; rotating words swap a word, a text scramble churns random characters, and a news ticker is a marquee.
If you called it…
…you meant Count-Up vs. Odometer vs. Flip Clock.
Anatomy — every part, named
- 1Digit window
overflow: hidden“The little box each rolling number sits in” is a digit window, a clipped slot that shows one digit of a taller strip of 0 to 9 sliding past.
- 2Hinge line
transform-origin“The line across the middle of each flip number” is the hinge line, the seam where a card's two halves meet and the top flap folds down.
Prompt — paste into your agent
Build the number animation that matches: a count-up (CountUp.js) that runs to the total and eases out as it lands; an odometer (NumberFlow) where each digit rolls along its own 0 to 9 strip inside a clipped digit window; or a flip clock (FlipClock.js) where the top half of a two-half card folds down over the hinge line across its middle. Set font-variant-numeric: tabular-nums so the digits never change width, and land exactly on the final value.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my number animation (count-up, odometer or flip clock; tabular-nums, CountUp.js, NumberFlow, FlipClock.js). Rule out: digits changing width so the number jitters because font-variant-numeric: tabular-nums is missing; only the last digit rolling on a carry like 199 to 200; the odometer's digit window not clipped so old and new digits overlap, or clipped so tight the tops are cut; the flip reading as a spinning card because the two halves share no hinge (transform-origin on the seam) and no perspective; a linear count that feels robotic instead of easing out; the count restarting every time it scrolls into view; screen readers reading every step; motion still running under prefers-reduced-motion. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | font-variant-numeric: tabular-nums | equal-width digits, so the number never jitters |
| NumberFlow | <NumberFlow value={1312} /> | rolling digits; React, Vue, Svelte and plain JS |
| CountUp.js | new CountUp('total', 1312) | counts to the total in 2 s with easeOutExpo |
| Odometer | class="odometer" | HubSpot's library; the car theme draws the boxed digits |
| FlipClock.js | flipClock({ parent, face: counter(), theme: theme() }) | flip cards for clocks and counters; also Flip by pqina |
| SwiftUI | .contentTransition(.numericText()) | Apple's rolling digits, iOS 16+ and macOS 13+ |
See also
From the maker of this site48h Icons · Custom Apple app icons in 48 hours48hicons.com →