Counter Pro

Counter Pro

About Counter Pro

Counter Pro elevates how you display numbers.

An 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

Counter Pro Component Preview

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.