# Slot Machine Roll
URL: https://remocn.dev/docs/typography/slot-machine-roll

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

- Install: `npx shadcn@latest add @remocn/slot-machine-roll`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

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

## 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 |

## Use when
- Revealing a price change, plan upgrade, or before/after value where the string includes symbols (`$`, `%`, `×`).
- You want a playful, casino-reel feel on a pricing or comparison slide.
- The values are short (1–6 characters) and the character-by-character drum motion will be legible.

## Don't use when
- The value is a large pure integer like `1,240,000` — use `rolling-number` which animates each decimal place independently and reads as a serious data metric.
- The text is more than ~6 characters — long strings become hard to read while the reel spins; use `staggered-fade-up` to reveal a longer phrase.
- The brand tone is formal or data-driven — the slot machine metaphor is inherently playful; use `rolling-number` for a composed odometer feel.