Animated Number
A smooth animated number component that counts from one value to another with customizable formatting and easing options.
Pro Features
Unlock advanced capabilities with the Pro version
Smooth Animations
Butter-smooth number counting animations with multiple easing options powered by Framer Motion
Advanced Formatting
Built-in support for currency, percentage, and custom number formatting with internationalization
Viewport Triggering
Smart scroll-based animation triggering that starts counting when numbers come into view
Multiple Easing Options
Choose from linear, ease variants, or spring animations to match your design requirements
Prefix & Suffix Support
Add custom text before and after numbers for enhanced context and meaning
Dashboard Ready
Perfect for dashboards, analytics, and data visualization with professional styling options
Installation
Install via CLI
npx moonui-cli@latest add animated-numberUsage
Examples
Basic Number Animation
Simple number counting animation from 0 to target value.
Currency Formatting
Display monetary values with proper currency formatting.
Total Revenue
Monthly Sales
Percentage Values
Show percentages with proper formatting and decimal places.
Conversion Rate
Bounce Rate
Uptime
With Prefix and Suffix
Add custom text before and after the animated number.
Different Easing Effects
Compare different animation easing functions for various feels.
Linear
Ease Out
Ease In Out
Spring
Trigger on Scroll
Animate numbers when they come into viewport using triggerOnView.
Scroll down to see animation
Total Downloads
Customer Satisfaction
Dashboard Statistics
Real-world usage example in a dashboard with metrics cards.
Revenue
New Users
Bounce Rate
Goal Achievement