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-rollUsage
// 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 |