Animated Number
A smooth animated number component that counts from one value to another with customizable formatting and easing options.
Pro features
What the Pro version adds to this component.
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 @moontra/moonui-cli 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.
Percentage Values
Show percentages with proper formatting and decimal places.
With Prefix and Suffix
Add custom text before and after the animated number.
Different Easing Effects
Compare different animation easing functions for various feels.
Trigger on Scroll
Animate numbers when they come into viewport using triggerOnView.
Dashboard Statistics
Real-world usage example in a dashboard with metrics cards.