Counter Pro — Most advanced animated number counter

Counter Pro elevates how you display numbers.

Advanced animated counter that transitions from one value to another through smooth, slot-machine-style digit animations. It creates a fluid motion enhanced by motion-blur and glow effects for added visual flair.

Update v1.1 Changelog:

⚡Fixed the number not scaling issue when setting the font with 'rem' unit.

⚡Fixed the decimal numbers not moving in the slot-machine animation manner.

Demo

Features

• Smooth vertical sliding animations for each digit

• Optional motion blur for speed emphasis

• Optional glow effect for neon-style visuals

• Supports decimals, separators, prefix/suffix text, and negative values

• Consistent digit width using tabular number formatting

• Start on view or start immediately

• Fully customizable typography, colour, spacing, and timing

• Lightweight and GPU-accelerated for seamless playback

Customisations

• From / To Values

• Decimal Precision

• Thousands Separator

• Prefix / Suffix

• Negative Values

• Duration & Delay

• Trigger Behaviour: Start on view or start immediately

• Motion Blur

• Glow Effect

• Typography

• Text Color

• Spacing

Usage

1. Copy Counter Pro into your Framer project.

2. Place it on your canvas where you want the animation.

3. Adjust the properties in the right-hand property panel.

4. Done!

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your Framer project to import it.