Number Ticker

"use client";

import { useEffect, useState } from "react";

import { NumberTicker } from "@/lab/magicui/ui/number-ticker";

const VALUES = [100, 0];

export default function NumberTickerDemo() {
  // Alternate the target so the counter keeps ticking while the card is visible.
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((n) => (n + 1) % VALUES.length), 3500);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="@container relative flex h-full w-full items-center justify-center">
      <NumberTicker
        value={VALUES[i]}
        className="text-[clamp(4rem,16cqw,8rem)] font-medium tracking-tighter whitespace-pre-wrap text-black dark:text-white"
      />
    </div>
  );
}