4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T12e1,// Hairline UI · stats-band · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; /* ───────────────────────────────────────────────────────── * STATS BAND: the numbers arrive when you do * * waiting before it's on screen, quiet zeros * arriving the hairlines between stats draw themselves, * then each figure rolls up from zero, one after * another, as its label rises in * done the real numbers, rolling again only if they * change * * Screen readers get the real figures straight away. * ───────────────────────────────────────────────────────── */ export interface Stat { value: number; label: string; /** Intl.NumberFormat options, e.g. { notation: "compact" }. */ format?: Intl.NumberFormatOptions; prefix?: string; suffix?: string; } export interface StatsBandProps extends React.HTMLAttributes { stats: Stat[]; /** Time between one stat starting and the next (ms). */ stagger?: number; /** Classes for the figures. */ numberClassName?: string; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); export function StatsBand({ stats, stagger = 140, numberClassName = "text-[40px] font-medium leading-[1.15] tracking-[-0.04em] text-foreground", className = "", ...props }: StatsBandProps) { const reduced = useReducedMotion(); const ref = React.useRef(null); const [seen, setSeen] = React.useState(false); const [revealed, setRevealed] = React.useState(0); // Start once, the first time most of the band is on screen. React.useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver( ([entry]) => { if (!entry.isIntersecting) return; setSeen(true); observer.disconnect(); }, { threshold: 0.5 } ); observer.observe(el); return () => observer.disconnect(); }, []); // Then reveal the stats one after another: the lines draw first, the numbers follow. React.useEffect(() => { if (!seen) return; if (reduced) { setRevealed(stats.length); return; } const timers = stats.map((_, i) => window.setTimeout(() => setRevealed((r) => Math.max(r, i + 1)), 240 + i * stagger)); return () => timers.forEach((t) => window.clearTimeout(t)); }, [seen, reduced, stats, stagger]); return (

{stat.label}: {stat.prefix} {new Intl.NumberFormat(undefined, stat.format).format(stat.value)} {stat.suffix}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/stats-band.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]