Caustics Field — React Animated Background

Sunlit pool-floor caustics dancing over deep water — a jittered-grid Voronoi net of focused light in three stacked octaves, with drifting silt motes.

View source

Starting live preview

Usage

import { CausticsField, CAUSTICS_FIELD_PRESETS } from "@/components/CausticsField";

export function PoolHero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <CausticsField {...CAUSTICS_FIELD_PRESETS.lagoon}
        {...{
          interactive: true,
          speed: 1,
          intensity: 1,
          scale: 1.4,
          from: "#03161d",
          to: "#0b5568",
          accent: "#bfeef7"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Light on water</h1>
      </div>
    </section>
  );
}

Implementation notes & API

Purpose: underwater light-net backdrop (F1/F2 edge distance Voronoi with orbiting cell seeds); three octaves at different scales keep the ripples from repeating. Mount: full-bleed layer behind content; the depth-graded water gradient is opaque. Props: speed, intensity, scale (cell size), sharpness (net focus), from/to/accent (deep water, mid water, light). Pointer: interactive is off by default; set it to shift the sun's beam center across the pool floor. Guardrails: WebGPU required with fallback prop; reduced motion freezes the net; pairs best with light type.

Property	Type	Notes / default
`interactive`	`boolean`	false in the library; enabled in this preview
`fallback`	`ReactNode`	Shown when the renderer is unavailable
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT