Animated Background With Liquid Caustics
ProFull-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

