La textura de papel en un sitio web

La textura de papel coloca la fibra de un papel grueso sobre toda la página. Saca el sitio del cristal de la pantalla y lo posa sobre una materia: la página se lee como una carta, una tarjeta de anuncio, un informe bien impreso. Es la textura de los oficios en los que lo digital debe pasar desapercibido: asesoría, cuidados, derecho, edición.

Sin

Papel

La demostración usa una imagen de portada clara, la pared de un taller de pintura, porque la textura actúa oscureciendo: una imagen ya oscura no le deja casi nada que hacer. Se ve del todo sobre una paleta clara: crema, marfil, gris pálido, arena.

De dónde viene el efecto

El papel es una materia en hojas delgadas, hecha de fibras que se unen entre sí. Hasta la primera mitad del siglo XIX, esas fibras venían de trapos; la pasta de madera las sustituyó después, y la primera pasta mecánica data de 1860 (Larousse).

Hecha a mano, la hoja guarda además la huella del molde que la formó. El papel verjurado lleva las marcas de sus hilos, los corondeles y puntizones (Académie française), que aparecen como finas líneas cuando se mira la hoja a contraluz. El papel vitela se forma sobre una tela metálica muy fina, y parece tejido a contraluz. En Occidente, James Whatman fue probablemente el primero en fabricarlo, y el Virgilio impreso por John Baskerville en 1757 es el primer libro conocido que lo emplea (American Bookbinders Museum, 2015).

La biblioteca del estudio conserva su fibra, sin verjura ni filigrana: un ruido gris, irregular, estirado en un sentido, que evoca un papel grueso y algo rugoso. En una pantalla, recuerda lo que asociamos a lo impreso: el cuidado, la permanencia, el documento que se firma.

Cuándo usarla

Cinco de las veinticuatro maquetaciones listas del estudio la emplean:

• la maquetación Consulta de salud, para dentistas, fisioterapeutas y médicos, que deben tranquilizar sin infantilizar;
• la maquetación Asesoría, para consultores, contables y oficinas de ingeniería;
• la maquetación Despacho jurídico, para abogados, notarios y procuradores;
• la maquetación Asociación, para clubes, ONG y colectivos;
• la maquetación Bienestar, para yoga, masaje y terapias, donde va acompañada de una fuga de luz.

Las cinco tienen un fondo fijo, una imagen más que una película: la página se mira con calma, como un documento. La textura de papel conviene también a una editorial, una librería, un encuadernador, una papelería, un creador de tarjetas de anuncio, un arquitecto que muestra sus cuadernos de bocetos.

Mejor no ponerla:

• sobre una paleta muy oscura. En modo multiplicar, la textura solo oscurece; sobre negro, ya no tiene casi nada que hacer, y la biblioteca aconseja bajar su intensidad;
• con el grano: dos texturas se disputan la misma superficie, y ninguna se lee;
• con un resplandor de neón: la fibra y el neón vienen de dos mundos, y uno hace dudar del otro;
• en un sitio que vive de la pantalla y de la velocidad: un software, un estudio 3D, un editor de videojuegos. El papel parece allí un disfraz.

La dosis justa

En la biblioteca, el papel se coloca al 50 % de opacidad, en modo de fusión multiplicar (multiply). Con las cáusticas, es la intensidad por defecto más alta del conjunto, y por una razón: el motivo es un gris irregular, él mismo medio transparente, y el modo multiplicar solo sabe oscurecer. Una capa blanca no cambia nada, una capa negra lo vuelve todo negro, una capa gris oscurece un poco, como dos imágenes impresas en películas transparentes superpuestas (MDN). Sobre una página clara, la fibra se ve con nitidez; sobre una página oscura, casi se borra.

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. En la maquetación Bienestar, el papel ya comparte la página con la fuga de luz, y las dos se responden: la luz cálida aclara una esquina, el papel oscurece suavemente el resto.

Lo que cuesta

El motivo es una pequeña imagen SVG de 180 píxeles de lado, escrita directamente en la hoja de estilos: ningún archivo que descargar. El navegador fabrica el ruido a partir de un filtro, y luego repite la baldosa por toda la página. Nunca cambia, y nada le obliga a volver a dibujarlo durante el desplazamiento.

Es la condición para que la capa no cueste casi nada. Un navegador solo anima con poco coste la posición y la opacidad de una capa (web.dev); una textura a pantalla completa que se moviera le obligaría a repintar toda la pantalla en cada imagen. Así que el papel se queda quieto. Solo sube cuando se deja la primera pantalla, para dejar intactos el vídeo o la imagen de bienvenida.

Accesibilidad

• Contraste. La capa se coloca sobre todo, texto incluido, y oscurece. Un texto claro sobre fondo oscuro pierde un poco de brillo; un fondo claro se apaga bajo un texto oscuro. Comprueba el contraste donde la fibra es más densa: 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 papel se queda: está quieto.
• Sin destellos. La capa no se mueve y nunca parpadea.

Cómo está hecha

El motivo sale de un filtro SVG, feTurbulence, que fabrica un ruido de Perlin, el que se usa para imitar nubes o mármol. Todo está en su frecuencia: el atributo baseFrequency acepta dos números, el primero para la horizontal, el segundo para la vertical (MDN). Una frecuencia muy baja a lo ancho y muy alta a lo alto estiran el ruido en filamentos horizontales, como las fibras de una hoja. Un segundo filtro, feColorMatrix, le quita todo color:

<filter id="f">
  <feTurbulence type="fractalNoise" baseFrequency=".035 .9" numOctaves="3"/>
  <feColorMatrix type="saturate" values="0"/>
</filter>
<rect width="100%" height="100%" filter="url(#f)" opacity=".55"/>

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

.m.m--papier {
  mix-blend-mode: multiply;
  opacity: calc(var(--papier, .5) * var(--m-voile, 1));
  background-image: url("data:image/svg+xml;utf8,<svg …>…</svg>");
}

En el estudio

La textura de papel 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.