Slot Machine Roll

Vertical reel scrolls each character from an old value to a new value

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

PropTypeDefaultDescription
from
string"$99"Starting value shown before the reel rolls
to
string"$199"Target value the reel settles on
fontSize
number120Font size in pixels. Used to compute reel travel distance.
color
string"#171717"Text color
fontWeight
number700CSS font-weight
speed
number1Multiplier for animation speed
className
stringOptional className passed to the outer text span