Orbital Command Ring
A futuristic radial page navigation menu summoned by dragging with elastic joystick physics, custom target paths, and cinematic flashes.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
titleOrbital Command Ring
Ambient background watermark text.
eyebrowHold & drag anywhere to summon
Action instruction hint displayed under the watermark.
bg#050505
Hex backdrop background color of the widget viewport.
borderColorrgba(255,255,255,0.05)
Outer frame CSS border color.
joystickColor#ffffff
Default color of the central indicator node.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| options | CommandItem[] | DEFAULT_COMMANDS | Array of options mapping radial menu nodes. Link custom pages by setting path properties: e.g. path: '/components/thread-route-board'. |
| onNavigate | (path: string) => void | undefined | Optional custom router navigation callback: e.g. (path) => router.push(path). Defers navigation until execution animations play. |
| title | string | "Orbital Command Ring" | Ambient background watermark text. |
| eyebrow | string | "Hold & drag anywhere to summon" | Action instruction hint displayed under the watermark. |
| bg | string | "#050505" | Hex backdrop background color of the widget viewport. |
| borderColor | string | "rgba(255,255,255,0.05)" | Outer frame CSS border color. |
| joystickColor | string | "#ffffff" | Default color of the central indicator node. |