Number Ticker

Text 39

About

An animated number counter that smoothly tweens from a starting value to a target, with ref-based control to trigger the count on demand.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Number Ticker to your project and fits it to your theme.

Code

How Number Ticker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import NumberTicker from "@/components/ui/basic-number-ticker";

const NumberTickerDemo = () => {
  return (
    <div className="p-10 flex w-full h-full min-h-[400px] justify-center items-center bg-background">
      <p className="w-full text-7xl md:text-9xl flex justify-center font-mono text-foreground">
        <NumberTicker
          from={0}
          target={100}
          autoStart={true}
          transition={{ duration: 3.5, type: "tween", ease: "easeInOut" }}
          onComplete={() => console.log("complete")}
          onStart={() => console.log("start")}
        />
        %
      </p>
    </div>
  );
};

export default NumberTickerDemo;