Components
An animated number counter that smoothly tweens from a starting value to a target, with ref-based control to trigger the count on demand.
Loading preview...
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;
Loading preview...
Loading preview...