Gimbal
A machined armillary instrument: nested brushed-metal rings with engraved scales pivot at mutually-prime rates under studio light. Drag to spin on detented bearings, click to align every ring. Offscreen-paused and reduced-motion-safe.
r3fpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/gimbalManual — install dependencies, then copy the source
npm install three @react-three/fiberProps
| Prop | Type | Default | Description |
|---|---|---|---|
| rings | number | 4 | Number of nested rings, 3–5. |
| speed | number | Drift-rate multiplier for the rings' slow, mutually-prime rotations. 1 = default, 0 holds the rings still (drag and observe still work). | |
| material | GimbalMaterial | Finish of the instrument: brushed "steel" (default, cool neutral), warm turned "brass", or dark "graphite" with light paint-filled engravings. | |
| engraving | boolean | true | Engraved tick scales on every ring and a degree band on the outer ring. |
| interactive | boolean | true. Programmatic observe() works either way | Drag to spin the instrument on its bearings, click to align the rings. |
| tone | "dark" | "light" | Studio backdrop: "dark" (default) or "light". | |
| paused | boolean | false | Freeze the instrument at a composed static pose. Also forced on when the user prefers reduced motion. |
| className | string | Extra classes for the wrapper. Positioned absolute inset-0 -z-10. | |
| ref | React.Ref<GimbalHandle> | Imperative handle — see {@link GimbalHandle}. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.