---
title: "Counter Number"
canonical_url: "https://framerhub.io/components/counter-number"
last_updated: "2026-06-15T14:46:29.248Z"
---

## Counter Number

An animated counter component perfect for displaying statistics, milestones, or pricing. It smoothly counts up from a start value to your target with customizable duration and easing.

## Features

**Precise Formatting**
Handle currency, percentages, and large numbers easily. Add custom prefixes (e.g., "$"), suffixes (e.g., "M+"), and control decimal places and thousands separators.

**Animation Control**
Choose linear or eased animations, control duration, and toggle auto-start.

**Responsive Typography**
Fully customizable font styles that adapt to your layout.

![Counter Number Preview](/framerhub/img/components/control/counter-number.jpg)

## Use Cases

**Statistics Dashboard** — Display growing user metrics or revenue numbers that catch the eye.

**Milestones**  — Showcase company achievements or project stats on landing pages.

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Counter Number in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Counter Settings**

- **Start**: The initial number you want to start counting from.
- **End**: The final target number to display.
- **Animation**: Choose when the animation triggers—either when the layer is in view (✨ Layer in View) or immediately when it appears (⚡ On Appear).
- **Duration**: How many seconds the animation should last (0.1s to 10s).

**Formatting & Style**

- **Decimals**: Quickly select 0-3 decimal places using the preset toggle.
- **Commas**: Enable or disable the thousands separator.
- **Color**: Set the exact color for your numbers and text.
- **Prefix / Suffix**: Add symbols like "$" or text like "kg" or "+".
- **Decoration**: Add an underline or strikethrough for specialized styles.

### Quick Tips

**Best Performance** — Uncheck "Auto Start" and use "View Trigger" to only animate when the user scrolls the component into view. This saves resources when the component is off-screen.

**Visual Hierarchy** — Use a large font size and bold weight to make key metrics stand out against your page content.

**Contextual Data** — Use the Prefix and Suffix fields to give context to your numbers without needing extra text layers.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

It's a simple yet essential element for any data-driven design, adding life and movement to static numbers with minimal setup.

---