Formatted Counter: Free Data Component by Rain Ruan

An animated number counter that supports thousand separators (commas), decimal precision, and loop animations. Finally, a ticker that formats your data correctly.

While most counters display raw numbers (e.g., 10000), this component automatically formats them with thousand separators (e.g., 10,000), making it perfect for financial dashboards, statistics, and analytics sections.

Designed for high-end production sites, it includes built-in tabular-nums support to ensure the text width remains stable during animation—no more jittering layouts.

Key Features:

Smart Formatting: Automatically adds commas as thousand separators (e.g., 1,234,567).
Decimal Control: Precise control over decimal places (0 to 4 digits).
Stable Animation: Uses tabular-nums font variant to prevent character width jitter during counting.
Scroll Triggers: Options to auto-start when in view, loop animations, or reset when re-entering the viewport.
Custom Easing: Choose from Linear, Ease, Circ, and Back easing effects to match your brand's motion feel.
Canvas Optimized: Shows the final End Value while editing in Framer, so you always know what your design looks like (no more waiting for animation in the editor).