# Stats ticker band > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A full-bleed stats section for a climate data product called Meridian. Four readings sit in equal columns under a 48px condensed headline. Each figure is 112px Big Shoulders Display and counts from 0 to its target in 1200ms with a cubic ease-out, staggered 90ms. A 1px mint hairline grows to 48px on the same clock. Replay runs the count again. The feeling is a newsroom ticker: dense, dark, one mint accent, numbers doing the talking. ## Reference behaviour 1. Initial state: 56px nav with "MERIDIAN" wordmark, three text links (Series, Stations, Methods) and a live pill "Hour 14 · 2 Oct 2026" with a 7px mint dot. Section kicker "Readings · this hour", headline "The hour, counted", Replay button on the right. Four columns already show their final numbers after the first 1200ms run. 2. On first paint the script starts a run: each `.num` goes from 0 to `data-to` over 1200ms. Ease is `1 - (1-p)^3`. Columns do not wait on each other for the number (they share one clock) but the mint hairline uses `--d` of 0 / 90 / 180 / 270ms. 3. When the run finishes, Replay is enabled and `.stats` gets class `run`, which grows each `::before` hairline to 48px. 4. Click Replay: numbers snap to 0, `run` is removed (hairlines collapse), Replay disables, the count plays again. 5. Hover Replay: border and text become mint. Focus-visible: 2px mint outline, 3px offset, on Replay and nav links. 6. `prefers-reduced-motion: reduce`: first paint and Replay set the final numbers immediately; hairline transition is 1ms. 7. Screen-reader text inside each article announces the full reading (e.g. "1.48 degrees Celsius, global mean anomaly versus 1880 to 1900"). 8. The degree suffix on the first figure is a 48px `` in `--ink-2`. The fourth figure uses a thousands comma (`3,842`). ## Structure ``` 1280 × 800 ┌────────────────────────────────────────────────────────────────────────┐ │ MERIDIAN Series Stations Methods ● Hour 14 · 2 Oct │ 56 ├────────────────────────────────────────────────────────────────────────┤ │ READINGS · THIS HOUR [ Replay ] │ │ THE HOUR, COUNTED │ │ │ │ 1.48° 427 21.6 3,842 │ 112px │ °C ANOMALY PPM CO2 CM SEA LEVEL STATIONS │ │ Global mean… Flask network Mean rise… Reporting this hour… │ └────────────────────────────────────────────────────────────────────────┘ 64px pad. Four equal columns, 1px --line between them. ``` - `