Count Up

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.

Nexu 67cfb58 5 files · 6.2 KB Updated

File contents

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.

nexu-io/motion-anything/tree/main/recipes/web/count-up commit 67cfb58782

Frequently asked questions

npx skillmds@latest add nexu-io/count-up