Metric Strip

For the proof section of a landing page or an annual report. Each figure is set large in tabular numerals and, when the strip first enters the viewport, every digit rolls from zero to its value through its own column, left to right and figure by figure.

Prefixes and suffixes ($, %, min, B) sit in a lighter, smaller weight, so the number stays the hero. An optional series draws a thin sparkline under each figure once its digits land. Hairline dividers separate the cells and turn into a two-column grid on phones.

The real values are rendered as text for screen readers, and the rolling digits are hidden from them. Light and dark (.dark), one CSS file, and reduced motion shows the final values immediately.