Number ticker

"use client";

import * as React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface NumberTickerProps {
  value: number;
  /** Any Intl.NumberFormat options, e.g. { style: "currency", currency: "USD" }. */
  format?: Intl.NumberFormatOptions;
  locale?: string;
  className?: string;
}

const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function Digit({ digit }: { digit: number }) {
  return (
    // overflow: clip (not hidden) keeps the text baseline, so "." and "," line up with digits.
    <span className="relative inline-block leading-none [overflow:clip]" aria-hidden>
      <span className="invisible">0</span>
      <motion.span
        className="absolute inset-x-0 top-0 flex flex-col items-center"
        initial={false}
        animate={{ y: `${-digit}em` }}
        transition={{ type: "spring", stiffness: 140, damping: 20, mass: 0.8 }}
      >
        {DIGITS.map((d) => (
          <span key={d} className="block h-[1em] leading-none">
            {d}
          </span>
        ))}
      </motion.span>
    </span>
  );
}

/** Each digit rolls on its own column, odometer style. */
export function NumberTicker({ value, format, locale = "en-US", className }: NumberTickerProps) {
  const text = React.useMemo(() => new Intl.NumberFormat(locale, format).format(value), [value, format, locale]);
  // Key characters from the right so the ones digit keeps its column as numbers grow.
  const chars = text.split("").map((ch, i, all) => ({ ch, key: all.length - i }));

  return (
    <span className={cn("inline-flex items-baseline tabular-nums leading-none", className)}>
      <span className="sr-only">{text}</span>
      {chars.map(({ ch, key }) =>
        /\d/.test(ch) ? (
          <Digit key={key} digit={Number(ch)} />
        ) : (
          <span key={`${key}-${ch}`} aria-hidden className="inline-block leading-none">
            {ch}
          </span>
        ),
      )}
    </span>
  );
}