Caustics Bg
Underwater light caustics, with no shader and no per-frame noise. Install with npx remotion-ui@latest add caustics-bg.
PrimitivePrimitivesAdvanced
$ npx remotion-ui@latest add caustics-bgThe bright web that light makes on the bottom of a pool.
import { CausticsBg } from "@/remotion/primitives/caustics-bg";
<AbsoluteFill>
<CausticsBg scale={130} />
<YourScene />
</AbsoluteFill>How it is made
Five wave trains, tilted at angles that share no common divisor, added together
with plus-lighter so they combine the way light does. A slow, large-scale
swell multiplies the sum so it only reaches full brightness in patches. Then
contrast() thresholds the result into the sharp-edged web.
No shader, no canvas, no noise texture regenerated per frame — six divs and
one filter chain.
Why five layers
Two crossed wave trains give a plaid. Three give a hexagonal lattice, and detuning their wavelengths does not help: the pattern is still periodic in two directions and the eye finds the tiling immediately. Five incommensurate directions make the sum quasi-periodic, so it never repeats. That is the difference between water and wallpaper, and both intermediate cuts of this component were rejected on exactly that point.
Tuning
contrast is the important one. Too low and the web dissolves back into the
plaid it came from; too high and the bright regions saturate and the cells
invert into dark blobs on a light field, which is the opposite of a caustic.
Around 3-4 is the usable band.
The filter order is blur, then contrast. Thresholding first and blurring after gives soft-edged blobs instead of a web.
Motion
Each train slides at its own rate and rocks by a few degrees on its own clock, so the cells stretch and pinch rather than sliding as a rigid pattern. Two trains on the same clock would swim in lockstep and give the whole thing away.
speed={0} freezes the surface. There is no entrance; this is a stage layer.
Five wave trains at incommensurate angles, added with `plus-lighter`, dimmed in patches by a slow swell, then thresholded with `contrast()`. Three trains — at any wavelengths — make a lattice, and a lattice reads as wallpaper; five make the sum quasi-periodic. No shader and no per-frame noise.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/caustics-bg- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: backgroundColor, color, scale, speed, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { CausticsBg } from "@/remotion/primitives/caustics-bg";
<AbsoluteFill>
<CausticsBg scale={130} />
<YourScene />
</AbsoluteFill>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | deep water gradient | Water behind the light. `transparent` layers the caustics over footage. |
| color | string | "#9fe8ff" | Colour of the light itself. |
| scale | number | 120 | Cell size, in px. |
| speed | number | 1 | Swim speed. 0 freezes the surface. |
| contrast | number | 3.4 | How hard the cells threshold. Too low and the web dissolves into plaid. |
| blur | number | 8 | Softness of a cell edge, in px. |
| intensity | number | 1 | Overall brightness. |
| falloff | number | 0.55 | Depth shading down the frame. 0 lights it evenly. |