Rolling Digits

Installation#

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/rolling-digits.json

Manual

1. Install the dependencies

   npmpnpmbunyarn

   npm install clsx motion tailwind-merge

2. Add the shared helpers

   Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

   lib/motion.ts

   import type { Transition, Variants } from "motion/react";
   
   /** Durations in seconds. */
   export const duration = {
     instant: 0.1,
     quick: 0.18,
     base: 0.28,
     slow: 0.45,
   } as const;
   
   /** Cubic-bezier curves. */
   export const ease = {
     /** Entering, UI response. */
     out: [0.22, 1, 0.36, 1],
     /** Moving on screen. */
     inOut: [0.65, 0, 0.35, 1],
     /** Sheets and the mobile menu. */
     drawer: [0.32, 0.72, 0, 1],
   } as const;
   
   /** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
   export const ui = {
     press: { scale: 0.96, duration: 0.12 },
     icon: { type: "spring", duration: 0.3, bounce: 0 },
     popover: { duration: 0.18, ease: ease.out },
     modal: { duration: 0.24, ease: ease.out },
     exitFactor: 0.6,
   } as const;
   
   /** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
   export const kinetic = {
     heroLetter: { duration: 0.6, ease: ease.out },
     /** Delay per letter, eased so the wave slows toward the end. */
     heroStep: 0.035,
     reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
     /** Two afterimages: lag in seconds and opacity of each. */
     ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
   } as const;
   
   /** Spring presets. */
   export const spring = {
     snappy: { type: "spring", stiffness: 500, damping: 30 },
     smooth: { type: "spring", stiffness: 260, damping: 26 },
     bouncy: { type: "spring", stiffness: 300, damping: 15 },
   } as const satisfies Record<string, Transition>;
   
   /** Stagger between siblings, in seconds (0.03–0.06). */
   export const stagger = {
     tight: 0.03,
     base: 0.045,
     loose: 0.06,
   } as const;
   
   /** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
   export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.base } },
         exit: { opacity: 0, transition: { duration: duration.quick } },
       };
     }
     return {
       hidden: { opacity: 0, y, filter: "blur(4px)" },
       visible: {
         opacity: 1,
         y: 0,
         filter: "blur(0px)",
         transition: { duration: duration.base, ease: ease.out },
       },
       exit: {
         opacity: 0,
         y: -y / 2,
         filter: "blur(4px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
     };
   }
   
   /** Scale 0.96 → 1 for popovers, menus and dialogs. */
   export function overlayVariants(reduceMotion?: boolean | null): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.quick } },
         exit: { opacity: 0, transition: { duration: duration.instant } },
       };
     }
     return {
       hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
       visible: {
         opacity: 1,
         scale: 1,
         filter: "blur(0px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
       exit: {
         opacity: 0,
         scale: 0.96,
         filter: "blur(2px)",
         transition: { duration: duration.instant + 0.02, ease: ease.out },
       },
     };
   }
   
   /** Parent variants that stagger their children in. */
   export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
     return {
       hidden: {},
       visible: { transition: { staggerChildren: gap, delayChildren } },
       exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
     };
   }

   Show all 113 lines

3. Copy the source

   components/ui/rolling-digits/rolling-digits.tsx

   "use client";
   
   import type { ComponentProps } from "react";
   import { AnimatePresence, motion, useReducedMotion } from "motion/react";
   import { cn } from "@/lib/utils";
   import { duration } from "@/lib/motion";
   
   export interface RollingDigitsProps extends Omit<ComponentProps<"span">, "children"> {
     /** The number to show. Each digit rolls to its new value when this changes. */
     value: number;
     /** Decimal places. Defaults to the decimals in `value`. */
     decimals?: number;
     /** Intl.NumberFormat options, e.g. { style: "currency", currency: "EUR" }. */
     format?: Intl.NumberFormatOptions;
     /** Locale for formatting. @default "en-US" */
     locale?: string;
     /** Roll every digit up from zero on first render. @default true */
     animateOnMount?: boolean;
     /** Seconds between reels, starting from the rightmost digit. @default 0.035 */
     stagger?: number;
   }
   
   const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
   const REEL = { type: "spring", stiffness: 140, damping: 20, mass: 0.9 } as const;
   // The reel fades out at its top and bottom edges, like a real odometer window.
   const MASK = "linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent)";
   
   function Reel({ digit, delay, reduceMotion }: { digit: number; delay: number; reduceMotion: boolean }) {
     return (
       <span
         className="relative inline-block [clip-path:inset(0)]"
         style={{ maskImage: MASK, WebkitMaskImage: MASK }}
       >
         {/* Sets the cell's width and baseline; tabular figures keep every digit the same width. */}
         <span className="invisible">0</span>
         <motion.span
           className="absolute inset-x-0 top-0 flex flex-col items-center"
           initial={{ y: "0%" }}
           animate={{ y: `${-digit * 10}%` }}
           transition={reduceMotion ? { duration: 0 } : { ...REEL, delay }}
         >
           {DIGITS.map((n) => (
             <span key={n}>{n}</span>
           ))}
         </motion.span>
       </span>
     );
   }
   
   export function RollingDigits({
     value,
     decimals,
     format,
     locale = "en-US",
     animateOnMount = true,
     stagger = 0.035,
     className,
     ...props
   }: RollingDigitsProps) {
     const reduceMotion = useReducedMotion() ?? false;
     const places = decimals ?? (String(value).split(".")[1]?.length ?? 0);
     const text = new Intl.NumberFormat(locale, { minimumFractionDigits: places, maximumFractionDigits: places, ...format }).format(value);
     const chars = Array.from(text);
   
     return (
       <span className={cn("inline-block whitespace-nowrap tabular-nums", className)} {...props}>
         <span className="sr-only">{text}</span>
         {/* Keyed by place value from the right, so the ones reel stays the ones reel as the number grows. */}
         <span aria-hidden="true" className="select-none">
           {/* With animateOnMount off, everything present on first render skips its entrance, reels included;
               digits that appear later (999 → 1,000) still roll up from zero. */}
           <AnimatePresence mode="popLayout" initial={animateOnMount}>
             {chars.map((char, i) => {
               const place = chars.length - i;
               const isDigit = /\d/.test(char);
               return (
                 <motion.span
                   key={isDigit ? `d${place}` : `s${place}${char}`}
                   layout={reduceMotion ? false : "position"}
                   className="inline-block"
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0, transition: { duration: duration.quick } }}
                   transition={{ duration: duration.base, layout: REEL }}
                 >
                   {isDigit ? (
                     <Reel digit={Number(char)} delay={(place - 1) * stagger} reduceMotion={reduceMotion} />
                   ) : (
                     char
                   )}
                 </motion.span>
               );
             })}
           </AnimatePresence>
         </span>
       </span>
     );
   }

   Show all 98 lines

Usage#

import { RollingDigits } from "@/components/ui/rolling-digits/rolling-digits";

export function Price({ value }: { value: number }) {
  return <RollingDigits value={value} decimals={2} format={{ style: "currency", currency: "USD" }} />;
}

API reference#

Accessibility#

• The formatted number is in a visually hidden copy for screen readers (and for copy and paste); the reels are aria-hidden.
• Announce live changes with your own aria-live region if they matter.
• With reduced motion enabled, digits change instantly.