Pool Caustics
Sunlight through moving water, over any section: caustic light that wanders and ripples under the pointer.
Controls
<PoolCaustics />About
The light at the bottom of a pool, behind your content. Bright lines gather where moving cells meet (the shader measures the gap between each pixel's nearest and second-nearest cell point, which is smallest along the cell edges), two scales of them overlap, a slow warp makes them wander, and the red channel is sampled a hair to the side for the faint fringe of real caustics. The pointer or a finger drops ripples into the water. It runs on the page's shared WebGL2 stage at under half the pixels; the blues come from your spectrum tokens, or from your own colours for a resort's palette. A CSS water gradient shows first and stays without hardware WebGL2. Original to VibeBox Motion.
Use it when
- A resort, spa, pool, swim school or hotel wants its hero to feel like water.
- A booking or "check dates" band needs atmosphere.
Skip it when
- The brand has nothing to do with water or light; use Spectrum Mesh instead.
- The page already has a 3D centrepiece.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | What sits on the water. |
| colors | { deep?: string; shallow?: string; light?: string } | — | Water and light colours (any CSS colour); default to tones of the spectrum's blues. |
| intensity | number | 0.85 | Brightness of the light, 0 to 1.5. |
| scale | number | 3.2 | Light cells across the short side; larger looks finer and deeper. |
| speed | number | 0.6 | Speed of the water; 0 holds it still. |
| interactive | boolean | true | The pointer drops ripples. |
| label | string | — | Accessible name; leave it out when it is only a background. |
| className | string | — | Merged with cn(); give it a size and radius. |
Accessibility and motion
- Keyboard
- Not focusable; content on it keeps its own focus order.
- Screen readers
- Decorative by default; with
labelit is an image with that name. - Touch
- A finger drops ripples like the cursor; scrolling is never blocked.
- Reduced motion
- One still frame of the water; no drift or ripples.
Edge cases and limits
- Light text on the shallows can lose contrast; keep text toward the deep end or on a card.
- Very high
intensitywith a brightlightcolour washes out; stay below 1.2.
Related
Fluted Glass
ProReeded-glass refraction over an image or spectrum art; the flutes slide with scroll and lean with the pointer.
Backgrounds · WebGL2
Spectrum Mesh
FreeA soft spectrum mesh gradient that drifts behind your content and leans toward the cursor; still under reduced motion.
Backgrounds · WebGL2
A before-and-after slider whose edge is a wobbling liquid seam; drag, tap or use the arrow keys.
Cursor and touch · WebGL2