El efecto polvo y rayas en un sitio web

El polvo son rayas verticales finas y algunas motas claras colocadas sobre toda la página, como en una copia sacada de una caja o en una vieja copia de película. El grano rompe las superficies planas; el polvo cuenta otra cosa: un objeto que ha vivido, que se ha manipulado, proyectado, guardado. Da edad a una página nueva.

Sin

Polvo

En la demostración, busca las líneas muy finas que van de un borde a otro de la imagen, y las pocas motas que las acompañan. A la intensidad por defecto, se descubren más de lo que se ven.

De dónde viene el efecto

Una película de cine se desgasta en cada pasada. Los Archivos Nacionales de Estados Unidos lo recuerdan: una película se raya casi siempre cuando se manipula o se proyecta, y la ventanilla sucia de un proyector puede marcarla para siempre en una sola sesión. Como la película siempre corre en el mismo sentido, la raya sigue su longitud: en pantalla, se convierte en una línea vertical que atraviesa la imagen de un plano a otro.

No todas las rayas son del mismo color. Según toque el soporte de plástico o la emulsión, y se trate del original o de una copia, una raya sale negra o blanca. Y una vez arrancada la emulsión, la imagen perdida no vuelve nunca: solo la restauración digital puede disimular el daño, imitándolo (NARA, 2017).

En fotografía, el defecto es tan antiguo como el carrete. En 1933, la revista británica Amateur Photographer lo contaba entre los más frecuentes de los negativos en carrete: una serie de rayas paralelas, que comparaba con hilos de teléfono, causada casi siempre por un grano de arena olvidado en la cámara, sobre todo junto al mar.

La biblioteca del estudio se quedó con las marcas blancas: cuatro líneas muy finas y cinco motas, lo justo para evocar la copia gastada sin reproducir sus daños.

Cuándo usarlo

Dos de las veinticuatro maquetaciones listas del estudio lo emplean:

• la maquetación Portafolio, para fotógrafos, ilustradores y realizadores. El trabajo llena la pantalla, y el polvo recuerda la copia y la sala de proyección;
• la maquetación Sello, para sellos, artistas y salas, donde acompaña a la halación: la funda gastada, el concierto filmado en película.

Conviene también a los oficios que viven de lo antiguo o de lo hecho a mano: una tienda de discos, una librería de viejo, un anticuario, un cineclub, un tatuador de estilo retro, un enmarcador. Le gustan las paletas oscuras: unas líneas blancas a baja opacidad se ven sobre un fondo negro, y casi desaparecen sobre un fondo blanco.

Mejor no ponerlo:

• cuando la página debe inspirar una confianza clínica: una consulta de salud, un notario, un software de gestión. Las rayas pasan allí por descuido;
• con el grano. Los dos hablan de película, cada uno a su manera, y juntos sobrecargan la imagen: la biblioteca lo señala ella misma;
• en una página por lo demás muy lisa, donde una sola línea fina puede parecer un fallo de pantalla más que una elección.

La dosis justa

En la biblioteca, el polvo se coloca al 16 % de opacidad, en modo de fusión normal: las líneas son blancas, aclaran un poco lo que atraviesan, y nada más. Es bajo a propósito. A esta dosis, se notan a la segunda mirada; más fuerte, la página adopta una postura de archivo que entonces hay que asumir hasta el final.

El motivo es una pequeña baldosa de 220 por 340 píxeles, repetida por toda la página. En una pantalla grande, las mismas líneas vuelven por tanto a intervalos regulares, algo que las verdaderas rayas nunca hacen. Al 16 %, hay que buscar esta regularidad para verla; a dosis alta, se nota.

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. La maquetación Sello ya está en ese tope, con la halación. Y elige una segunda capa que no sea el grano, por la razón dicha más arriba.

Lo que cuesta

Muy poco. El motivo es una imagen SVG escrita directamente en la hoja de estilos, como URL data:: el archivo está en la propia dirección, y no hay nada que descargar (MDN). La capa se coloca en posición fija, no capta ni los clics ni el desplazamiento, y nunca cambia.

En una película de verdad, las rayas saltan y las motas pasan de una imagen a otra. La biblioteca no lo imita, y es a propósito: un navegador solo anima con poco coste la posición y la opacidad de una capa (web.dev). Una textura a pantalla completa que cambiara en cada imagen le obligaría a repintar toda la pantalla, sesenta veces por segundo. El movimiento viene del vídeo de debajo; el polvo se queda donde está, y solo sube cuando se deja la primera pantalla, para dejar desnudo el vídeo de bienvenida.

Accesibilidad

• Contraste. Las líneas lo atraviesan todo, texto incluido. Al 16 %, apenas cambian el color de una letra, pero comprueba el contraste en el lugar menos favorable: al menos 4,5 a 1 para el texto corriente, y 3 a 1 para un título grande (W3C, WCAG 2.2).
• Movimiento reducido. Cuando el visitante pide a su aparato menos animación (prefers-reduced-motion), la biblioteca retira el grano y la escarcha. El polvo se queda: no se mueve.
• Sin destellos. Las rayas de una vieja película parpadean; aquí, nada vacila. 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), y esta capa nunca destella.

Cómo está hecho

La baldosa es un pequeño dibujo SVG: cuatro líneas verticales de seis décimas de píxel de grosor, en blanco algo transparente, y cinco círculos blancos de menos de un píxel de radio, o apenas más. Cada orden M18 0v340 parte de arriba de la baldosa, a 18 píxeles del borde, y traza una línea hasta abajo:

<svg width="220" height="340">
  <g fill="none" stroke="white" stroke-width=".6" opacity=".75">
    <path d="M18 0v340 M97 0v340 M164 0v340 M203 0v340"/>
  </g>
  <g fill="white" opacity=".9">
    <circle cx="40" cy="70" r=".9"/>
    <circle cx="130" cy="150" r=".7"/>
    …
  </g>
</svg>

Este dibujo se escribe en la hoja de estilos como imagen de fondo repetida de una capa colocada sobre la página. La opacidad multiplica el ajuste de la capa por el «velo» que la retiene en la primera pantalla:

.m.m--poussiere {
  opacity: calc(var(--poussiere, .16) * var(--m-voile, 1));
  background-image: url("data:image/svg+xml;utf8,<svg …>…</svg>");
}

En el estudio

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