Metric Hero Strip Features Block for React

Edit METRICS at the top of the file: each is a value, how many decimals it shows, a unit that follows it, a label, and the feature and description under the hairline. Keep four, so the band fills its rows at two and four across.

They show their value at once, and the digits roll like an odometer only if the value changes. Counting up from zero when the band scrolls into view is one prop (trigger="view"), but the page then shows zeros before JavaScript runs, and in a screenshot, so this block leaves it off.

For each column, the figure and its unit in one piece ("99.99 %"), the label, then the feature's heading and sentence. The figure keeps its real text for assistive technology while the rolling digits are decoration.

A figure with a unit or a sign ("300+", "40 ms") would otherwise reorder in a right-to-left layout and show the unit on the wrong side. Wrapping the figure and its unit in one bdi keeps them in reading order.

Yes: figures are the foreground colour, labels the muted foreground, and the band is your theme's background with border-colour hairlines between the columns. Nothing is a fixed colour, so it follows light and dark.

The columns go two by two, with the figures a size smaller (text-4xl) so "99.99%" fits a 320 pixel screen. The header stays centred above, and the block ends on the band's last row.