50: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"] 51:I[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 53: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"] 54:T222c,// Hairline UI · number-roll · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; /* ───────────────────────────────────────────────────────── * NUMBER ROLL: numbers that change like an odometer * * rolling each digit is a column that rolls to its new * value, in the direction the number moved: going * up, a 9 rolls on to 0 instead of spinning back * places new places slide open from nothing; lost ones * fold away * format anything Intl.NumberFormat does: currency, * percent, compact ("1.2K"), decimals * * The real number is always there as text for screen readers * and copy and paste; the columns are only what you see. * ───────────────────────────────────────────────────────── */ export interface NumberRollProps extends Omit, "children"> { value: number; /** Intl.NumberFormat options, e.g. { style: "currency", currency: "USD" }. */ format?: Intl.NumberFormatOptions; locales?: string | string[]; prefix?: string; suffix?: string; /** Start from this value and roll to `value` once mounted, e.g. 0 for stats. */ from?: number; /** Roll duration in ms. */ duration?: number; /** Always roll this way, e.g. "down" for a countdown's seconds, which wrap from 00 to 59. Defaults to the way the number moved. */ direction?: "up" | "down"; } type Column = { key: string; char: string; digit: number | null }; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const SETS = 5; // the strip repeats 0–9 five times so a roll never runs out of digits const MIDDLE = 20; /** The strip as one text node, a digit a line: fifty lines, but one element to lay out instead of fifty. */ const STRIP = Array.from({ length: SETS * 10 }, (_, i) => i % 10).join("\n"); 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); /** Digits are keyed by their place counted from the right, so the units column stays the units column. */ function columns(text: string): Column[] { const chars = [...text]; const seen = new Map(); let place = 0; const out: Column[] = []; for (let i = chars.length - 1; i >= 0; i--) { const char = chars[i]; if (/\d/.test(char)) out.push({ key: `d${place++}`, char, digit: Number(char) }); else { // Symbols are keyed by how many of the same symbol sit to their right, so a comma that shifts is the same comma. const n = seen.get(char) ?? 0; seen.set(char, n + 1); out.push({ key: `s${char}${n}`, char, digit: null }); } } return out.reverse(); } // Memoised: a parent that re-renders with the same number doesn't rebuild the strips. const Digit = React.memo(function Digit({ digit, trend, duration, reduced, rollIn }: { digit: number; trend: number; duration: number; reduced: boolean; rollIn: boolean }) { const [pos, setPos] = React.useState(MIDDLE + (rollIn ? 0 : digit)); const [moving, setMoving] = React.useState(false); const posRef = React.useRef(pos); const stripRef = React.useRef(null); React.useLayoutEffect(() => { const current = posRef.current; const showing = ((current % 10) + 10) % 10; if (showing === digit) return; if (reduced) { posRef.current = MIDDLE + digit; setMoving(false); setPos(MIDDLE + digit); return; } const up = trend > 0 || (trend === 0 && digit > showing); let target = up ? current + ((digit - showing + 10) % 10) : current - ((showing - digit + 10) % 10); // Values arriving faster than a roll (a progress percent) never let it re-centre, so before it runs off the strip, // jump the strip back by whole sets mid-roll (it looks identical) and roll on from there. if (target < 10 || target > SETS * 10 - 11) { const shift = Math.round((target - MIDDLE) / 10) * 10; const strip = stripRef.current; if (strip?.offsetHeight) { let visual = current; try { visual = -new DOMMatrixReadOnly(getComputedStyle(strip).transform).m42 / (strip.offsetHeight / (SETS * 10)); } catch {} const transition = strip.style.transition; strip.style.transition = "none"; strip.style.transform = `translateY(${(-(visual - shift) * 100) / (SETS * 10)}%)`; void strip.offsetHeight; strip.style.transition = transition; } target -= shift; } posRef.current = target; setMoving(true); setPos(target); }, [digit, trend, reduced]); // After a roll, quietly re-centre on the middle set so the next roll always has room. const settle = () => { const centred = MIDDLE + (((posRef.current % 10) + 10) % 10); posRef.current = centred; setMoving(false); setPos(centred); }; return ( {digit} ); }); /** A place that appeared after the first paint slides open; places that were there from the start just sit. */ function Place({ enter, children }: { enter: boolean; children: React.ReactNode }) { const [entering] = React.useState(enter); return ( {children} ); } export function NumberRoll({ value, format, locales, prefix = "", suffix = "", from, duration = 900, direction, className = "", ...props }: NumberRollProps) { const reduced = useReducedMotion(); const [shown, setShown] = React.useState(from ?? value); const previous = React.useRef(shown); const mounted = React.useRef(false); // Roll from `from` to the real value once on screen (a frame later, so the start is painted). React.useEffect(() => { const frame = requestAnimationFrame(() => setShown(value)); return () => cancelAnimationFrame(frame); }, [value]); React.useEffect(() => { mounted.current = true; }, []); const formatter = React.useMemo(() => new Intl.NumberFormat(locales, format), [locales, format && JSON.stringify(format)]); // eslint-disable-line react-hooks/exhaustive-deps const text = `${prefix}${formatter.format(shown)}${suffix}`; const cols = React.useMemo(() => columns(text), [text]); const trend = direction === "up" ? 1 : direction === "down" ? -1 : Math.sign(shown - previous.current); // Places that disappear fold away instead of vanishing. const [leaving, setLeaving] = React.useState([]); const lastCols = React.useRef(cols); React.useLayoutEffect(() => { const gone = lastCols.current.filter((c) => !cols.some((n) => n.key === c.key)); lastCols.current = cols; previous.current = shown; if (!gone.length || reduced) return; setLeaving(gone); const timer = window.setTimeout(() => setLeaving([]), 420); return () => window.clearTimeout(timer); }, [cols, shown, reduced]); return ( {`${prefix}${formatter.format(value)}${suffix}`} ); } 4f:["$","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,["$","$L50",null,{"namespace":"@hairline","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-col-in {\n\tfrom {\n\t\tmax-width: 0;\n\t\topacity: 0;\n\t}\n\tto {\n\t\tmax-width: 1em;\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ui-col-out {\n\tfrom {\n\t\tmax-width: 1em;\n\t\topacity: 1;\n\t}\n\tto {\n\t\tmax-width: 0;\n\t\topacity: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/number-roll.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]