63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T33d9,"use client"; import { Fragment, useEffect, useRef, useState } from "react"; import type { CSSProperties } from "react"; /** * OdometerCounter - a mechanical odometer. * * Every digit is its own drum: a strip of 0-9 behind a dark glass window. * The number counts up when it scrolls into view (once), the fast drums * blur and glow while they spin, then each drum settles with a small * detent bounce, the low ones first. Change `target` later and it rolls * the right way: up for more, down for less. Higher digits only turn when * the drum beside them carries over, columns slide in as the number grows * and thousands separators slide in with them. * * Size comes from the CSS variable --odo-fs (default 2.25rem); the whole * thing is built in em. Respects prefers-reduced-motion. React only. */ const CELL = 1.2; // drum window height, em const COL_W = 0.64; // drum width, em const GAP = 0.06; // space between drums, em const SEP_W = 0.3; // thousands separator slot, em const MAX_COLS = 16; const HEX = /^#[0-9a-fA-F]{6}$/; // 0-9 then 0 again, so any position 0 <= p < 10 shows a full window. const STRIP = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; function rgba(hex: string, a: number): string { const n = parseInt(hex.slice(1), 16); return "rgba(" + ((n >> 16) & 255) + "," + ((n >> 8) & 255) + "," + (n & 255) + "," + a + ")"; } function smooth(a: number, b: number, x: number): number { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); } /** Drum position in digits: the units drum is continuous, a higher drum only turns while the one below it carries 9 to 0. */ function drumAt(v: number, k: number): number { const u = v / Math.pow(10, k); if (k === 0) return u; const fl = Math.floor(u); return fl + smooth(0.88, 1, u - fl); } function grouped(n: number, sep: string): string { const s = String(Math.abs(n)); let out = ""; for (let i = 0; i < s.length; i++) { if (i > 0 && (s.length - i) % 3 === 0) out += sep; out += s.charAt(i); } return (n < 0 ? "-" : "") + out; } type Drum = { e: number; // detent spring offset, digits ev: number; a: number; // presence 0..1 prev: number; heat: number; kickAt: number; kickV: number; }; export type OdometerCounterProps = { /** The number to roll to. Change it later and the drums roll up or down to it. */ target?: number; /** Seconds for the first count from zero. */ duration?: number; /** Printed before the number, dimmed. */ prefix?: string; /** Printed after the number in the accent colour. */ suffix?: string; /** Thousands separator. */ separator?: string; /** Accent as #rrggbb: suffix glow and the heat on a spinning drum. */ accent?: string; className?: string; style?: CSSProperties; }; export function OdometerCounter({ target = 12400, duration = 1.6, prefix = "", suffix = "+", separator = ",", accent = "#ff5c3c", className = "", style, }: OdometerCounterProps) { const goal = Number.isFinite(target) ? Math.round(target) : 0; const need = Math.min(MAX_COLS, String(Math.abs(goal)).length); const [cols, setCols] = useState(need); if (need > cols) setCols(need); const acc = HEX.test(accent) ? accent : "#ff5c3c"; const rootRef = useRef(null); const boxes = useRef<(HTMLSpanElement | null)[]>([]); const strips = useRef<(HTMLSpanElement | null)[]>([]); const heats = useRef<(HTMLSpanElement | null)[]>([]); const seps = useRef<(HTMLSpanElement | null)[]>([]); const signBox = useRef(null); const cfg = useRef({ goal, duration }); const wake = useRef<(() => void) | null>(null); useEffect(() => { cfg.current = { goal, duration }; wake.current?.(); }, [goal, duration]); useEffect(() => { const root = rootRef.current; if (!root) return; const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const drums: Drum[] = Array.from({ length: MAX_COLS }, () => ({ e: 0, ev: 0, a: 0, prev: 0, heat: 0, kickAt: 0, kickV: 0, })); let alive = true; let started = false; let first = true; let applied: number | null = null; let cur = 0; let signA = 0; let raf = 0; let last = 0; let tw: { from: number; to: number; t0: number; dur: number } | null = null; const finish = (t: { from: number; to: number }, now: number) => { const early = t.from + (t.to - t.from) * (1 - Math.pow(0.4, 4)); const dir = Math.abs(t.to) >= Math.abs(t.from) ? 1 : -1; drums.forEach((d, k) => { const mov = Math.abs(drumAt(Math.abs(t.to), k) - drumAt(Math.abs(early), k)); if (mov > 0.02) { d.kickAt = now + k * 55; d.kickV = (dir * Math.min(1, mov) * 2.6) / (1 + 0.45 * k); } }); }; const frame = (now: number) => { raf = 0; if (!alive) return; const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60; last = now; const c = cfg.current; const reduced = mq.matches; if (started && applied !== c.goal) { const from = cur; applied = c.goal; if (reduced) { cur = c.goal; tw = null; } else { const dist = Math.abs(c.goal - from); const dur = first ? Math.max(0.2, c.duration) : Math.min(1.6, Math.max(0.7, 0.7 + 0.2 * Math.log10(1 + dist))); tw = { from, to: c.goal, t0: now, dur }; } first = false; } if (tw) { const t = (now - tw.t0) / (1000 * tw.dur); if (t >= 1) { cur = tw.to; finish(tw, now); tw = null; } else { const q = 1 - t; cur = tw.from + (tw.to - tw.from) * (1 - q * q * q * q); } } const av = Math.abs(cur); let busy = tw !== null; for (let k = 0; k < MAX_COLS; k++) { const d = drums[k]; const strip = strips.current[k]; if (!d || !strip) continue; if (reduced) { d.e = 0; d.ev = 0; d.kickAt = 0; } if (d.kickAt && now >= d.kickAt) { d.ev += d.kickV; d.kickAt = 0; } if (d.kickAt) busy = true; for (let s = 0; s < 2; s++) { const h = dt / 2; d.ev += (-140 * d.e - 11 * d.ev) * h; d.e += d.ev * h; } if (Math.abs(d.e) < 0.0007 && Math.abs(d.ev) < 0.004) { d.e = 0; d.ev = 0; } else busy = true; const pt = drumAt(av, k); const pd = pt + d.e; const speed = Math.abs(pt - d.prev) / dt; d.prev = pt; const y = ((pd % 10) + 10) % 10; strip.style.transform = "translate3d(0," + (-y * CELL).toFixed(4) + "em,0)"; const b = smooth(12, 72, speed) * 0.032; strip.style.filter = b > 0.001 ? "blur(" + b.toFixed(4) + "em)" : "none"; d.heat += (Math.min(1, speed / 40) - d.heat) * (1 - Math.exp(-12 * dt)); if (d.heat < 0.01) d.heat = 0; else busy = true; const heat = heats.current[k]; if (heat) heat.style.opacity = d.heat.toFixed(3); const at = k === 0 || Math.floor(av) >= Math.pow(10, k) ? 1 : 0; if (reduced) d.a = at; else d.a += (at - d.a) * (1 - Math.exp(-16 * dt)); if (Math.abs(at - d.a) < 0.003) d.a = at; else busy = true; const box = boxes.current[k]; if (box) { box.style.width = (d.a * (COL_W + GAP)).toFixed(4) + "em"; box.style.opacity = d.a.toFixed(3); } const sep = seps.current[k]; if (sep) { sep.style.width = (d.a * SEP_W).toFixed(4) + "em"; sep.style.opacity = d.a.toFixed(3); } } const sg = signBox.current; if (sg) { const at = cur < 0 ? 1 : 0; if (reduced) signA = at; else signA += (at - signA) * (1 - Math.exp(-16 * dt)); if (Math.abs(at - signA) < 0.003) signA = at; else busy = true; sg.style.width = (signA * 0.42).toFixed(4) + "em"; sg.style.opacity = signA.toFixed(3); } if (busy) raf = requestAnimationFrame(frame); }; const go = () => { if (!alive || raf) return; last = 0; raf = requestAnimationFrame(frame); }; wake.current = go; let io: IntersectionObserver | null = null; const begin = () => { started = true; go(); }; if (typeof IntersectionObserver === "undefined") begin(); else { io = new IntersectionObserver( (entries) => { if (entries.some((en) => en.isIntersecting)) { begin(); io?.disconnect(); } }, { threshold: 0.6 }, ); io.observe(root); } mq.addEventListener("change", go); return () => { alive = false; wake.current = null; if (raf) cancelAnimationFrame(raf); io?.disconnect(); mq.removeEventListener("change", go); }; }, []); const order = Array.from({ length: cols }, (_, i) => cols - 1 - i); const tile: CSSProperties = { position: "relative", flex: "none", width: COL_W + "em", height: CELL + "em", margin: "0 " + GAP / 2 + "em", overflow: "hidden", borderRadius: "0.16em", background: "linear-gradient(180deg,#1b1d22 0%,#0e0f12 52%,#181a1e 100%)", boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.09), inset 0 1px 0 rgba(255,255,255,0.14)", color: "#f5f6f8", fontWeight: 650, letterSpacing: "-0.02em", }; return ( {prefix + grouped(goal, separator) + suffix} {prefix ? ( {prefix} ) : null} - {order.map((k) => ( { boxes.current[k] = el; }} style={{ display: "flex", justifyContent: "center", flex: "none", overflow: "hidden", height: CELL + "em", width: k === 0 ? COL_W + GAP + "em" : 0, opacity: k === 0 ? 1 : 0, }} > { strips.current[k] = el; }} style={{ position: "absolute", left: 0, top: 0, width: "100%", willChange: "transform" }} > {STRIP.map((d, i) => ( {d} ))} { heats.current[k] = el; }} style={{ position: "absolute", inset: 0, opacity: 0, background: "radial-gradient(120% 60% at 50% 100%," + rgba(acc, 0.4) + ",transparent 70%)", }} /> {k > 0 && k % 3 === 0 ? ( { seps.current[k] = el; }} style={{ display: "flex", justifyContent: "center", alignItems: "flex-end", flex: "none", overflow: "hidden", height: CELL + "em", paddingBottom: "0.2em", width: 0, opacity: 0, }} > {separator} ) : null} ))} {suffix ? ( {suffix} ) : null} ); } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"components/viberdy/odometer-counter.tsx","content":"$64","type":"registry:component","target":"components/viberdy/odometer-counter.tsx"}],"className":"h-[70svh] min-h-80"}]]}]