Counter Roll-up

Text effectVanilla JS · zero dependenciesClick the number to replay

projects shipped · click to replay

-- fps

prefers-reduced-motion detected — final value shown instantly

X-ray · layers

Roll-upanimate from zero

Ease outfast start, soft landing

Separators12,500 instead of 12500

Parameters

Target12,500

Duration1.8 s

Decimals0

Start delay150 ms

your version · updates as you tinker

How this effect works

A counter is a progress value from zero to one mapped onto the target number. The smooth landing comes from an ease-out curve: progress changes quickly at first, then spends its final frames closing the last small gap.

Formatting is deliberately separate from animation. The counter calculates a number, then Intl.NumberFormat adds separators and decimal places. Turn separators off and the motion stays identical — only the presentation layer changes.

Production notes: respects prefers-reduced-motion (final value immediately) · target and timing are clamped by the controls/share layer · textContent only, never innerHTML · copied snippet is self-contained HTML + JS.