Motion & texture

Count Up / Number Ticker

Q: How do people describe a Count Up / Number Ticker in plain words?

dashboard numbers that roll up from zero to the real value that yearly-recap effect where the money amount climbs slot-machine style digits that settle one by one

Q: How do I implement a Count Up / Number Ticker?

Animate the revenue stat from 0 to its value on first reveal: rAF interpolation over ~1.2s with ease-out, locale-aware formatting, font-variant-numeric: tabular-nums. On later data updates, change the value without replaying the whole climb.

Animate a number from a start value to its target so stats land with a little ceremony.

Also known as number animation · odometer · stat ticker

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Count Up / Number Ticker".

Animate the revenue stat from 0 to its value on first reveal: rAF interpolation over ~1.2s with ease-out, locale-aware formatting, font-variant-numeric: tabular-nums. On later data updates, change the value without replaying the whole climb.

Anatomy:
- interpolation: current = start + (end − start) × eased(t).
- easing: Ease-out so the last digits slow into place.
- formatting: Keep locale separators and decimals stable while ticking.
- tabular-nums: Without it, width jumps as digits change.

Preferred API / pattern: `react-countup / custom rAF hook`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Replaying from 0 on every refresh
○Avoid: Missing tabular-nums
○Avoid: Multi-second count on a small KPI
○Avoid: Skipping reduced-motion

In plain wordsHow people search for it

“dashboard numbers that roll up from zero to the real value”“that yearly-recap effect where the money amount climbs”“slot-machine style digits that settle one by one”

AnatomyOpen for part names

interpolation: current = start + (end − start) × eased(t).
easing: Ease-out so the last digits slow into place.
formatting: Keep locale separators and decimals stable while ticking.
tabular-nums: Without it, width jumps as digits change.

How to write itOpen for stack patterns

Web (HTML/CSS)requestAnimationFrame + ease-out interpolation

React + Tailwind + shadcn/uireact-countup / custom rAF hook

SwiftUIAnimatableModifier / contentTransition(.numericText)

Ant DesignStatistic with custom animator / CountUp libs

Notes

Yearly recaps, hero stats, achievement screens. Two rules: roll once on entrance—live tickers (stock price, online count) should swap values, not restart from zero; and keep duration under 1–2s or people think the network stalled. Use tabular-nums so “1” and “8” don’t shove the layout.

Common mistakesHumans and models trip here

Replaying from 0 on every refresh: ceremony is for first paint only.
Missing tabular-nums: the whole block twitches while digits change.
Multi-second count on a small KPI: feels like lag, not delight.
Skipping reduced-motion: jump straight to the final number.

More failure symptoms on AI broke it.

Related patterns

Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.Data TableA grid of rows and columns for comparing structured records.Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.

Spotted a wrong name or missing pattern?

Message on X