---
title: "Counter Pro — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aviral Lakhanpaul · Interactive. Counter Pro elevates how you display numbers."
canonical: "https://framer.elliotli.dev/component/counter-pro"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Counter Pro

# Counter Pro

Advanced animated number counter

[View on Framer](https://framer.com/marketplace/components/counter-pro/?via=elliot-li)

![Counter Pro preview image 1](https://framer.elliotli.dev/og/component/counter-pro/88347c117382127b/1600x1200.jpg)

## Summary

Counter Pro elevates how you display numbers.

## Description

**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.**

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-elb6id2f-dUqiK8Zji88Aztk4boK9TMtjHQqwPj)](https://polar.sh)

## Rank history [How rankings work →](/terms#rankings)

-   All · #7673

## Details

- **Author**: Aviral Lakhanpaul
- **Price**: $9.00
- **Published**: 2025-11-25
- **Updated**: 2026-10-28
- **Added**: 2025-11-19
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase