guillermo
trust accepted

StatBand

Show that the numbers hold — quantitative proof with provenance.

FixtureViewport

Structural distinction

A ruled band of 2–5 stats separated by hairline seams; values count up on entry with tabular numerals; every stat can carry a qualifier line stating what the number actually measures.

Use when

After a hero or case study, when real measured quantities exist. Products judged on magnitude: scale, reliability, speed.

Avoid when

When numbers are vanity metrics or lack provenance — the qualifier line will expose that. Never fabricate figures.

Accessibility

Labelled region; stats are a list; values are real text (SSR shows final values, count-up only rewrites presentation). Tabular numerals prevent layout jitter.

scroll

Counter progression starts when the band enters view; staggered per theme tokens.

hover

None — the band is evidence, not a control. Falsely interactive stats are prohibited.

press

None by design (see hover).

focus

No interactive elements; band is skipped in tab order.

reduced

Final values render instantly; no counting.

Usage

import { StatBand } from "@guillermo/marketing";

<StatBand
  content={{
    label: "In numbers",
    stats: [
      { value: 1240, label: "constraints tracked", qualifier: "What this measures." },
      { value: 98.2, format: { suffix: "%", decimals: 1 }, label: "confidence" },
    ],
  }}
/>