Components / Backgrounds / Caustic Surface

Caustic Surface

The net of light on a pool floor, as a backdrop. The lines are not a texture: each floor pixel finds the surface point whose refracted ray lands on it, and its brightness is the area that patch of surface had over the area its light lands on, E = 1 / |det(I + D·(1 − 1/n)·H)|. Where the surface focuses, that determinant collapses and the light spikes. Deeper water focuses a sharper net, and the pointer drops ripples that bend it: as strong as it is fast when it moves, a full one when it presses, and keyboard focus on anything placed on the water stirs it too.

Usage

import CausticSurface from '@/components/caustic-surface'

<CausticSurface depth={260} amplitude={11}>
  {content}
</CausticSurface>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/caustic-surface.json

Model

E = 1 / |det(I + D·(1 − 1/n)·H)|

D water depth · n 1.333 · H the Hessian of the surface

Props