Minimal Hero Metric Stats Block for React

Edit MEALS (this week, last week and the same week a year ago) and PANTRIES at the top of the file. The sentence is computed: it says "more" or "fewer" from the sign of each difference and writes the amounts with thousands separators. Change the words around the number ("meals served this week") for your own metric.

So the heading says the whole thing. A screen reader landing on it by heading hears "14,820 meals served this week across 41 partner pantries, 340 more than last week and ...", instead of a bare number in one place and a loose sentence in another. The rolling digits are hidden from assistive technology; it reads the final value, never the digits in between.

It starts the first time the number is at least a quarter in view: each digit rolls from zero to its place with a short CSS transition. The digits start as zeros of the finished number's width (14,820 starts as 00,000), so the centred number never shifts while it rolls. With reduced motion the digits change in place with no roll. Swap in the catalog's CountingNumber for a ticker that races through every value instead.

Yes. The block is centred, the numbers sit in bdi elements so digits and separators keep their order, and the hairline and the type are symmetric.

The number drops to 60 pixels (a size at each breakpoint from there up) and the sentence wraps in a narrower measure under the same hairline. Nothing scrolls sideways at 320 pixels.