At the bottom of a pool, on a sunny day, threads of light knot and unknot endlessly: these are caustics. On a site, the layer of the same name extends this water light across the whole page, in fine, light, crossing lines. It serves a very specific family of images: those where water is present, or not far away.
WithoutCausticsWhere the effect comes from
A caustic is a concentration of light. When a curved surface, water or glass, bends rays by refraction or reflection, it gathers them in certain places and deprives others. Each wave acts as an imperfect magnifying glass: where it concentrates the sun, the bottom lights up in bright lines; next to it, it stays in shadow. As the surface moves, the pattern changes constantly.
The computer graphics laboratory at EPFL, in Lausanne, points out that caustics are mostly known as effects of chance, at the bottom of a pool for example. Its researchers have shown that they can be controlled: by computing the shape of a lens or a mirror, you can make light draw almost any shape.
In computer graphics, caustics have a reputation for being a computational sinkhole. A chapter of GPU Gems, NVIDIA’s technical collection, notes that in specialized software, only 1 to 5% of the rays computed contribute to the image. The authors propose a shortcut for real time, which assumes the sun is directly above the water, and they admit it: the scene is beautiful without being quite accurate. The studio’s layer takes the shortcut further still.
When to use them
Caustics speak of water, freshness and calm. They suit:
- a swimming pool, a spa, a hammam, a thalassotherapy center;
- a diving, surfing or sailing school, a boat rental;
- a cosmetic or a treatment that plays on water and minerals;
- a seaside restaurant, when the video already shows the water’s reflection.
None of the studio’s twenty-four layouts applies them by default: the pattern is too tied to its subject to serve as a default setting. You choose them yourself, for example for a water-oriented wellness page, in place of one of the two textures its layout provides.
When to skip them. Without water in the image, the rings of light have nothing to extend: on a kitchen or workshop video, they look like a smudge on the screen. Avoid them too on a light background, where they get lost, since they can only lighten.
The right dose
The layer is set at 50% opacity, but its lines are already very pale: the site’s text color at 12% for the first series, at 9% for the second. The result is sensed more than seen, and that is the point.
It draws two series of concentric rings two pixels thick: one around a point at the top left, a ring every 22 pixels; the other around a point at the bottom right, a ring every 30 pixels. Where the two series cross, the eye reads a network. The real caustics, the moving ones, are in the film beneath: the layer extends them, still, over the rest of the page.
Like the other textures, it leaves the first screen bare and rises as you scroll down. The rule holds: two layers at most. With halation, caustics make an end-of-day light on the water; a third layer would only dirty the image.
What they cost
Little. Two repeated gradients, drawn once by the browser, with no file to download. The layer extends beyond the screen by a fifth on each side, so the rings don’t stop abruptly at the edge.
It doesn’t move. Making these rings ripple would require redrawing a full-screen texture every frame, which the library’s stylesheet names as the leading cause of a site that lags when nothing is happening. Only its opacity varies, during the first scroll, and opacity changes without repainting the screen (web.dev). Movement stays in the video.
Accessibility
- Contrast. The layer lightens what it covers. On a dark page with light text, it slightly raises the background behind the letters: check that body text keeps a contrast of at least 4.5 to 1 (WCAG 2.2, criterion 1.4.3), where the rings cross.
- Reduced motion. When the visitor asks for less animation (
prefers-reduced-motion), the background video fades out and its poster stays; grain and frost disappear too. Caustics stay, since they are still: they keep a memory of the water light on a page that no longer moves. - No flashing. Real caustics shimmer. The layer never lights up or goes out.
How they are made
Two repeating radial gradients, repeating-radial-gradient(), stacked: each repeats a thin circle around its center, like the rings of a pebble in water (MDN). The screen blend mode, mix-blend-mode: screen, adds their light to the image; it can only lighten.
.m.m--caustiques {
inset: -20%;
mix-blend-mode: screen;
opacity: calc(var(--caustiques, .5) * var(--m-voile, 1));
background:
repeating-radial-gradient(circle at 30% 20%,
color-mix(in srgb, var(--fg) 12%, transparent) 0 2px, transparent 2px 22px),
repeating-radial-gradient(circle at 72% 64%,
color-mix(in srgb, var(--fg) 9%, transparent) 0 2px, transparent 2px 30px);
}For the effect to hold, the background video must show water. Describe it with its lights: “sun reflections rippling at the bottom of a clear pool”. The tip on how to describe a scene gives the method.
In the studio
Caustics are one of the library’s ten textures. You choose them at the “The texture” step, after the background.