Orrery
A machined dotted interactive globe: deterministic ice-white land dots on a matte graphite sphere with a whisper of rim atmosphere. Drag it with heavy desk-globe momentum and the idle spin clutches back in slowly; connection arcs launch in seeded bursts, travel with comet heads, and land with surface pulses. Camera-facing marker labels, hero-edge camera offset, one cool arc accent. Original OGL implementation — instanced point dots, DPR-clamped, offscreen-paused, full GL teardown, reduced-motion-safe.
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/orreryManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| arcs | OrreryArc[] | a built-in set of 12 intercontinental routes | Pool of routes the seeded scheduler launches arcs from, in bursts. |
| markers | OrreryMarker[] | [] | Pinned locations with optional camera-facing labels. |
| rotationSpeed | number | 1 | Idle rotation speed multiplier. 0 disables the idle spin. |
| tilt | number | 23 | Spin-axis tilt in degrees, like a desk globe on its stand. |
| momentum | number | 1 | Throw weight: scales the velocity carried after a drag release. Higher feels heavier — more carry from the same flick. |
| friction | number | 1 | How quickly a thrown spin bleeds off. Higher stops sooner; lower glides longer. The idle spin always re-engages via a slow clutch. |
| arcFrequency | number | 1 | Arc burst rate multiplier. 0 effectively disables new arcs. |
| arcAltitude | number | 1 | Arc apex height multiplier (scaled by route distance). |
| arcSpeed | number | 1 | Arc travel speed multiplier. |
| dotDensity | number | 1 | Surface dot density multiplier (≈11k samples at 1). Clamped 0.25–3. |
| oceanDots | number | 0.16 | Opacity of the faint ocean stipple, 0–1. 0 renders land only. |
| atmosphere | number | 1 | Atmosphere rim + halo intensity. 0 disables. |
| cameraDistance | number | 3.6 | Camera distance in globe radii — smaller fills the frame more (below ~2.8 the sphere overflows the canvas, useful for extreme crops). |
| cameraOffset | [number, number] | [0, 0] | Globe offset from frame center in globe radii, [x right, y up] — lets the globe sit half-cropped at a hero's edge. |
| colors | OrreryColors | matte graphite / ice white / cool blue accent | Palette overrides. |
| size | number | Square size in px. Omit to fill the parent (give the parent a size). | |
| dpr | number | 1.5 | devicePixelRatio ceiling; effective DPR is min(devicePixelRatio, dpr). |
| paused | boolean | false | Freeze all animation, holding the current frame. Drag still works. |
| label | string | Accessible alt text. When set, the component is exposed as role="img" with this label; otherwise it is aria-hidden decoration. | |
| seed | number | 7 | Seed for the deterministic dot dither and arc scheduler. |
| className | string | Extra classes for the wrapper. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.