Animated Background With Liquid Caustics

Pro

Full-bleed WebGL caustics background where two folded wave sets cross into a moving web of refracted light, sampled once per colour channel for true edge dispersion, with an overhead light falloff and a pointer lens that gathers the threads, built on Three.js with deep-water dark and shallow-pool light palettes.

When to use Animated Background With Liquid Caustics

Refracted light on the floor of a pool, and the richest surface in this set. It earns a section where the job is atmosphere rather than information: a testimonial band, a closing call to action, a pricing header, the strip above a footer. Because the threads gather and release on their own schedule the frame never repeats, which is what makes it hold up in a section people scroll past slowly.

Three properties decide almost everything. `sharpness` is the difference between broad rippling washes and fine bright threads, `turbulence` between a lazy swell and a churn, and `tilt` controls how much light falls from above, which is what gives the frame a top and a bottom instead of reading as a flat texture. Take `dispersion` up only a little; past about four hundredths the colour fringes stop looking like refraction and start looking like a misregistered print. And keep real reading to a headline here, because bright threads travelling under small type is genuinely hard to read.

Block details

Category
Motion
Renders
WebGL canvas. Compiles a shader before the first frame
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
@react-three/fiberclsxnext-themestailwind-mergethree
Source
601 lines, 21 KB in one file
Install
wensity add animated-background-with-liquid-caustics --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
webgl, three.js, shader, caustics, refraction, water, light, dark, background
Last updated

More motion