Count-up

Full motion specification

How the movement works

Use it to make a figure feel big or growing: revenue, user counts, completion rates.

1. 01One pass per 4.7 s. Fades in at 0.1–0.4 s and out at 4.0–4.4 s.
2. 02Number (bold 104 px): 0→2,480 over 0.45–2.9 s. Value = round(target × (1 − (1 − p)^4)): fast at first, slow at the end.
3. 03Thousands separator included. Every digit has the same width and the number is right-aligned, so it does not jitter sideways.
4. 04Lands at 2.9 s: colour switches white→yellow and scale does a small bounce, 1 + 0.07·e^(−7t)·cos(15t).
5. 05Up-arrow chip on the left (mint circle, radius 34): appears from 0.35 s with spring 1 − e^(−7t)·cos(14t); while counting it shakes vertically by 6 px × (1 − p)^3 × sin(30u).
6. 06Bar below (330 × 12, blue→mint gradient): fills in proportion to value ÷ target.