CounterFlow

"use client";

import { useRef } from "react";
import { motion, useInView, useReducedMotion } from "motion/react";

type CounterFlowProps = {
  /** Final number. Change it later and only the digits that differ roll. */
  value: number;
  /** Text before the number, like "$". */
  prefix?: string;
  /** Text after the number, like "%" or "+". */
  suffix?: string;
  /** Digits after the point. */
  decimals?: number;
  /** Number format, like "en-IN" for lakh commas. */
  locale?: string;
  /** Seconds each digit rolls. */
  duration?: number;
  /** Wrapper look (text size, colour). */
  className?: string;
};

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

function Digit({ digit, delay, duration }: { digit: number; delay: number; duration: number }) {
  const reduce = useReducedMotion();

  return (
    <span className="relative inline-block h-[1.1em] w-[1ch] overflow-hidden">
      <motion.span
        className="absolute inset-x-0 top-0 flex flex-col text-center"
        initial={{ y: "0%" }}
        animate={{ y: `${-digit * 10}%` }}
        transition={reduce ? { duration: 0 } : { duration, delay, ease: [0.16, 1, 0.3, 1] }}
      >
        {DIGITS.map((d) => (
          <span key={d} className="h-[1.1em] leading-[1.1]">
            {d}
          </span>
        ))}
      </motion.span>
    </span>
  );
}

/* CounterFlow: an odometer. Each digit is a strip of 0 to 9 that rolls into place the first time the number scrolls into view, right digit first. */
export function CounterFlow({ value, prefix, suffix, decimals = 0, locale = "en-US", duration = 1.4, className = "text-4xl font-semibold text-white" }: CounterFlowProps) {
  const box = useRef<HTMLSpanElement>(null);
  const seen = useInView(box, { once: true, amount: 0.5 });
  const text = value.toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  const chars = [...text];

  return (
    <span ref={box} className={`inline-flex tabular-nums ${className}`}>
      <span className="sr-only">{`${prefix ?? ""}${text}${suffix ?? ""}`}</span>
      <span aria-hidden className="inline-flex leading-[1.1]">
        {prefix}
        {chars.map((char, i) => {
          const fromRight = chars.length - i;
          return /\d/.test(char) ? (
            <Digit key={fromRight} digit={seen ? Number(char) : 0} delay={fromRight * 0.05} duration={duration} />
          ) : (
            <span key={fromRight}>{char}</span>
          );
        })}
        {suffix}
      </span>
    </span>
  );
}