# Nebula — WebGL Background for React

> A deep-space interstellar gas cloud: domain-warped fbm shader billowing luminous folds through a cool indigo-violet-into-teal gradient, with dark dust lanes, a twinkling starfield, and a soft depth glow. Original OGL fragment shader, hard-dithered, DPR-clamped, offscreen-paused, reduced-motion-safe; a ghost pointer keeps it moving when untouched.

- Page: https://crucibleui.com/components/backgrounds/nebula
- 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/nebula
```

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

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

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 (`NebulaProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors?` | `[string, string, string, string]` | — | Four tones: `[void, violet, teal, core]`. `void` is the deep-space base the gas floats on (near-black indigo), `violet` and `teal` are the two hue families the gas drifts between, `core` is the whisper of magenta at the brightest emission cores. Any hex string. |
| `speed?` | `number` | `1` | Drift speed multiplier. 1 = default (very slow), 2 = twice as fast. |
| `intensity?` | `number` | `1` | Emission brightness / bloom of the gas, 0–2. 1 = default. Higher lifts the luminous cores; lower reads as thinner, more distant gas. |
| `dust?` | `number` | `1` | Strength of the dark dust lanes threading through the gas, 0–1. 0 removes the absorption filaments entirely; 1 = full contrast structure. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost pointer leans the gas on a slow drift so it never looks dead in thumbnails and heroes; the real pointer takes over instantly. Never runs under reduced motion. |
| `paused?` | `boolean` | — | Freeze the animation at its current frame. |

Also accepts: `React.ComponentPropsWithoutRef<"div">`.

## Usage example

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

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

export default function NebulaDemo() {
  return (
    <DemoScene
      background={<Nebula />}
      headline="Space to breathe"
      subhead="A slow interstellar gas cloud drifting behind your content. Move your cursor to lean it."
    />
  );
}
```

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