What it looks like
It is the web of light you see on the floor of a pool on a sunny day. Over a deep teal, lighter at the top and darker at the edges, pale blue-white lines form irregular cells that stretch, break and rearrange all the time, in two layers of different sizes. Where the layers cross, the light gets brighter. The edges of the lines split slightly into colors, like a discreet rainbow. Moving the mouse nudges the pattern around the pointer with an almost invisible lens. Your content sits on top.
You may be looking for this if you asked for something like
- a background with that moving swimming pool light reflection
- a sunlight-on-water effect for a spa website
- light rippling like the sea floor for a travel page
- a blue background with water reflections for a drinks brand
- that web of light you see underwater
- a calm, elegant water background for a hotel section
- a light-on-water effect that reacts slightly to the mouse
Also known as
- caustics
- water caustics
- pool light effect
- underwater light
- caustic shader
- animated Voronoi
When to use
- Spa, aesthetics clinic or wellness sections with a water mood
- Travel, hotel, resort or boat tour pages
- Beverage, mineral water or marine cosmetics brands
- Highlight bands with a short headline over a blue background
When to avoid
- Areas with long, small text, where the light lines compete with the letters
- Brands with no link to water, where the effect feels out of place
How to ask your AI
Create a WebGL caustic light background, like the floor of a sunlit pool, for the site's highlight section: my brand colors, subtle color dispersion, paused when off screen, a still image for reduced motion and a static fallback in Nuxt.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Caustics
Is Caustics heavy on phones?
It is rated Medium in THM Componentes. Caustics draws everything in a single shader, caps pixel density at 1.5 and pauses when it leaves the screen, so it stops drawing while people read other parts. Without a mouse, the lens stays in one spot, but the light keeps moving. Compare LCP before and after adding it.
Can I change the water color in Caustics?
Yes. Caustics has one color for the water and one for the light, plus props for speed, pattern scale, brightness and color dispersion. The THM Componentes prompt tells your AI to use your project color tokens. Setting dispersion to zero removes the colored edges from the light lines.
Does Caustics respect reduced motion settings?
Yes. Caustics checks the reduced motion preference on every frame: when it is on, the light pattern freezes into a still image, and only the discreet cursor lens keeps responding. If someone changes the setting with the page open, the effect adjusts without a reload.
