About SmoothCustomOdometer

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.