Tally Band

A row of figures — years, clients, tonnes, rand — that ticks from zero to its final value when the row comes into view. The value sits in the markup as a normal number, so it is readable with JavaScript off and to anything crawling the page. The script only animates what is already written there.

Formatting is handled: thousands separators, decimal places, prefixes and suffixes such as R, % and k. The easing slows the last digits rather than snapping, and the figures are set in tabular numerals so the row does not jitter as digit widths change. The band is a CSS grid, two up on a phone and up to six across on a desktop.

Made for a consultancy, supplier or agency page with real figures on it. If your numbers come from an API and change while the page is open, treat this as a starting point rather than a drop-in, because it counts once and stops. Under prefers-reduced-motion the final value is printed immediately and nothing animates.