Left-Heavy Metric Cards Hero Block for React

Edit the METRICS array at the top of the file. Each entry has a value and its decimals (99.99 with 2), a unit ("ms", "%"), a label, a delta that says which way it moved in words ("18% lower") and a trend arrow, TrendingUpIcon or TrendingDownIcon. A large figure takes a suffix such as K with value: 12.4, and spoken says it in full ("thousand") for screen readers.

Each figure is a SlidingNumber with trigger="view": it holds zeros in every digit place until the card is a quarter in view, then rolls each digit to the value, so the card never changes width. With reduced motion the digits jump straight to the value. To show the values from the start, as text in the server's HTML, use trigger="mount"; a later change to value still rolls only the digits that changed.

Fetch the figures from your metrics endpoint and pass them in place of the static METRICS array. SlidingNumber rolls from the old value to the new one whenever value changes, so refreshing the data on an interval animates only the digits that moved. Write each delta from the same data so the trend line never contradicts the figure above it.

Yes. The headline is the page's one h1, and the cells sit in an aside named "Key performance metrics", each a description list: a screen reader reads the label, then the figure with its unit ("12.4 thousand users"), then the trend in words. The rolling digits are hidden from assistive technology while a visually hidden copy carries the real value, so nothing is read mid-roll, and the trend arrows are decorative.

The colour says whether the change is good, the arrow says which way it went: latency going down is good news, so it gets a down arrow in the theme's text-success-foreground. For a change that is bad news, use text-destructive on that entry. The words in delta carry the meaning on their own, so the colour is never the only signal.

Below the lg breakpoint the grid becomes one column: the copy comes first, with both calls to action on the first screen, and the metric cells stack under it at full width, with a rule and + marks between the two. The headline wraps, balanced, at text-4xl, and the calls to action wrap when the row runs out of room. Nothing scrolls sideways down to 320px.