Caustics
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 preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/causticsManual — install dependencies, then copy the source
npm install oglProps
| 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. | |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.