Animated Counter Hero Block for React

Edit the COUNTERS array at the top of the file. Each counter has a value, the decimals it always shows (1 for 4.2, 2 for 99.98), a prefix and a suffix written around the number ($, +, M, %), a duration in milliseconds, a label and a one-line description. CountingNumber writes the thousands separators itself through its grouping prop, in a fixed en-US locale so the server and the browser agree; pass locale to write the numbers another way. Keep four cells: the band is a four-column grid from md and a two-by-two below it.

Each number counts once, from 0, when a quarter of it has scrolled into view (trigger="view"), racing off and slowing into its value over its own duration. Before that, and while the page loads, it shows 0. With reduced motion turned on, every number shows its value at once and nothing counts; with scripts off, the values show as plain text. The rest of the hero fades up once on load with CSS transitions, which reduced motion also turns off.

They are the Guides component, an aria-hidden layer that draws the lines of the box it sits in. The page column (max-w-6xl, the same in every block) has Guides bleed marks="top" rules="top": two side rails that run the section's full height, so they join the rails of the blocks above and below, and one rule along the top edge that runs to the page's edges (the section's overflow-x-clip stops it there), with a plus on each crossing. The block below draws the next rule, so a stack of blocks never doubles a line. Inside, the figures are a grid gap-px bg-border of bg-background cells with a border-y, so the cells share one hairline between them, and the band's two top and bottom corners get a plus from <Guides marks="corners" rules="none" sides={false} />, which lands them on the rails. Every line is solid and is the theme's border colour, so it follows any preset.

Pass the real numbers as each counter's value, fetched wherever your page loads its data. A CountingNumber that gets a new value counts on from the number it's showing, not from 0, so a figure that updates while the page is open ticks up to the new total. Keep the decimals, prefix and suffix in your data next to the value, so 99.98% never shows as 99.98 or loses its sign.

The counters are a description list: each figure is read with its label and its description, and always as its final value (Freelancers, 48,000+), never as the numbers flying past during the count. The headline is the block's one h1, and the pill and both calls to action are links named by their text.

The band sits in two columns on phones and four from the md breakpoint, and its numbers step up from text-2xl to text-3xl at 360px, text-4xl at sm and text-5xl at lg. A number never wraps, and its digits are tabular, so they don't jostle while they count. The headline wraps, balanced, the two calls to action sit side by side or wrap onto a second line, and both are on the first screen of a phone, with the figures right under them.