How to use it: It is incredibly simple. Just drag and drop the component onto your canvas, set your target number, and it's ready to use! No coding, no complex timelines—just beautiful, kinetic data visualization in seconds.
1. 🎯 Where can I use this component?
This component is perfect for building trust and highlighting impressive data across your site:
- Milestones & Social Proof: Show off your user count, lines of code written, or cups of coffee consumed in your "About Us" section.
- Pricing Pages: Make the cost of your premium tiers feel dynamic and interactive.
- Financial & Web3 Sites: Display revenue growth, APY percentages, or token market caps with high-end financial ticker animations.
- Landing Page Metrics: Highlight performance boosts (e.g., "99.99% Uptime") with a smooth, engaging reveal.
2. ✨ Features
- 🎰 Slot-Machine Animation: Individual digits roll smoothly into place rather than just fading in, giving a premium, mechanical feel.
- 👀 Scroll-Triggered: The animation waits until the component enters the user's viewport, ensuring they never miss the action.
- 💯 Decimal Precision: Automatically handles fractions! Whether it's 100 or 9183.45, the counter mathematically calculates the correct rolling columns.
- 🔤 Custom Prefixes & Suffixes: Easily add currency symbols ($, £, €) or metric markers (K, M, %) with their own independent color controls.
- ⏱️ Advanced Timing: Control the exact speed (duration) of the roll and add a delay before the animation starts.
- 🎨 Full Typography Control: Fully integrated with Framer's font system. Choose any font family, adjust the size, and pick the perfect text color directly from the sidebar.
monirul polash
