Smooth number animations perfect for dashboards, landing pages, and data visualizations.
Smooth number animations that bring your statistics to life. Perfect for dashboards, landing pages, and data visualizations.
EASE-OUT ANIMATION
0
Custom easing function
SPRING PHYSICS
0
Natural spring motion
TOTAL REVENUE
$0
+12% from last month
ACTIVE USERS
0
+8% from last month
DOWNLOADS
0
+23% from last month
✓ Landing Pages
Grab attention with animated statistics
✓ Dashboards
Make data updates more noticeable
✓ E-commerce
Animate price changes and inventory
✓ Analytics
Visualize real-time metrics
function AnimatedCounter({ value, duration = 2000 }) {
const [displayValue, setDisplayValue] = useState(0)
useEffect(() => {
const startTime = Date.now()
const startValue = displayValue
const animate = () => {
const now = Date.now()
const progress = Math.min((now - startTime) / duration, 1)
const easeOut = 1 - Math.pow(1 - progress, 3)
const current = startValue + (value - startValue) * easeOut
setDisplayValue(Math.floor(current))
if (progress < 1) {
requestAnimationFrame(animate)
}
}
requestAnimationFrame(animate)
}, [value, duration])
return <span>{displayValue.toLocaleString()}</span>
}