El efecto cáusticas: la luz del agua en un sitio web

En el fondo de una piscina, un día de sol, unos hilos de luz se anudan y se desanudan sin fin: son las cáusticas. En un sitio, la capa del mismo nombre prolonga esta luz de agua por toda la página, en líneas finas, claras, que se cruzan. Sirve a una familia de imágenes muy precisa: aquellas en las que el agua está presente, o no muy lejos.

Sin

Cáusticas

De dónde viene el efecto

Una cáustica es una concentración de luz. Cuando una superficie curva, agua o vidrio, desvía los rayos por refracción o por reflexión, los reúne en ciertos lugares y priva de ellos a otros. Cada ola actúa como una lupa imperfecta: donde concentra el sol, el fondo se ilumina en líneas brillantes; al lado, queda en sombra. Como la superficie se mueve, el dibujo cambia sin cesar.

El laboratorio de informática gráfica de la EPFL, en Lausana, recuerda que las cáusticas se conocen sobre todo como efectos del azar, en el fondo de una piscina por ejemplo. Sus investigadores han mostrado que se pueden controlar: calculando la forma de una lente o de un espejo, se consigue que la luz dibuje casi cualquier forma.

En imagen de síntesis, las cáusticas tienen fama de pozo de cálculo. Un capítulo de GPU Gems, la colección técnica de NVIDIA, señala que en los programas especializados, solo del 1 al 5 % de los rayos calculados contribuyen a la imagen. Los autores proponen un atajo para el tiempo real, que supone el sol justo encima del agua, y lo reconocen: la escena es bella sin ser del todo exacta. La capa del estudio lleva el atajo aún más lejos.

Cuándo usarlas

Las cáusticas hablan de agua, de frescura y de calma. Convienen a:

• una piscina, un spa, un hammam, un centro de talasoterapia;
• una escuela de buceo, de surf o de vela, un alquiler de barcos;
• un cosmético o un tratamiento que juega con el agua y los minerales;
• un restaurante junto al mar, cuando el vídeo ya muestra el reflejo del agua.

Ninguna de las veinticuatro maquetaciones del estudio las aplica por defecto: el motivo está demasiado ligado a su tema para servir de ajuste por defecto. Las eliges tú mismo, por ejemplo para una página de bienestar orientada al agua, en lugar de una de las dos texturas que prevé su maquetación.

Cuándo prescindir de ellas. Sin agua en la imagen, los anillos de luz no tienen nada que prolongar: sobre un vídeo de cocina o de taller, parecen una mancha en la pantalla. Evítalas también sobre un fondo claro, donde se pierden, ya que solo saben aclarar.

La dosis justa

La capa se coloca al 50 % de opacidad, pero sus líneas ya son muy pálidas: el color del texto del sitio al 12 % para la primera serie, al 9 % para la segunda. El resultado se adivina más de lo que se ve, y esa es la intención.

Dibuja dos series de anillos concéntricos de dos píxeles de grosor: una alrededor de un punto arriba a la izquierda, un anillo cada 22 píxeles; la otra alrededor de un punto abajo a la derecha, un anillo cada 30 píxeles. Donde las dos series se cruzan, el ojo lee una red. Las verdaderas cáusticas, las que se mueven, están en la película de debajo: la capa las prolonga, quieta, sobre el resto de la página.

Como las otras texturas, deja desnuda la primera pantalla y sube a medida que se baja. La regla vale: dos capas como mucho. Con la halación, las cáusticas dan una luz de final del día sobre el agua; una tercera capa solo ensuciaría la imagen.

Lo que cuestan

Poco. Dos degradados repetidos, dibujados una vez por el navegador, sin ningún archivo que descargar. La capa desborda la pantalla un quinto por cada lado, para que los anillos no se detengan en seco en el borde.

No se mueve. Hacer ondular estos anillos exigiría volver a dibujar una textura a pantalla completa en cada imagen, lo que la hoja de estilos de la biblioteca nombra como la primera causa de un sitio que va a tirones cuando no pasa nada. Solo varía su opacidad, durante el primer desplazamiento, y la opacidad cambia sin repintar la pantalla (web.dev). El movimiento se queda en el vídeo.

Accesibilidad

• Contraste. La capa aclara lo que cubre. En una página oscura con texto claro, sube ligeramente el fondo detrás de las letras: comprueba que el texto corriente conserva un contraste de al menos 4,5 a 1 (WCAG 2.2, criterio 1.4.3), donde los anillos se cruzan.
• Movimiento reducido. Cuando el visitante pide menos animación (prefers-reduced-motion), el vídeo de fondo se borra y su imagen de portada se queda; el grano y la escarcha desaparecen también. Las cáusticas se quedan, ya que están quietas: guardan un recuerdo de la luz del agua en una página que ya no se mueve.
• Sin destellos. Las verdaderas cáusticas centellean. La capa nunca se enciende ni se apaga.

Cómo están hechas

Dos degradados radiales repetidos, repeating-radial-gradient(), superpuestos: cada uno repite un círculo fino alrededor de su centro, como los anillos de una piedra en el agua (MDN). El modo de fusión screen (trama), mix-blend-mode: screen, suma su luz a la imagen; solo sabe aclarar.

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

Para que el efecto funcione, el vídeo de fondo debe mostrar agua. Descríbelo con sus luces: «reflejos de sol que ondulan en el fondo de una piscina clara». El consejo sobre cómo describir una escena da el método.

En el estudio

Las cáusticas son una de las diez texturas de la biblioteca. Se eligen en la etapa «La textura», después del fondo.