Number Wheel · remocn

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

// 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}
  />
);

Props

Prop	Type	Default	Description
`from`	`number`	`0`	Starting value. Direction is inferred from whether to is greater or less than from.
`to`	`number`	`24813`	Target value the wheel settles on. If greater than from, counts up; if less, counts down.
`fontSize`	`number`	`120`	Font size in pixels
`color`	`string`	`"#171717"`	Text color
`speed`	`number`	`1`	Multiplier for animation speed

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:

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:

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>