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

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

Props7

PropTypeDefault
from
string"$99"

Starting value shown before the reel rolls

to
string"$199"

Target value the reel settles on

fontSize
number120

Font size in pixels. Used to compute reel travel distance.

color
string"#171717"

Text color

fontWeight
number700

CSS font-weight

speed
number1

Multiplier for animation speed

className
string—

Optional className passed to the outer text span

  • fromstring

    Starting value shown before the reel rolls

    Default"$99"

  • tostring

    Target value the reel settles on

    Default"$199"

  • fontSizenumber

    Font size in pixels. Used to compute reel travel distance.

    Default120

  • colorstring

    Text color

    Default"#171717"

  • fontWeightnumber

    CSS font-weight

    Default700

  • speednumber

    Multiplier for animation speed

    Default1

  • classNamestring

    Optional className passed to the outer text span