caustic-light

Physically based caustic light for any web page. The webs and ribbons that glass, water and polished metal throw onto a wall, in one dependency-free web component.

Examples

Presets as a backgroundA full-page light behind a headline, with a preset switcher. Light on contentA transparent overlay with a gradient map, falling across a page. Hover effectsRipple, lens, calm, swirl, focus, tilt and glow, plus ripples from code. Music-reactive lightA looping ambient track whose dynamics move the light. PlaygroundEvery parameter, live, with copy-ready embed code.

Quick start

<script src="https://cdn.jsdelivr.net/npm/caustic-light@1/dist/caustic-light.min.js"></script>

<section style="position:relative; height:70vh">
  <caustic-light preset="pool" style="position:absolute; inset:0"></caustic-light>
</section>