# Rolling Odometer Number Counter > Free rolling odometer number counter: digit drums that carry like a real meter, start when scrolled into view and keep the final figure readable. React or HTML. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/rolling-odometer-number-counter-with-digit-drums). - Page, with a live preview: https://shadcn.exchange/r/weinc/rolling-odometer-number-counter-with-digit-drums - Screenshot: https://shadcn.exchange/shot/weinc/rolling-odometer-number-counter-with-digit-drums/light.png - Registry item: https://we.inc/r/rolling-odometer-number-counter-with-digit-drums.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/rolling-odometer-number-counter-with-digit-drums.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion`, `lucide-react` ## Files ### `components/we-inc/rolling-odometer-number-counter-with-digit-drums.tsx` ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; import { RotateCcw } from "lucide-react"; // Sample figure for a made-up courier. VALUE is shown to one decimal place on the last (tenths) drum. const VALUE = 48306.4; const WHOLE_DRUMS = 5; // drums before the decimal point const DURATION = 2400; // ms for the full roll const CELL = 1.3; // em, height of one digit window const easeOut = (t: number) => 1 - Math.pow(1 - t, 4); const full = new Intl.NumberFormat("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 }); const group = new Intl.NumberFormat("en-US").formatToParts(1000).find((p) => p.type === "group")?.value ?? ","; /** Position of each drum, tenths first. Higher drums only turn while every drum below is passing 9 to 0. */ function drumPositions(value: number, count: number) { const ticks = Math.round(value * 10 * 1e6) / 1e6; const out: number[] = []; for (let p = 0; p < count; p++) { const unit = Math.pow(10, p); const digit = Math.floor(ticks / unit) % 10; if (p === 0) { out.push(ticks % 10); continue; } const below = ticks % unit; const carry = Math.max(0, below - (unit - 1)); out.push(digit + carry); } return out; } function Drum({ pos, light }: { pos: number; light?: boolean }) { return ( {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((d, i) => ( {d} ))} ); } export default function RollingOdometerCounter() { const reduce = useReducedMotion(); const rootRef = useRef(null); const [shown, setShown] = useState(VALUE); const runRef = useRef<() => void>(() => {}); useEffect(() => { const el = rootRef.current; if (!el || reduce) { setShown(VALUE); return; } let raf = 0; let start = 0; let elapsed = 0; let visible = false; let done = false; const tick = (now: number) => { if (!start) start = now - elapsed; elapsed = now - start; const p = Math.min(1, elapsed / DURATION); setShown(VALUE * easeOut(p)); done = p >= 1; if (!done && visible) raf = requestAnimationFrame(tick); }; runRef.current = () => { cancelAnimationFrame(raf); elapsed = 0; start = 0; done = false; if (visible) raf = requestAnimationFrame(tick); }; setShown(0); const io = new IntersectionObserver( ([entry]) => { visible = entry.isIntersecting; cancelAnimationFrame(raf); start = 0; if (visible && !done) raf = requestAnimationFrame(tick); }, { threshold: 0.3 }, ); io.observe(el); return () => { io.disconnect(); cancelAnimationFrame(raf); }; }, [reduce]); const replay = useCallback(() => runRef.current(), []); const pos = drumPositions(shown, WHOLE_DRUMS + 1).reverse(); const whole = pos.slice(0, WHOLE_DRUMS); return (
); } ```