React Metrics Band

Copy Page

The hard numbers, counted up as they scroll into view. The animation is decoration — the number is the content, which changes how it has to be built.

Installation

Props

The number ships in the HTML

Three decisions follow from treating the value as content rather than as an effect:

• The server renders the final number. State initialises to target, not to zero. A count-up that starts at 0 in the markup means your proof metrics are invisible to anything that does not execute JavaScript — including, historically, plenty of crawlers and every reader-mode.
• Animation starts on intersection, not on mount. An IntersectionObserver fires once at 35% visibility and then disconnects. Counting up while off-screen wastes the effect entirely.
• prefers-reduced-motion is honoured. Users who have asked for less motion get the final value immediately. Count-ups are exactly the kind of movement that setting exists for.

The easing is easeOutCubic and the final frame assigns target exactly, so the number always lands on the real value rather than a rounding artefact like 2.39M.

Only publish numbers you can defend

detail exists so each figure can carry its basis — "11 weeks → 2 days", "trailing 12 months". A large number with no baseline is decoration, and a technical buyer reads it as such. Note that the demo includes a zero: 0 field security incidents is a strong claim precisely because it is falsifiable and dated.