count-up

name	count-up
description	Animate a number counting up to its target as it scrolls into view, once. Use for stat/metric blocks to draw the eye to an impressive figure. Honors prefers-reduced-motion (final value shown instantly). Avoid for precise values the user must read while animating, or many counters at once.
triggers	["count up","animated number","stat counter","数字滚动","数据强调"]
od	{"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":null,"preview":{"type":"html"},"design_system":{"requires":false},"example_prompt":"Use count-up on the stats row: animate each number up to its target when the section enters\nthe viewport, with thousands separators and a prefers-reduced-motion fallback.\n"}

count-up

A number that animates up to its target on enter. Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

• Stat / metric blocks; drawing the eye to one impressive figure.

When NOT to use it (restraint)

• Precise values the reader must read exactly mid-animation.
• Many counters firing at once — pick the one that matters.

How to apply

1. Copy count-up.css and count-up.js and link them.
2. Mark numbers: <span data-count="10000" data-count-suffix="+">0</span> (optional data-count-prefix="$", data-count-duration="900").

Accessibility & performance

• prefers-reduced-motion: final value shown immediately. Tabular figures keep width steady.