Effet caustiques : la lumière de l’eau sur un site

Au fond d’une piscine, par beau temps, des filets de lumière se nouent et se dénouent sans cesse : ce sont des caustiques. Sur un site, le calque du même nom prolonge cette lumière d’eau sur toute la page, en lignes claires et fines qui se croisent. Il sert une famille d’images bien précise : celles où l’eau est là, ou pas loin.

Sans

Caustiques

D’où vient l’effet

Une caustique est une concentration de lumière. Quand une surface courbe, de l’eau ou du verre, dévie les rayons par réfraction ou par réflexion, elle les rassemble à certains endroits et en prive d’autres. Chaque vague agit comme une loupe imparfaite : là où elle concentre le soleil, le fond s’éclaire en lignes vives ; à côté, il reste dans l’ombre. Comme la surface bouge, le dessin change sans arrêt.

Le laboratoire d’informatique graphique de l’EPFL, à Lausanne, rappelle qu’on connaît surtout les caustiques comme des effets du hasard, au fond d’une piscine par exemple. Ses chercheurs ont montré qu’on peut les maîtriser : en calculant la forme d’une lentille ou d’un miroir, on fait dessiner à la lumière presque n’importe quelle forme.

En image de synthèse, les caustiques ont une réputation de gouffre à calcul. Un chapitre de GPU Gems, le recueil technique de NVIDIA, note que dans les logiciels spécialisés, 1 à 5 % seulement des rayons calculés servent à l’image. Les auteurs proposent un raccourci pour le temps réel, qui suppose le soleil juste au-dessus de l’eau, et ils le reconnaissent : la scène est belle sans être tout à fait exacte. Le calque de l’atelier pousse le raccourci plus loin encore.

Quand les poser

Les caustiques parlent d’eau, de fraîcheur et de calme. Elles vont :

• à une piscine, un spa, un hammam, un centre de thalassothérapie ;
• à une école de plongée, de surf ou de voile, un loueur de bateaux ;
• à une cosmétique ou un soin qui joue sur l’eau et le minéral ;
• à un restaurant de bord de mer, quand la vidéo montre déjà le reflet de l’eau.

Aucune des vingt-quatre mises en page de l’atelier ne les pose d’office : le motif est trop lié à son sujet pour servir de réglage par défaut. On les choisit soi-même, par exemple pour une page de bien-être tournée vers l’eau, à la place de l’une des deux matières que sa mise en page prévoit.

Quand s’en passer. Sans eau dans l’image, les anneaux de lumière n’ont rien à prolonger : sur une vidéo de cuisine ou d’atelier, ils ressemblent à une trace sur l’écran. Évitez-les aussi sur un fond clair, où ils se perdent, puisqu’ils ne savent qu’éclaircir.

Le bon dosage

Le calque est posé à 50 % d’opacité, mais ses lignes sont déjà très pâles : la couleur du texte du site à 12 % pour la première série, à 9 % pour la seconde. Le résultat se devine plus qu’il ne se voit, et c’est le but.

Il trace deux séries d’anneaux concentriques de deux pixels d’épaisseur : l’une autour d’un point en haut à gauche, un anneau tous les 22 pixels ; l’autre autour d’un point en bas à droite, un anneau tous les 30 pixels. Là où les deux séries se croisent, l’œil lit un réseau. Les vraies caustiques, celles qui bougent, sont dans le film dessous : le calque les prolonge, immobile, sur le reste de la page.

Comme les autres matières, il laisse le premier écran nu et se lève quand on descend. La règle tient : deux calques au plus. Avec la halation, les caustiques font une lumière de fin de journée sur l’eau ; un troisième calque ne ferait que salir l’image.

Ce qu’elles coûtent

Peu. Deux dégradés répétés, dessinés une fois par le navigateur, sans fichier à télécharger. Le calque déborde de l’écran d’un cinquième de chaque côté, pour que les anneaux ne s’arrêtent pas net au bord.

Il ne bouge pas. Faire onduler ces anneaux demanderait de redessiner une texture plein écran à chaque image, ce que la feuille de la bibliothèque désigne comme la première cause d’un site qui rame alors que rien ne s’y passe. Seule son opacité varie, pendant le premier défilement, et l’opacité se change sans repeindre l’écran (web.dev). Le mouvement reste dans la vidéo.

L’accessibilité

• Le contraste. Le calque éclaircit ce qu’il couvre. Sur une page sombre au texte clair, il relève un peu le fond derrière les lettres : vérifiez que le texte courant garde un contraste d’au moins 4,5 pour 1 (WCAG 2.2, critère 1.4.3), là où les anneaux se croisent.
• Le mouvement réduit. Quand le visiteur demande moins d’animations (prefers-reduced-motion), la vidéo de fond s’efface et son affiche reste ; le grain et le givre disparaissent aussi. Les caustiques restent, puisqu’elles sont immobiles : elles gardent un souvenir de la lumière d’eau sur une page qui ne bouge plus.
• Aucun clignotement. Les vraies caustiques scintillent. Le calque, lui, ne s’allume et ne s’éteint jamais.

Comment elles sont faites

Deux dégradés radiaux répétés, repeating-radial-gradient(), superposés : chacun répète un cercle fin autour de son centre, comme les ronds d’un caillou dans l’eau (MDN). Le mode de fusion écran, mix-blend-mode: screen, ajoute leur lumière à l’image ; il peut seulement éclaircir.

.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);
}

Pour que l’effet tienne, la vidéo de fond doit montrer de l’eau. Décrivez-la avec ses lumières : « reflets de soleil qui ondulent au fond d’un bassin clair ». Le conseil sur la façon de décrire une scène donne la méthode.

Dans l’atelier

Les caustiques font partie des dix matières de la bibliothèque. On les choisit à l’étape « La matière », après le fond.