# Slot Reel

> Spins through a list and lands on the winner.

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'.

- Family: Originals
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/slot-reel/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add slot-reel
```

It installs to `components/galactrex/slot-reel.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

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

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

## Props

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

## Variants

- **Winner.** Names from a giveaway.
- **Triple.** Three reels with staggered durations.

## Accessibility

- The landed value is announced once through a polite live region.

## Motion

- One transform on the strip with an overshooting ease.
- Reduced motion: lands at once.