# Menu Pick
URL: https://remocn.dev/docs/ui-blocks/menu-pick

A game-style menu lists options, a red selection bar hops between rows, blinks, and settles on the chosen one.

- Install: `npx shadcn@latest add @remocn/menu-pick`
- Vibe: clean
- Natural length: 71f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/menu-pick
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MenuPick } from "@/components/remocn/menu-pick";

const MenuPickScene = () => (
  <MenuPick
    prompt="Choose your launch"
    options={["Keyframe every beat", "Wait on an agency", "Install the scenes"]}
    pick={2}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="MenuPick"
    component={MenuPickScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A panel appears with a `prompt` and a list of `options`. A selection bar hops between rows, confirms with a quick blink on the `pick` row, and the other rows dim. Pass your own `prompt`, `options` and a zero-based `pick`; it ships light and dark through `theme`. Use `speed` to slow or quicken the hops.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `prompt` | `string` | `"Choose your launch"` | Heading shown at the top of the menu. |
| `options` | `string[]` | — | Menu rows. Each is one line of text. |
| `pick` | `number` | `2` | Zero-based index of the row that gets selected. |
| `accent` | `string` | `"#E60012"` | Color of the selection bar. |
| `background` | `string` | — | Solid background. Use 'transparent' to drop the ground. |
| `speed` | `number` | `1` | Playback speed multiplier for the hops and blinks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A choose-your-path beat where the answer is obviously the last option, such as three ways to ship a launch.
- A funny or punchy comparison where the cursor hesitates between rows before picking one.
- A retro console-menu feel with a Back and Select hint in the footer.

## Don't use when
- You want a real dropdown opening from a button — use `dropdown-menu`.
- The menu is a searchable command palette — use `command-menu`.
- You only need a segmented switch between views — use `toggle-group`.