Hero Metric Card Stats Block for React

Edit CASH (the balance now, a month ago and the monthly burn) and NOTE (when and from where) at the top of the file. The big number, the percentage in the pill, the sign, the arrow, the runway in the header and the "up" or "down" in the header are all computed from CASH. A negative change draws an outlined pill with a down arrow and a true minus sign instead of the filled one.

The shell is a Frame with a hairline, a light tint and a small padding; the panel inside is a rounded bg-card with a ring and a shadow, so it reads as raised in light and dark themes alike. The + marks come from a Guides layer on the shell, whose lines run a little past its corners, so the shell sits inset from the rails. Nothing uses the primary colour.

Structure carries the emphasis, not colour: a rise is the filled foreground pill, a fall is an outline and no change is a muted pill. The arrow and the sign say the same in text, so the direction never depends on colour, and the pill is correct in every theme preset.

Yes. The big number is read as "1,284,600" (with the dollar sign), not as rolling digits; the change is read as "plus 6.2 percent" followed by "vs last month". The arrow is hidden from assistive technology. The footnote is a description list, so "As of" and "Source" are read with their values. The number sits in a bdi element so a right-to-left page doesn't move the dollar sign.

The header and the card fade up once on load and the number's digits roll up the first time it scrolls into view. With reduced motion the number simply shows its value and nothing fades.

The card is centred with a small margin from the rails, the number shrinks a size (about 48 pixels) and the footnote keeps its two rows. Nothing scrolls sideways at 320 pixels.