127 Components
Rotary Spring Dial
InputsSynthesizer-inspired tactile rotary knob with a 270-degree spring-damped rotor, vertical drag scrubbing, and keyboard arrow control.
Damping Ratio
65%
Drag vertically or use ↑/↓ keys
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/rotary-spring-dial.json"
Props
TypeScript props supported by <RotarySpringDial />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Damping Ratio" | Parameter name displayed above the rotary dial. |
| defaultValue | number | 65 | Initial numeric value between min and max. |
| min | number | 0 | Minimum dial value corresponding to -135 degrees. |
| max | number | 100 | Maximum dial value corresponding to +135 degrees. |
| step | number | 5 | Step increment per detent tick. |
| unit | string | "%" | Unit suffix appended to the digital readout. |
| stiffness | number | — | Spring stiffness for dial rotation snapping |
| damping | number | — | Spring damping coefficient |
| onChange | (val: number) => void | — | Callback fired when dial angle value changes |
Key Features
- Maps numeric values across a -135° to +135° (270° total) rotary arc driven by Hooke's Law angular springs.
- Precision vertical pointer-capture drag scrubbing standard in pro audio and 3D software.
- Full keyboard arrow-key and Home/End accessibility.
Keyboard & Accessibility
- Implements role='slider' with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext.
- Supports ArrowUp/ArrowRight to increment, ArrowDown/ArrowLeft to decrement, and Home/End keys.
- Rotates instantaneously without spring overshoot when prefers-reduced-motion is enabled.