Flush Stat Stack
Four figures set edge to edge on a safety-orange field, each line fitted to the full width, their digits rolling in like meters as the scroll reaches them.
DOM + CSS0 deps1 file · 13 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useLayoutEffect, useRef, useSyncExternalStore } from "react";
import type { CSSProperties, RefObject } from "react";
/** Safety orange as a field colour. Black on it reads at 6.3:1. */
const HV_ORANGE = "#FF5B14";
/** The hot highlight, for orange marks on black. */
const HV_HOT = "#FF7A1A";
const HV_BLACK = "#0B0A09";
/**
* The display face: Archivo's width axis does the shouting (wdth 62..125).
* Load it as a variable font with the width axis and expose it as --font-hv,
* e.g. in Next: Archivo({ subsets: ["latin"], axes: ["wdth"], variable: "--font-hv" }).
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Stats sections usually sit in four tidy boxes. Here each figure is a poster. Every line is fitted to the full width of its box, so 2,200 kN, 40–100%, 18 days and 50 starts each run edge to edge in heavy black type on safety orange, and each line uses a different width of the same face (condensed, normal, wide, condensed) so the stack has rhythm rather than four identical bars. As the scroll brings a line up the screen its digits roll into place like a mechanical meter, the rightmost spinning furthest, and a rule draws out beneath it with its label and a short note. Punctuation and units stand still, so the figure always reads.
Curator’s note
Pro: each line is measured at 100px and scaled to the container (again when the face loads or the box resizes), and every digit is a window onto its own strip of 0-9, moved by the scroll with no React render, the rightmost travelling furthest as on a meter. Mixing Archivo's width axis per line gives the stack its rhythm. Every Hi-Vis entry is cut byte for byte from one site (Ardent, a made-up engine maker) and shares its fixed palette: safety orange #FF5B14 as a field, warm black, bone, Archivo's width axis for the shouting.
