Skip to content

component

Smooth Digit Counter

By Andreas Vasiliou

Details

Summary

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

Description

Smooth Digit Counter 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. 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 , through 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 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

Introduction

The smoothest counter for Framer.

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600163238/148/228/309/79/15
  • All · #2174