Odometer

The Odometer component splits a numerical value into discrete mathematical places (ones, tens, hundreds) and uses Framer Motion's spring physics to slide an internal column of digits (0-9) vertically until the target digit is in view. It smoothly animates up or down whenever the value changes. Now updated with 4 physics variants, custom separators, and prefix/suffix support.

Live Preview

Installation

How it works

The component formats the incoming value into a string, then iterates over each character. If a character is a separator (like , or .), it renders it statically. If it's a digit, it renders a <Digit> component representing that mathematical place (e.g., tens, hundreds).

Each <Digit> mounts an invisible column of numbers from 0-9. Using the formula `y: -(digit * 10)%`, Framer Motion slides the column up or down so the target digit aligns within the visible 1em bounding box.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { Odometer } from "@/components/creative/odometer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { Odometer } from "@/components/creative/odometer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <Odometer
        value{10}
        format{true}
        separator="example"
      />
    </div>
  );
}