# 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.

- Skill: `xpert-ai/count-up` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/count-up`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/count-up/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/count-up

---


# count-up

A number that animates up to its target on enter. Part of
[motion-anything](https://github.com/nexu-io/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.