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
- Copy
count-up.cssandcount-up.jsand link them. - Mark numbers:
<span data-count="10000" data-count-suffix="+">0</span>(optionaldata-count-prefix="$",data-count-duration="900").
Accessibility & performance
prefers-reduced-motion: final value shown immediately. Tabular figures keep width steady.