PParable
All components

Caustics Background

Hero Backgrounds

A full-bleed underwater-caustics WebGL background (raw WebGL1, zero deps): layered domain-warp folds render rippling light that concentrates near the surface, with tint/background/intensity/speed props accepting any CSS color including var() tokens. ~30fps with DPR capped at 1.5, pauses off-screen and on hidden tabs, survives context loss, CSS-gradient fallback without WebGL. One static lit frame under prefers-reduced-motion.

Inspired by Extracted from the Fathom template — independently built, not affiliated. Attribution policy

Fathom — 412 m

Light finds a way down

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/caustics-background.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/caustics-background.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<CausticsBackground className="flex h-72 w-full items-end rounded-2xl p-6">
    <div>
      <p className="font-mono text-[11px] uppercase tracking-[0.3em] text-cyan-200/70">
        Fathom — 412 m
      </p>
      <p className="mt-2 text-2xl font-semibold text-white">
        Light finds a way down
      </p>
    </div>
  </CausticsBackground>

Props

CausticsBackgroundProps extends React.HTMLAttributes<HTMLDivElement>

PropTypeDefaultDescription
tintstring"#4cf5e0"Caustic light colour. Any CSS colour, including `var(--token)` — CSS variables are resolved against this element's cascade on the client.
backgroundstring"#041019"Deep-water base colour (also painted behind the canvas, so there is no flash before the first GL frame). Accepts `var(--token)` like `tint`.
intensitynumber1Glow strength multiplier. ~0.5 is faint shimmer, 2 is full sunbeams.
speednumber1Flow-speed multiplier. 1 is the slow, hero-grade drift.
pausedbooleanfalseIdle the render loop (the last frame stays up).