Menu Pick

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

Installation

$ pnpm dlx 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.

Props9

Prop	Type	Default
prompt	string"Choose your launch" Heading shown at the top of the menu.
options	string[]— Menu rows. Each is one line of text.
pick	number2 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	number1 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.

promptstring
Heading shown at the top of the menu.
Default"Choose your launch"
optionsstring[]
Menu rows. Each is one line of text.
picknumber
Zero-based index of the row that gets selected.
Default2
accentstring
Color of the selection bar.
Default"#E60012"
backgroundstring
Solid background. Use 'transparent' to drop the ground.
speednumber
Playback speed multiplier for the hops and blinks.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.