Number roll

"use client";

import * as React from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

import { cn } from "@/lib/utils";

gsap.registerPlugin(useGSAP);

const MOTION = "(prefers-reduced-motion: no-preference)";

/** 0 to 9 and a second 0, so the column can pass 9 and arrive back at the top without a jump. */
const CELLS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const CELL = 100 / CELLS.length;

/** Where a position on the wheel sits on the strip, for any number of turns in either direction. */
const offset = (position: number) => `translateY(${-(((position % 10) + 10) % 10) * CELL}%)`;

type NumberRollProps = Omit<React.ComponentProps<"span">, "children" | "prefix"> & {
  /** The number to land on. Changing it rolls from the old value. */
  value: number;
  /** Text before the digits, such as a currency sign. */
  prefix?: string;
  /** Text after the digits, such as a unit. */
  suffix?: string;
  /** Digits after the decimal point. */
  decimals?: number;
  /** Locale for separators. Pass one so the server and the browser agree. */
  locale?: string;
  /** Seconds a roll takes. */
  duration?: number;
};

/**
 * Digits roll like an odometer. Each digit is a column of 0 to 9 moved by transform, and the server
 * renders every column on its final digit, so the value is right before any script runs. The entrance
 * spins whole turns and lands where it began, which means its first frame matches that HTML exactly.
 */
function NumberRoll({
  value,
  prefix = "",
  suffix = "",
  decimals = 0,
  locale = "en-US",
  duration = 1.6,
  className,
  ...props
}: NumberRollProps) {
  const root = React.useRef<HTMLSpanElement>(null);
  const previous = React.useRef<number | null>(null);
  const text = Math.abs(value).toLocaleString(locale, {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });
  const whole = Math.round(Math.abs(value) * 10 ** decimals);

  useGSAP(
    () => {
      const media = gsap.matchMedia();
      media.add(MOTION, (_, contextSafe) => {
        const element = root.current;
        if (!element || !contextSafe) return;
        const strips = gsap.utils.toArray<HTMLElement>("[data-slot=number-roll-strip]");
        const stagger = Math.min(0.05, 0.3 / Math.max(strips.length, 1));
        const from = previous.current;

        const roll = contextSafe((start: number | null) => {
          previous.current = whole;
          strips.forEach((strip, i) => {
            const place = strips.length - 1 - i;
            const digit = Number(strip.dataset.digit);
            let travel: number;
            if (start === null) {
              // Right-hand columns turn more, as they do on a real odometer.
              travel = 10 * Math.max(1, 3 - place);
            } else {
              const steps = Math.floor(whole / 10 ** place) - Math.floor(start / 10 ** place);
              const distance = Math.abs(steps);
              const turns = Math.min(Math.floor(distance / 10), Math.max(0, 2 - place));
              travel = Math.sign(steps) * (distance % 10) + Math.sign(steps) * turns * 10;
            }
            if (!travel) return;
            const wheel = { position: digit - travel };
            strip.style.transform = offset(wheel.position);
            gsap.to(wheel, {
              position: digit,
              duration: start === null ? duration : duration * 0.6,
              delay: i * stagger,
              ease: start === null ? "power3.inOut" : "power3.out",
              onUpdate: () => {
                strip.style.transform = offset(wheel.position);
              },
            });
          });
        }) as (start: number | null) => void;

        if (from !== null) {
          roll(from);
          return;
        }
        let alive = true;
        const watcher = new IntersectionObserver(
          (entries) => {
            if (!entries.some((e) => e.isIntersecting)) return;
            watcher.disconnect();
            void document.fonts.ready.then(() => alive && roll(null));
          },
          { threshold: 0.1 },
        );
        watcher.observe(element);
        return () => {
          alive = false;
          watcher.disconnect();
        };
      });
      return () => media.revert();
    },
    { scope: root, dependencies: [whole, duration], revertOnUpdate: true },
  );

  let place = text.replace(/\D/g, "").length;
  return (
    <span ref={root} data-slot="number-roll" className={cn("inline-flex tabular-nums", className)} {...props}>
      <span className="sr-only">
        {value < 0 ? "-" : ""}
        {prefix}
        {text}
        {suffix}
      </span>
      <span aria-hidden="true" className="inline-flex select-none">
        {value < 0 ? <span>-</span> : null}
        {prefix ? <span>{prefix}</span> : null}
        {[...text].map((character, i) => {
          if (!/\d/.test(character)) return <span key={`mark-${i}`}>{character}</span>;
          const digit = Number(character);
          place -= 1;
          return (
            <span key={`place-${place}`} className="inline-block h-[1lh] overflow-clip">
              <span
                data-slot="number-roll-strip"
                data-digit={digit}
                className="flex flex-col"
                style={{ transform: offset(digit) }}
              >
                {CELLS.map((cell, c) => (
                  <span key={c} className="block h-[1lh]">
                    {cell}
                  </span>
                ))}
              </span>
            </span>
          );
        })}
        {suffix ? <span>{suffix}</span> : null}
      </span>
    </span>
  );
}

export { NumberRoll };