---
title: "SmoothCustomOdometer — Free Framer component · Best of Framer"
description: "Free Framer component · by Konstantin Nikolaev · Interactive. Mechanical odometer counter for Framer"
canonical: "https://framer.elliotli.dev/component/smoothcustomodometer"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/SmoothCustomOdometer

# SmoothCustomOdometer

Mechanical odometer counter for Framer

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

![SmoothCustomOdometer preview image 1](https://framer.elliotli.dev/og/component/smoothcustomodometer/602e5f47d9ab5ba9/1600x1200.jpg)

## Summary

Mechanical odometer counter for Framer

## Description

**Detail Page**

## Odometer Counter

A mechanical number counter that feels like a real rolling digit display. Numbers scroll through their slots digit by digit, new columns appear already in motion, and the entire sequence follows physical logic — the ones place spins fastest, the thousands place slowest.

### Animation

The counter animates from any starting number to a target number. Each digit has its own strip of random intermediates that scroll through before the final number locks in — exactly like a mechanical odometer or slot machine.

**Gear Effect** — The core of the component. The rightmost digit (ones place) receives the most random slots and therefore spins the longest. Each digit further left receives exponentially fewer slots, controlled by the **Gear Decay** factor. At a decay of 2.5, the slot count roughly halves per position — the thousands place barely moves while the ones place runs through every slot.

**Slot Reveal Delay** — When the target number has more digits than the starting number (e.g. 0 → 10,000), new columns appear sequentially from inside out. Each new column appears already in motion — the strip starts rolling just before the column reveals, so no digit ever fades in statically.

**Direction** — Slots can roll bottom to top (↑ Up) or top to bottom (↓ Down).

### Numbers & Format

-   **From / To** — Any start and target value. Negative numbers are automatically prefixed with a minus sign.
    
-   **Thousand Separator** — Toggle on or off. Choose between dot ., comma ,, apostrophe ', or thin space. The separator only appears on numbers with four or more digits.
    
-   **Prefix** — Text or symbol before the number, e.g. €, $, ~.
    
-   **Suffix** — Text or symbol after the number, e.g. +, %, k, ×.
    

When new digit columns appear, the prefix shifts position automatically — it always stays flush against the first visible digit.

### Colors

Every color value is independently configurable:

-   **Digit Color** — Color of all animating digits
    
-   **Prefix Color** — Custom color or inherit from digit color
    
-   **Suffix Color** — Custom color or inherit from digit color
    
-   **Separator Color** — Custom color for the thousand separator
    

### Typography

-   **Font Family** — Any typeface, compatible with all fonts loaded in Framer
    
-   **Font Size** — 10 px to 400 px
    
-   **Font Weight** — 100 to 900
    
-   **Line Height** — Controls the cell height of each digit strip. Decrease for condensed typefaces, increase for large display fonts.
    

### Timing & Easing

-   **Duration** — Total animation duration (0.2s – 6s)
    
-   **Stagger** — Delay between individual digit columns (0s – 2s). At higher values, left digits start noticeably later than right digits.
    
-   **Start Delay** — How long the number holds still after the trigger fires before the animation begins
    
-   **Slot Reveal Delay** — Time between each new digit column appearing on growing numbers
    
-   **Random Slots** — Number of intermediate digits scrolled through before landing on the target (applies to the rightmost digit — Gear Effect scales the rest)
    
-   **Easing** — Three options: _Smooth_ (soft, no overshoot), _Mechanical_ (sharp entry, soft landing), _Linear_ (constant speed throughout)
    

### Trigger

-   **On Appear** — Animation starts immediately when the component mounts
    
-   **Layer in View** — Animation fires once when the component enters the visible viewport
    

On the Framer canvas the component always shows the start state — animation only runs in Preview and on the live site.

### Digit Gap

Spacing between individual digit columns in pixels. Negative values are supported for a tight, editorial number layout.

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

-   All · #4548

## Details

- **Author**: Konstantin Nikolaev
- **Published**: 2026-04-14
- **Updated**: 2026-04-14
- **Added**: 2026-04-07
- **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