Slot Reel

Change the value and it spins, slows, overshoots a hair and settles. For picking a winner, random suggestions, prize draws and 'spin for a name'.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add slot-reel

Example

import { SlotReel } from "@/components/galactrex/slot-reel";

<SlotReel items={names} value={winner} onLand={celebrate} />

Installs to components/galactrex/slot-reel.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`items`	`string[]`	—	What it can land on.
`value`	`string`	—	Where it lands; change it to spin.
`spins`	`number`	`3`	Full turns before landing.
`duration`	`number`	`1.6`	Seconds per spin.
`onLand`	`(value: string) => void`	—	Called when it stops.
`className`	`string`	—	Extra classes for the outer element.