# Singularity — WebGL Background for React

> A gravitationally-lensed black hole: a per-pixel Schwarzschild geodesic ray-march bends light around the event horizon, wrapping a white-hot accretion disk over and under the black sphere into the iconic lensed halo, with a crisp photon ring, Doppler-beamed asymmetry, and a lensed starfield. Original OGL fragment shader, filmic-toned, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe; a ghost pointer keeps it moving when untouched.

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

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

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

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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors?` | `[string, string, string]` | `a heat palette (near-white → amber → deep-orange). Pass a cold set (e.g. `["#eaf3ff", "#9fc2ff", "#2b4c8c"]`) for a blue-white hole` | Accretion-disk tones, hot → cool: `[inner, mid, outer]`. `inner` is the white-hot inner edge, `mid` the amber body, `outer` the deep cooling rim. |
| `speed?` | `number` | `1` | Disk-rotation speed multiplier. 1 = default, 2 = twice as fast. |
| `intensity?` | `number` | `1` | Overall luminosity of the disk, photon ring, and bloom, 0–2. 1 = default; lower banks the plasma, higher blazes. |
| `tilt?` | `number` | `0.28` | Disk tilt toward the viewer, 0–1. 0 is nearly edge-on (the strongest gravitational-lensing wrap, most cinematic); 1 tips it toward top-down. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost pointer orbits the camera 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 { Singularity } from "@/components/crucible/singularity";
import { DemoScene } from "@/components/registry/demo-scene";

export default function SingularityDemo() {
  return (
    <DemoScene
      background={<Singularity />}
      headline="Bend the light"
      subhead="A gravitationally-lensed black hole, its accretion disk wrapping over the event horizon. Move your cursor to orbit."
    />
  );
}
```

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