Slot Machine Roll

A typography primitive that animates changing values (prices, counters, statuses) as a vertical reel. Each character column rolls independently with a staggered spring, giving a slot-machine feel.

Installation

$ pnpm dlx shadcn@latest add @remocn/slot-machine-roll

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { SlotMachineRoll } from "@/components/remocn/slot-machine-roll";

const SlotMachineRollScene = () => (
  <SlotMachineRoll from="$99" to="$199" fontSize={120} />
);

export const RemotionRoot = () => (
  <Composition
    id="SlotMachineRoll"
    component={SlotMachineRollScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`from`	`string`	`"$99"`	Starting value shown before the reel rolls.
`to`	`string`	`"$199"`	Target value the reel settles on.
`fontSize`	`number`	`120`	Font size in pixels. Used to compute reel travel distance.
`color`	`string`	`"#171717"`	Text color.
`fontWeight`	`number`	`700`	CSS font-weight.
`speed`	`number`	`1`	Multiplier for animation speed.
`className`	`string`	—	Optional className passed to the outer text span.

Notes

Right-aligned by design

from and to are left-padded with spaces to the same length so digits align on the right. This matches how prices and counters read.

Monospaced digits recommended

Each column is a fixed width (0.7em). If you use a proportional font, wide characters like W may get clipped. Use a mono font or characters of similar width.