Number Counter
数字滚动
Aliases:数字滚动增长数字从小到大计数动画数字跳到目标值数据滚动
What is it
Animates a number from zero (or a previous value) up to its target, so the counting itself tells the story of growth. Common on dashboard KPIs, stats sections and milestones ("100k users") — the digit becomes the animation, far more persuasive than a static figure.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Big numbers on heroes and stats — KPIs, users, downloads
- One-shot count-up when the figure scrolls into view
- Transitioning from an old value to a new one
✕ When not to use
- Rapidly updating live values — perpetual rolling is unreadable
- Figures users must transcribe exactly — amounts, IDs
- Dense small numbers inside tables — noise over value
Variants
Eased count
缓动计数
Fast start, eased landing — the natural default
Tabular digits
等宽数字
tabular-nums prevents width jitter
Formatted count
带格式计数
Thousands separators, units and decimals interpolate in sync
Implementation
requestAnimationFrameease-out interpolationfont-variant-numeric: tabular-nums@property counter (CSS-only)CSS cannot count text; the practical recipe is requestAnimationFrame interpolation with an ease-out curve over 1–2s. Always add font-variant-numeric: tabular-nums to stop width jitter, and format separators/units every frame. Respect prefers-reduced-motion by showing the final value directly.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add a count-up animation to the project's stat numbers. Check existing number display components first; avoid conflicts with live refresh logic. Requirements: - rAF + ease-out interpolation, 1–2s, triggered once in view - tabular-nums to prevent jitter, thousands formatting - Show the final value directly under reduced-motion or without JS - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
An admin home screen that concentrates key data and entry points into one view, organized as regional grids: header and sidebar handle navigation, while KPI cards, charts and a primary table fill the content area so users grasp system status at a glance and drill down directly. It anchors the information architecture of the product.
PagesUsed withElements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionSimilarA loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
ComponentsApplies toReveals a headline line by line or word by word instead of fading the whole block in. The spoken-rhythm staggering gives copy order and weight — a staple of landing-page hero titles, section intros and scrollytelling, usually triggered once on entering the viewport.
MotionSimilar