Orbit Knob
Web (React)
A flickable rotary knob with a tracer tail in theme ink and a serif readout.
Drag up or down to turn it, flick to let it coast, or tap a point on the track to jump there. While it moves, a primary-coloured tail chases the head; arrow keys, Page Up/Down, Home and End work when focused.
38%Gain
Installation
CLI
npx @modus-ui/cli add orbit-knobManual
- Copy the code from the component tab.
- Create a file at
components/ui/orbit-knob.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | any | - | - |
| defaultValue | number | 38 | - |
| min | number | 0 | - |
| max | number | 100 | - |
| step | number | 1 | - |
| unit | string | "%" | - |
| label | string | "Gain" | - |
| accent | string | "hsl(var(--primary))" | - |
| ink | string | "hsl(var(--foreground))" | - |
| size | number | 250 | - |
| sweep | number | 270 | - |
| thickness | number | 3 | - |
| speed | number | 25 | - |
| tapBounce | number | 0.2 | - |
| flickBounce | number | 0.1 | - |
| momentum | number | 1 | - |
| cometReach | number | 180 | - |
| cometWidth | number | 12 | - |
| disabled | boolean | false | - |
| onChange | any | - | - |
| onChangeEnd | any | - | - |
Comments