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:T257f,"use client"; import { useLayoutEffect, useRef, useState } from "react"; import { gsap } from "gsap"; // Numbers that roll digit by digit, like the wheels of an odometer. Every digit is a window one // character tall with a tall strip of 0-9 behind it; rolling is just sliding that strip up. // The strip is 40 digits long (four full 0-9 turns) so a digit can spin around a few times before // it lands. Separators, the prefix and the suffix stay still while the wheels turn. const CELLS = 40; export type OdometerProps = { /** The number to show once the wheels stop. */ value?: number; /** The number the wheels start from the first time they roll. */ from?: number; /** How long one wheel takes to roll, in seconds. */ duration?: number; /** How long each wheel waits after the one on its left, in seconds. */ stagger?: number; /** Text before the number, e.g. "$". */ prefix?: string; /** Text after the number, e.g. "%" or " subscribers". */ suffix?: string; /** How many digits to show after the decimal mark. */ decimals?: number; /** What goes between groups of thousands, e.g. "," or " ". Empty for none. */ separator?: string; /** The decimal mark, e.g. "." or ",". */ decimalMark?: string; /** When it rolls: "inView" the first time it scrolls into view, "load" right away, "change" only when the value changes (it starts out showing the value). A new value always rolls from what is on screen. */ trigger?: "inView" | "load" | "change"; /** The GSAP ease of each wheel, e.g. "power3.out" or "expo.out". */ ease?: string; /** Extra classes for the outer box. Set the font size, weight and colour here; everything is sized in em. */ className?: string; /** Extra classes for the prefix and the suffix, e.g. "opacity-50" or "text-[0.5em]". */ affixClassName?: string; }; type Piece = { kind: "digit"; digit: number; fromRight: number } | { kind: "text"; char: string }; // "12480" → "12,480" as a list of digit wheels and fixed characters, left to right function buildPieces(value: number, decimals: number, separator: string, decimalMark: string): Piece[] { const places = Math.min(6, Math.max(0, Math.round(decimals))); const [whole = "0", fraction = ""] = Math.abs(value).toFixed(places).split("."); const grouped = separator ? whole.replace(/\B(?=(\d{3})+(?!\d))/g, "\u0000") : whole; const characters = [...(value < 0 ? "-" : ""), ...grouped, ...(places > 0 ? ["\u0001", ...fraction] : [])]; const digitCount = characters.filter((c) => c >= "0" && c <= "9").length; let seen = 0; return characters.map((c): Piece => { if (c >= "0" && c <= "9") { seen += 1; return { kind: "digit", digit: Number(c), fromRight: digitCount - seen }; } return { kind: "text", char: c === "\u0000" ? separator : c === "\u0001" ? decimalMark : c }; }); } // The digits of `from`, left-padded with zeros (or trimmed) to fit the wheels we have function startDigits(from: number, decimals: number, count: number): number[] { const places = Math.min(6, Math.max(0, Math.round(decimals))); const digits = Math.abs(from).toFixed(places).replace(".", "").split("").map(Number); while (digits.length < count) digits.unshift(0); return digits.slice(digits.length - count); } // The wheels fade out at the top and bottom edge of their window, so digits slide in softly. // The digit at rest sits in the clear middle. const fade = { maskImage: "linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent)", WebkitMaskImage: "linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent)" }; const wrap = (n: number) => ((n % 10) + 10) % 10; const percentFor = (index: number) => -(index / CELLS) * 100; export function Odometer({ value = 12480, from = 0, duration = 1.6, stagger = 0.06, prefix = "", suffix = "", decimals = 0, separator = ",", decimalMark = ".", trigger = "inView", ease = "power3.out", className = "", affixClassName = "", }: OdometerProps) { const boxRef = useRef(null); // The number is drawn as plain text on the server and until the first layout effect, so it // is readable without JavaScript and never flashes the wrong digits const [ready, setReady] = useState(false); // False until the first full roll has finished. Until then every wheel spins, even a 0 that stays 0. const firstRollPending = useRef(true); const pieces = buildPieces(value, decimals, separator, decimalMark); const plain = pieces.map((p) => (p.kind === "digit" ? p.digit : p.char)).join(""); const spoken = `${prefix}${plain}${suffix}`; const digitCount = pieces.filter((p) => p.kind === "digit").length; // New format = new wheels (a different number of digits, separator or decimals) const layoutKey = `${digitCount}|${decimals}|${separator}|${decimalMark}`; useLayoutEffect(() => setReady(true), []); useLayoutEffect(() => { const box = boxRef.current; if (!ready || !box) return; const strips = Array.from(box.querySelectorAll("[data-wheel]")); if (strips.length === 0) return; const end = pieces.filter((p) => p.kind === "digit").map((p) => p.digit); const start = startDigits(from, decimals, end.length); const indexOf = (strip: HTMLElement) => (-Number(gsap.getProperty(strip, "yPercent")) / 100) * CELLS; const show = (strip: HTMLElement, index: number) => gsap.set(strip, { yPercent: percentFor(index) }); // Wheels that were just created sit on their start digit (or on the value, if it only rolls on change) const fresh = strips.some((strip) => !strip.dataset.set); if (fresh) { strips.forEach((strip, k) => { strip.dataset.set = "1"; show(strip, trigger === "change" ? end[k]! : start[k]!); }); firstRollPending.current = trigger !== "change"; } const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) { strips.forEach((strip, k) => show(strip, end[k]!)); firstRollPending.current = false; return; } let timeline: gsap.core.Timeline | null = null; let observer: IntersectionObserver | null = null; const roll = () => { const forced = firstRollPending.current; const current = strips.map((strip) => wrap(indexOf(strip))); const distance = end.map((digit, k) => wrap(digit - current[k]!)); // Like a real odometer, every wheel to the right of the first one that changes turns too let first = distance.findIndex((d) => d > 0.001); if (forced) first = 0; if (first === -1) return; timeline = gsap.timeline({ onComplete: () => { firstRollPending.current = false; }, }); strips.forEach((strip, k) => { if (k < first) return; const fromRight = strips.length - 1 - k; // How many extra full turns this wheel makes: the right-most wheels spin the most const turns = forced ? (fromRight === 0 ? 2 : 1) : distance[k]! > 0.001 ? (fromRight === 0 && k > first ? 1 : 0) : 1; const travel = distance[k]! + turns * 10; show(strip, current[k]!); timeline!.to( strip, { yPercent: percentFor(current[k]! + travel), duration, ease, // Back onto the first 0-9 so the strip never runs out onComplete: () => show(strip, end[k]!), }, (k - first) * stagger, ); }); }; if (firstRollPending.current && trigger === "inView") { observer = new IntersectionObserver( ([entry]) => { if (!entry?.isIntersecting) return; observer?.disconnect(); roll(); }, { threshold: 0.3 }, ); observer.observe(box); } else { roll(); } return () => { observer?.disconnect(); timeline?.kill(); }; // `pieces` changes every render but plain/layoutKey cover everything that matters in it // eslint-disable-next-line react-hooks/exhaustive-deps }, [ready, plain, layoutKey, from, trigger, duration, stagger, ease]); const affix = (text: string) => text ? ( {text} ) : null; return ( {spoken} {affix(prefix)} {ready ? pieces.map((piece, i) => piece.kind === "text" ? ( {piece.char} ) : ( // The window: one digit tall. The 0-9 strip slides behind it. {Array.from({ length: CELLS }, (_, n) => ( {n % 10} ))} ), ) : plain} {affix(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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/odometer/odometer.tsx","content":"$50","type":"registry:component","target":"components/dimaac/odometer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]