El efecto fuga de luz en un sitio web

Una fuga de luz es un flujo cálido que entra en la imagen por una esquina, como si el dorso de la cámara se hubiera entreabierto durante la toma. En un sitio, da a la página una hora del día: un final de tarde, un verano, un recuerdo. De las diez texturas de la biblioteca del estudio, es la única que tiene una dirección. El grano y las líneas de trama cubren la pantalla por igual; la fuga le da un arriba y un abajo, un lado por donde llega el día.

Sin

Fuga de luz

La imagen de portada de la demostración es fría, pizarra y cobalto, y el flujo vira al rosa empolvado en la esquina de arriba a la derecha. Es justo el límite que señala la biblioteca: sobre un azul frío, la fuga aguanta mal.

De dónde viene el efecto

En fotografía de película, el carrete reacciona a cualquier luz: cuando la cámara deja de ser estanca, una luz parásita vela la película. En 1933, la revista británica Amateur Photographer ya enumeraba las causas para los negativos en carrete: un dorso que cierra mal, luz que entra por la llave de arrastre, un punto gastado en el fuelle de una cámara plegable. El artículo daba también una pista para encontrar al culpable: cuando el velo toca la imagen pero respeta los bordes del negativo, la luz entró por la cámara.

El defecto se convirtió después en estilo. En los años noventa, la lomografía, nacida en Viena, celebró lo que la fotografía cuidadosa intentaba evitar: el desenfoque, la sobreexposición, el viñeteado marcado, las fugas de luz. La Holga, una cámara barata de cuerpo de plástico salida en 1982, encontró su público gracias a este movimiento. En los años 2000 y 2010, las aplicaciones de móvil, Hipstamatic e Instagram a la cabeza, imitaron este aspecto con filtros que añadían falsas fugas de luz (PetaPixel, 2024). La biblioteca retoma la versión domada: una luz cálida que nunca se come al sujeto.

Cuándo usarla

Tres de las veinticuatro maquetaciones listas del estudio la emplean:

• la maquetación Alojamiento, para campings, casas rurales y hoteles. El fondo cambia allí de escena a medida que se baja, y la fuga añade la luz de un final de día;
• la maquetación Evento, para festivales, salones y fiestas, donde acompaña al grano;
• la maquetación Bienestar, para yoga, masaje y terapias, donde calienta la textura de papel.

Conviene también a los oficios que cuentan un momento: una casa de huéspedes, un fotógrafo de bodas, una heladería junto al mar, un merendero con baile. Le gustan las paletas cálidas, ocres, rojos ladrillo, naranjas, y los vídeos rodados con luz dorada.

Mejor no ponerla:

• sobre una paleta fría. El flujo toma su tono del color de acento del sitio, mezclado con un naranja pálido: sobre una imagen azul, vira al rosa empolvado, y con un acento azul, a un halo lavanda que ya no evoca el sol;
• cuando la esquina de arriba a la derecha lleva algo importante. La capa es más fuerte ahí, y es a menudo donde está el botón de navegación: comprueba que sigue leyéndose;
• en un sitio que debe parecer neutro y preciso: una consulta médica, un software, una oficina de ingeniería. Una luz parásita pasa allí por un defecto.

La dosis justa

En la biblioteca, la fuga se coloca al 28 % de opacidad, en modo de fusión screen (trama, screen). Este modo solo sabe aclarar: donde la capa es negra, nada cambia, y donde es clara, la imagen se ilumina, como dos proyectores dirigidos a la misma pantalla (MDN).

La luz parte de la esquina de arriba a la derecha. Allí se extiende un degradado amplio teñido del acento y de un naranja pálido, y una mancha casi blanca, un poco desplazada hacia el interior, forma el corazón de la quemadura. Al 28 %, se nota sin que cubra la imagen; más fuerte, empieza a lavar lo que pasa por debajo.

La regla de las dos capas como mucho vale aquí como en todas partes: a la tercera, la imagen se ensucia, y ya nadie sabe cuál quitar. Las maquetaciones Evento y Bienestar ya están en ese tope, con el grano para una, el papel para la otra. Evita también doblar la luz: la halación, que toma también el color de acento en fusión screen, haría brillar la página dos veces.

Lo que cuesta

Casi nada. La capa está hecha de dos degradados radiales que el navegador dibuja él mismo: ningún archivo que descargar, ninguna imagen que decodificar. Se coloca en posición fija, y no capta ni los clics ni el desplazamiento.

Sobre todo, no se mueve. Un navegador sabe animar con poco coste la posición y la opacidad de una capa; casi todo lo demás le obliga a repintar (web.dev), y una luz que latiera en toda la pantalla le haría repintar en cada imagen. Solo cambia su intensidad, al principio: la primera pantalla queda desnuda, para dejar intacto el vídeo de bienvenida, y la fuga sube a medida que se baja.

Accesibilidad

• Contraste. La fusión screen aclara todo lo que toca, texto incluido. En la esquina iluminada, el texto pierde contraste, sea claro sobre oscuro u oscuro sobre claro. Las reglas de accesibilidad exigen al menos 4,5 a 1 para el texto corriente, y 3 a 1 para un título grande (W3C, WCAG 2.2): mídelo en el lugar más luminoso.
• Movimiento reducido. Cuando el visitante pide a su aparato menos animación (prefers-reduced-motion), la biblioteca retira el grano y la escarcha. La fuga se queda: está quieta, y nada en ella supone movimiento.
• Sin destellos. Una página no debe destellar más de tres veces por segundo, so pena de provocar crisis en las personas fotosensibles (W3C, criterio 2.3.1). La fuga nunca destella, y no parpadea como una llama.

Cómo está hecha

Dos degradados radiales, radial-gradient(), centrados en la esquina de arriba a la derecha de una capa colocada sobre la página. El color del primero lo calcula color-mix(): un 60 % del color de acento del sitio, un 40 % de un naranja pálido. El segundo es un blanco cálido. El conjunto pasa por la fusión screen, y la opacidad multiplica el ajuste de la capa por el «velo» que la retiene en la primera pantalla:

.m.m--fuite {
  mix-blend-mode: screen;
  opacity: calc(var(--fuite, .28) * var(--m-voile, 1));
  background:
    radial-gradient(80% 60% at 100% 0%,
      color-mix(in srgb, var(--accent) 60%, #ffd9a0) 0%, transparent 62%),
    radial-gradient(50% 40% at 92% 12%, #fff2d8 0%, transparent 70%);
}

Como el tono viene de --accent, cambiar el color de acento del sitio cambia el color de la fuga: siempre pertenece a la paleta.

En el estudio

La fuga de luz es una de las diez texturas de la biblioteca. Se elige en la etapa «La textura», después del fondo, sola o con una segunda textura.