Option Wheel

Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection.

Default

Scroll, drag, click an option or use the arrow keys. Every prop is wired to the controls underneath.

Text

Active

Side

Font Size3rem

Spacing1.4

Curve1

Tilt6deg

Blur2px

Fade0.25

Smoothing200ms

Inset80px

Sound Volume0.5

LoopDraggableSound

Prop	Type	Default	Description
`items`	`string[]`	`[...]`	Labels rendered as the wheel options.
`defaultSelected`	`number`	`3`	Index of the option selected on mount.
`textColor`	`string`	`"#a6a6a6"`	Resting color of the option labels.
`activeColor`	`string`	`"#ffffff"`	Color an option blends toward as it reaches the middle of the wheel.
`side`	`"left" \| "right"`	`"left"`	Edge of the container the wheel curves around.
`fontSize`	`number`	`3`	Font size of the option labels in rem.
`spacing`	`number`	`1.4`	Vertical distance between options as a multiple of the font size.
`curve`	`number`	`1`	Depth of the circular curve; 0 flattens the wheel into a straight list.
`tilt`	`number`	`6`	Angle in degrees between neighboring options; higher values curl the wheel tighter.
`blur`	`number`	`2`	Blur in pixels added per step away from the middle.
`fade`	`number`	`0.25`	Opacity lost per step away from the middle.
`minOpacity`	`number`	`0.05`	Opacity floor for the furthest options.
`smoothing`	`number`	`200`	Easing time constant in milliseconds; higher values feel heavier.
`inset`	`number`	`80`	Padding in pixels between the anchored edge and the centered option.
`loop`	`boolean`	`false`	Wrap around infinitely instead of stopping at the first and last option.
`draggable`	`boolean`	`true`	Allow dragging the wheel with a pointer, in addition to scroll and arrow keys.
`soundUrl`	`string`	`""`	URL of a short tick sound played when the selection changes; empty disables it.
`soundVolume`	`number`	`0.5`	Playback volume of the tick sound.

Prop	Type	Default	Description
`change`	`(index: number, item: string) => void`	-	Emitted whenever the wheel settles on a new option.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`ArrowUp` + `ArrowLeft`	Selects the previous option.
`ArrowDown` + `ArrowRight`	Selects the next option.

The wheel is a listbox and each label is an option with aria-selected.
The wheel captures the mouse wheel while the pointer is over it, so the page does not scroll there.