Number Wheel

Odometer that rolls a number from one value to another with direction inferred from the values

Installation

$ pnpm dlx shadcn@latest add @remocn/number-wheel

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NumberWheel } from "@/components/remocn/number-wheel";
 
const NumberWheelScene = () => (
  <NumberWheel from={0} to={24813} fontSize={120} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="NumberWheel"
    component={NumberWheelScene}
    durationInFrames={112}
    fps={30}
    width={1280}
    height={720}
  />
);

Props5

Prop	Type	Default
from	number0 Starting value. Direction is inferred from whether to is greater or less than from.
to	number24813 Target value the wheel settles on. If greater than from, counts up; if less, counts down.
fontSize	number120 Font size in pixels
color	string"#171717" Text color
speed	number1 Multiplier for animation speed

fromnumber
Starting value. Direction is inferred from whether to is greater or less than from.
Default0
tonumber
Target value the wheel settles on. If greater than from, counts up; if less, counts down.
Default24813
fontSizenumber
Font size in pixels
Default120
colorstring
Text color
Default"#171717"
speednumber
Multiplier for animation speed
Default1

Direction is determined by the relationship between from and to — no separate direction prop is needed. All values must be integers and non-negative.

Count Up

Rolls upward from 0 to 24813:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { NumberWheel } from "@/components/remocn/number-wheel";
 
<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <NumberWheel from={0} to={24813} fontSize={120} />
</Backdrop>

Count Down

Rolls downward from 24813 to 0:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { NumberWheel } from "@/components/remocn/number-wheel";
 
<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <NumberWheel from={24813} to={0} fontSize={120} />
</Backdrop>