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
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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
120 - colorstring
Text color
Default
"#171717" - fontWeightnumber
CSS font-weight
Default
700 - speednumber
Multiplier for animation speed
Default
1 - classNamestring
Optional className passed to the outer text span