Back to Dictionary
Data & Content Visualization
●○○Ready to Use
Recommended defaultNumber Ticker / Counting Animation
Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.
Use
KPI dashboards when numbers load or refresh
Avoid
Data tables with many numbers (can cause motion sickness)
Safer Alternative
No safer default listed.
Risk Level
Low risk
Live Demo
Total Users
0What It Is
Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.
✓When to Use
- KPI dashboards when numbers load or refresh
- Milestone celebrations (e.g., reaching 1M users)
- E-commerce stats like total sales or active users
- Checkout pages showing total price calculation
✕When NOT to Use
- Data tables with many numbers (can cause motion sickness)
- Values that change extremely frequently (use simple text replacement)
- Negative or error values where animation feels inappropriately celebratory
Configuration Tips
- 01Use tabular-nums CSS to prevent horizontal jitter during counting
- 02Use an ease-out timing function so counting slows down as it reaches the target
- 03Format output with commas or currency symbols (Intl.NumberFormat)
You've Seen It In
StripeVercelNotion HQ DashboardApple Fitness
AI Implementation Prompts
Move from a fast scaffold to production details, then tune timing and edge states.
Add a number counting animation for my stats card. The number should count up from 0 to the target value smoothly over 2 seconds.
Code Example (Tailwind CSS)
A focused implementation sketch you can adapt to your product state.
'use client';
import { useEffect, useState } from 'react';
import { motion, useSpring, useTransform } from 'framer-motion';
export function AnimatedCounter({ value }: { value: number }) {
const springValue = useSpring(0, {
bounce: 0,
duration: 2000,
});
const displayValue = useTransform(springValue, (current) =>
Math.round(current).toLocaleString()
);
useEffect(() => {
springValue.set(value);
}, [springValue, value]);
return (
<motion.span className="tabular-nums text-4xl font-bold tracking-tight text-white">
{displayValue}
</motion.span>
);
}