Components
Number Ticker Growth Metrics Counter
An animated percentage counter that shifts color and swaps direction icons to signal positive or negative growth trends, ideal for KPIs, stock changes, and quarterly metrics.
"use client";
import NumberTicker from "@/components/ui/number-ticker-04";
import { useEffect, useState } from "react";
const NumberTickerDemo = () => {
const [val, setVal] = useState(0.184); // +18.4%
useEffect(() => {
const interval = setInterval(() => {
setVal((prev) => (prev > 0 ? -0.057 : 0.184));
}, 4000);
return () => clearInterval(interval);
}, []);
return (
<div className="flex items-center gap-2">
<NumberTicker
value={val}
className="font-medium lg:text-5xl sm:text-4xl text-3xl "
/>
</div>
);
};
export default NumberTickerDemo;