Spinning Text Wheel
A 3D drum of options that spins down and settles on the first line, like a slot reel picking a winner.
text3dloop
Usage
Installation
npx shadcn@latest add https://remotionui.dev/r/spinning-text-wheel.jsonCopies the composition to components/remotion/spinning-text-wheel.tsx and installs remotion, @remotion/google-fonts, zod if missing. No UI library required.
Props
| Prop | Default | Description |
|---|---|---|
| itemsstring | "Monday\nTuesday\n…" | Newline-separated options. The first one wins. |
| wheelWidthnumber | 560 | Drum width in design pixels. |
| wheelHeightnumber | 280 | Drum height in design pixels. |
| fontSizenumber | 76 | Type size of each option. |
| colorstring | "#101828" | Colour of the settled option. |
| idleOpacitynumber | 0.28 | Opacity of the options passing by. |
| spinFramesnumber | 90 | How long the spin takes. |
| holdFramesnumber | 30 | How long the winner holds at the end. |
| bgColorstring | "#ffffff" | Background fill. |
| designWidthnumber | 1080 | Reference width the layout scales from. |