Smooth Digit Counter is a premium animated number counter for Framer that rolls each digit independently with a smooth, satisfying slot-machine motion.

How It Works

When triggered, each digit rolls vertically through a column of numbers to land on the target value. The animation is driven by Framer Motion and uses a custom easing curve for a natural, polished feel. Works seamlessly on every browser.

Features

• Smooth per-digit animation — each digit rolls independently, creating a fluid cascading effect
• Color text support — apply solid, linear, radial, or conic gradients across the full number
• Flexible typography — full font picker with weight, size, line height, letter spacing, and text alignment
• Prefix & Suffix — add currency symbols, units, or any custom text (e.g. $, +, %, k)
• Comma separator — toggle thousands separator on or off
• Decimal support — auto-detected from the From/To values (e.g. 1234.56)
• Negative number support — allow or hide negative values
• Trigger control — animate on scroll into view or immediately on load
• Replay on re-entry — optionally replay the animation every time the component enters the viewport
• Global or per-digit duration — set one duration for all digits, or fine-tune each digit individually
• Stagger — offset each digit's start time for a wave-like cascade effect
• Per-digit direction — override the roll direction (Auto / Up / Down) for each digit independently
• Digit Gap — control the spacing between digits
• HTML tag selection — render as <p>, <h1> through <h6> for correct semantic markup
• Overflow control — clip, visible, hidden, or scroll

Use Cases

• Hero section statistics (10,000+ users, $4.2M raised)
• Dashboard KPI cards
• Pricing displays
• Progress indicators
• E-commerce metrics (revenue, sales count, ratings)
• Portfolio or agency credential numbers

Installation Instructions

After completing your purchase, you will receive the Component Link via email.

1. Copy the Component Link from your email

2. Open your Framer project

3. Click on the canvas and paste the Component Link

4. The component will appear on your canvas and in your Assets panel, ready to use

Refund Policy

Due to the digital nature of this product, all sales are final. Refunds are not available once the component has been purchased and delivered. If you have any questions about the component before purchasing, feel free to reach out on X at https://x.com/AndreasLiou21