# Orbit — Animated Loader for React

> 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.

- Page: https://crucibleui.com/components/loaders/orbit
- Category: [loaders](https://crucibleui.com/components/loaders)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: css

## Install

```bash
npx shadcn@latest add @crucible/orbit
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/orbit`.

## Props (`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: `React.ComponentPropsWithoutRef<"div">`.

## Usage example

```tsx
import { Orbit } from "@/components/crucible/orbit";

export default function OrbitDemo() {
  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(110,168,255,0.06),transparent_70%)]"
      />
      <div className="relative z-10 flex flex-col items-center gap-8">
        <Orbit size={140} />
        <p className="text-sm tracking-wide text-neutral-500">Loading</p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.