# Caustics

Aperveil / Light, shaped for the web.

An animated caustic light background with water-like ridges and pointer ripples. Explore the free WebGPU shader and export it for React.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

Caustics creates a moving web of light using a warped procedural ridge field. Pointer-centered ripples disturb the pattern; depth fade, sharpness and halo control its contrast.

## Choose it for

Build a calm opening for a coastal hospitality project. Leave the high-contrast light ridges away from long copy and repeat the water palette in the surrounding UI.

## Limits

The web suggests underwater light but is not a ray-traced water scene. There is no uploaded image, pool geometry or fluid volume.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/caustics/edit?look=default)

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

```sh
npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz
```

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

```tsx
"use client";

import Caustics from "./Caustics";

export default function Hero() {
  return (
    <Caustics
      className="hero-shader"
      scale={6} deepColor="#050d1aff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `deepColor`, `waterColor`, `glowColor`, `scale`, `webSharpness`, `intensity`, `halo`, `depthFade`, `flowSpeed`, `rippleStrength`, `rippleReach`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Deep water (`deepColor`, color): Colour of the deepest water, toward the bottom of the frame.
- Shallow (`waterColor`, color): Colour of the shallower water toward the top.
- Light (`glowColor`, color): Colour of the light web.
- Scale (`scale`, slider): Size of the light web. Lower gives fewer, broader ribbons.
- Filament sharpness (`webSharpness`, slider): How thin and crisp the light filaments are; low values give soft, wide bands.
- Brightness (`intensity`, slider): Brightness of the light web.
- Halo (`halo`, slider): Soft glow around each filament.
- Depth fade (`depthFade`, slider): How much the water lightens toward the top.
- Flow speed (`flowSpeed`, slider): How fast the water surface moves; 0 freezes the web.
- Ripple (`rippleStrength`, slider): How strongly the pointer's ripples bend the web.
- Ripple reach (`rippleReach`, slider): How far the pointer's ripples travel before fading.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography.

## Performance

0.498 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 1.5; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-03. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Does this simulate light travelling through actual water geometry?

No. It is a procedural caustic-style pattern with an interactive ripple. Choose it for a water-light impression, not physically accurate scene illumination.

### What should I not use Caustics for?

The web suggests underwater light but is not a ray-traced water scene. There is no uploaded image, pool geometry or fluid volume.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Ocean Swell](https://www.aperveil.com/shaders/ocean-swell)
- [Glass Flutes](https://www.aperveil.com/shaders/glass-flutes)
- [God Rays](https://www.aperveil.com/shaders/god-rays)