El efecto líneas de barrido en un sitio web

Una línea fina cada cuatro píxeles, sobre toda la página: es la pantalla de un viejo monitor, el recuerdo de una pantalla en la que la imagen se dibujaba línea tras línea. El efecto es muy marcado. Se elige para evocar una época, una cultura técnica, una estética de máquina; es demasiado visible para servir de simple acabado.

Sin

Trama

De dónde viene el efecto

En un televisor de tubo catódico, la imagen nunca se muestra de una vez. Se barre de izquierda a derecha y de arriba abajo, una línea tras otra. La televisión analógica francesa dibujaba 625 líneas por imagen, a cincuenta medias imágenes por segundo, según la recomendación de la Unión Internacional de Telecomunicaciones que describe los sistemas de televisión del mundo. Antes, Francia había emitido en 819 líneas, el más fino de los formatos que cita Britannica, con el llamado sistema E, que la recomendación da como utilizado hasta 1984.

Estas medias imágenes se entrelazan. La primera coloca una línea de cada dos, dejando entre ellas un espacio vacío del mismo ancho; la segunda viene a llenar esos espacios. Se suceden lo bastante rápido para que el ojo solo vea una imagen (Britannica). De cerca, sin embargo, la estructura en líneas sigue siendo visible, y es lo que imita la capa. Para quien creció delante de una pantalla de tubo, unas pocas líneas bastan para decir «televisión», «consola», «monitor de sala de control».

Cuándo usarlas

Las líneas de trama hablan de la pantalla y de la máquina. Convienen a:

• un estudio creativo que trabaja en imagen de síntesis o en motion design, que reivindica una cultura de la pantalla;
• un transportista o una plataforma logística, cuya página se lee como un panel de control;
• una fábrica o una oficina técnica, donde la precisión y la medida van antes que la decoración;
• una sala de recreativos, un estudio de sonido, un festival de espíritu retro.

Tres maquetaciones del estudio las aplican por defecto. La maquetación Estudio 3D las combina con la halación: una pantalla encendida en la oscuridad. La maquetación Transporte y la maquetación Industria las llevan solas, en páginas hechas de cifras y de capacidades.

Cuándo prescindir de ellas. Una consulta de salud, un restaurante, una casa de huéspedes: todo lo que debe parecer cálido y humano gana sin líneas de trama. Evítalas también en una página cargada de texto fino, porque una línea cada cuatro píxeles atraviesa cada letra pequeña. Por último, no las combines con la trama de puntos: dos rejillas regulares superpuestas pueden producir ondulaciones parásitas, el moaré.

La dosis justa

En la biblioteca, las líneas de trama dibujan una línea de un píxel cada cuatro píxeles, en el color del texto del sitio al 40 %, y toda la capa se coloca al 18 % de opacidad. En una página oscura con texto claro, las líneas son claras; en una página clara con texto oscuro, son oscuras. Las líneas se quedan así dentro de la paleta.

Su separación está fijada en píxeles de pantalla: conserva la misma finura sea cual sea el tamaño del texto. La razón está escrita en la hoja de estilos de la biblioteca: unas líneas que crecieran con la tipografía perderían su finura de pantalla y se convertirían en una persiana.

Como las otras texturas, dejan desnuda la primera pantalla y suben a medida que se baja: el vídeo de bienvenida queda intacto. Y la regla de la biblioteca vale aquí como en todas partes: dos capas como mucho. Más allá, la imagen se ensucia, y ya nadie sabe cuál quitar.

Lo que cuestan

Muy poco. La capa es un degradado repetido, dibujado una vez por el navegador, sin ningún archivo que descargar, colocado en posición fija.

Está quieta. Los efectos de monitor animados, en los que una barra luminosa recorre la pantalla o las líneas parpadean, piden al navegador volver a dibujar una superficie a pantalla completa en cada imagen; la biblioteca no anima ninguna capa. Lo único que varía es la opacidad de las líneas durante el primer desplazamiento, y la opacidad cambia sin repintar la pantalla (web.dev).

Accesibilidad

• Contraste. Las líneas pasan sobre el texto como sobre la imagen. A la dosis de la biblioteca, pesan poco, pero se suman al fondo: mide el contraste del texto corriente en el lugar menos favorable, al menos 4,5 a 1 (WCAG 2.2, criterio 1.4.3), y relee a ojo la letra pequeña.
• Movimiento reducido. Cuando un visitante pide menos animación (prefers-reduced-motion), el grano y la escarcha desaparecen. Las líneas de trama se quedan, porque no se mueven.
• Sin destellos. El tubo parpadeaba a cincuenta medias imágenes por segundo. La capa conserva sus líneas y deja el parpadeo en el pasado: nada en ella destella.

Cómo están hechas

Un degradado lineal repetido, repeating-linear-gradient(), que va de arriba abajo: un píxel de color, tres píxeles transparentes, y el motivo vuelve a empezar hasta abajo de la pantalla (MDN). El color es el del texto del sitio, mezclado con la transparencia mediante color-mix().

.m.m--trame {
  opacity: calc(var(--trame, .18) * var(--m-voile, 1));
  background: repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--fg) 40%, transparent) 0 1px,
    transparent 1px 4px);
}

--trame lleva la intensidad, --m-voile la subida de la capa después de la primera pantalla. En una pantalla de alta densidad, un píxel CSS cubre dos o tres píxeles físicos: la proporción entre línea y separación sigue siendo la misma. En una pantalla escalada al 125 % o al 150 %, algunas líneas pueden parecer más gruesas que otras; mira la página en los aparatos de tus clientes antes de publicarla.

En el estudio

Las líneas de trama son una de las diez texturas de la biblioteca. Se eligen en la etapa «La textura», después del fondo.