# Caustics — WebGL Background for React

> The rippling light-caustic net on the floor of a sunlit pool: several octaves of drifting ridged noise thin into bright veins, and two decorrelated fields multiply so the web grows real caustic crossing-nodes, all undulating under a lapping surface ripple with a depth gradient and faint god-ray shafts. Cool aqua by default; slow, calm, premium. Original OGL fragment shader, tone-mapped, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe; the light idles on its own when untouched.

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

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

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

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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors?` | `[string, string, string]` | `a cool aqua palette. Pass a warm set (e.g. `["#2a1204", "#e08a2c", "#fff0d6"]`) for a sunlit-amber pool` | Three tones, deep → bright: `[deep, water, light]`. `deep` is the shadowed pool floor the net sits on, `water` the mid aqua the caustic ridges are tinted with, `light` the near-white crest at the brightest crossings and god-ray shafts. |
| `speed?` | `number` | `1` | Drift speed multiplier. 1 = default (slow, calm), 2 = twice as fast. |
| `intensity?` | `number` | `1` | Brightness / bloom of the caustic web and god-ray tint, 0–2. 1 = default; lower reads as deep, dim water, higher blazes like shallow noon sun. |
| `ripple?` | `number` | `1` | Strength of the slow surface ripple that undulates the whole net, 0–1. 0 = a still, glassy floor pattern; 1 = full lapping distortion. |
| `paused?` | `boolean` | — | Freeze the animation at its current frame. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no pointer present, a seeded ghost drifts slowly across the field and leans the light net, so thumbnails and heroes never look still; a real pointer takes over instantly. Never runs under reduced motion. |

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 { Caustics } from "@/components/crucible/caustics";
import { DemoScene } from "@/components/registry/demo-scene";

export default function CausticsDemo() {
  return (
    <DemoScene
      background={<Caustics />}
      headline="Light on water"
      subhead="A slow rippling caustic net across the pool floor. Move your cursor to lean the light."
    />
  );
}
```

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