Orbit
A cosmic orbital loader: electrons ride tilted elliptical rings around a white-hot, breathing nucleus, each on a seeded phase with a Keplerian-ish period and a soft comet trail. Counter-rotating planes cross like an atom; one cool accent by default, multicolor via colors. Parks at a lit static frame under reduced motion.
csspro
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/orbitProps
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 120 | Overall diameter in px. |
| rings | number | 3 | Number of orbital rings (electrons). Clamped to 1–6. |
| speed | number | 1 | Orbit speed multiplier. 1 = default, 2 = twice as fast. |
| intensity | number | 1 | Glow / bloom strength for the nucleus and electrons. 1 = default; lower is subtler, higher is more radiant. Clamped to 0–2. |
| colors | string[] | ["#6ea8ff"] | Accent colors cycled across the orbiting bodies. A single color reads as one elegant cool accent; pass several for a multicolor cosmic system. The nucleus is always a white-hot core blooming into the first color. |
| paused | boolean | false | Freeze the system at a parked resting frame (bodies parked, core lit). |
| label | string | "Loading" | Accessible label announced to screen readers. |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.