# Terminator — WebGL Background for React

> A planet's limb seen from orbit: analytic sphere with fbm continents, ocean sun-glint, drifting clouds, warm night-side city lights and a Rayleigh atmosphere rim under a starfield. The sun slowly orbits and swings with the cursor; the camera rises in on load; clicks flare stacking auroras. Original OGL shader, soft tone-mapped, offscreen-paused, reduced-motion-safe.

- Page: https://crucibleui.com/components/backgrounds/terminator
- Category: [backgrounds](https://crucibleui.com/backgrounds)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: ogl
- npm dependencies: ogl

## Install

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

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

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

Backgrounds render `absolute inset-0 -z-10`. Their parent must be a stacking context — wrap in `relative isolate` and put your content in a `relative z-10` child, or the background disappears behind an opaque ancestor.

## Props (`TerminatorProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `speed?` | `number` | `1` | Animation speed multiplier for the sun's orbit, planet spin and cloud drift. 1 = default, 0 = still (pointer and clicks still respond). |
| `sunAngle?` | `number` | `100` | Resting sun azimuth in degrees. 0 = sun behind the viewer (full day), 90 = sun hard right (terminator through mid-disk), 180 = sun behind the planet (night with a lit rim). The sun slowly orbits ±22° around this. |
| `cityLights?` | `number` | `1` | City-light brightness on the night side, 0–2. 0 hides them. |
| `atmosphere?` | `string` | `a clear sky blue-cyan` | Atmosphere tint — the Rayleigh rim glow and day-side haze. Any hex string. |
| `clouds?` | `number` | `0.6` | Cloud coverage, 0–1. 0 = clear skies. |
| `tone?` | `"dark" \| "light"` | `"dark"` | Backdrop tone. `"dark"` = deep starfield; `"light"` = pale high-altitude sky with the atmosphere as a tinted haze (for light pages). |
| `interactive?` | `boolean` | `true` | Pointer swings the sun (eased, released on leave) and clicks flare an aurora. |
| `paused?` | `boolean` | — | Freeze the scene at its current frame. |
| `ref?` | `React.Ref<TerminatorHandle>` | — | Imperative handle — see {@link TerminatorHandle}. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"div">, "children">`.

## Usage example

`DemoScene` is a site-only preview harness, not part of the component — replace it with your own layout.

```tsx
import { DemoScene } from "@/components/registry/demo-scene";
import { Terminator } from "@/components/crucible/terminator";

export default function TerminatorDemo() {
  return (
    <DemoScene
      background={<Terminator />}
      headline="Where daylight ends"
      subhead="Move to swing the sun."
    />
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.