L’effet poussière et rayures sur un site web

La poussière, ce sont de fines rayures verticales et quelques points clairs posés sur toute la page, comme sur un tirage ressorti d’un carton ou une vieille copie de film. Le grain casse les aplats ; la poussière raconte autre chose : un objet qui a vécu, qu’on a manipulé, projeté, rangé. Elle donne de l’âge à une page neuve.

Sans

Poussière

Sur la démonstration, cherchez les traits très fins qui descendent d’un bord à l’autre de l’image, et les quelques points qui les accompagnent. À l’intensité par défaut, on les découvre plus qu’on ne les voit.

D’où vient l’effet

Une pellicule de cinéma s’use à chaque passage. Les Archives nationales des États-Unis le rappellent : un film se raye le plus souvent quand on le manipule ou qu’on le projette, et le couloir encrassé d’un projecteur peut le marquer à vie en une seule séance. Comme la pellicule défile toujours dans le même sens, la rayure suit sa longueur : à l’écran, elle devient une ligne verticale qui traverse l’image d’un plan à l’autre.

Toutes les rayures n’ont pas la même couleur. Selon qu’elle touche le support plastique ou l’émulsion, et selon qu’il s’agit de l’original ou d’une copie, une rayure ressort noire ou blanche. Et une fois l’émulsion arrachée, l’image perdue ne revient plus : seule une restauration numérique peut masquer le dégât, en l’imitant (NARA, 2017).

En photographie, le défaut est aussi ancien que le film en rouleau. En 1933, le magazine britannique Amateur Photographer le comptait parmi les plus courants des négatifs en rouleau : une série de rayures parallèles, qu’il comparait à des fils téléphoniques, causées le plus souvent par un grain de sable resté dans l’appareil, surtout au bord de la mer.

La bibliothèque de l’atelier a retenu des marques blanches : quatre traits très fins et cinq poussières, de quoi évoquer la copie usée sans en reproduire les dégâts.

Quand le poser

Deux des vingt-quatre mises en page prêtes de l’atelier l’emploient :

• la mise en page Portfolio, pour les photographes, les illustrateurs et les réalisateurs. Le travail occupe l’écran, et la poussière rappelle le tirage et la salle de projection ;
• la mise en page Label, pour les labels, les artistes et les salles, où elle accompagne la halation : la pochette usée, le concert filmé sur pellicule.

Elle va aussi aux métiers qui vivent de l’ancien ou du fait main : un disquaire, une librairie d’occasion, un brocanteur, un ciné-club, un tatoueur au style rétro, un encadreur. Elle aime les palettes sombres : des traits blancs à faible opacité se voient sur un fond noir, et disparaissent presque sur un fond blanc.

Il vaut mieux s’en passer :

• quand la page doit inspirer une confiance clinique : un cabinet de santé, un notaire, un logiciel de gestion. Des rayures y passent pour de la négligence ;
• avec le grain. Les deux racontent la pellicule, chacun à sa façon, et ensemble ils chargent trop l’image : la bibliothèque le note elle-même ;
• sur une page par ailleurs très lisse, où un trait fin isolé peut faire croire à un défaut d’affichage plutôt qu’à un choix.

Le bon dosage

Dans la bibliothèque, la poussière est posée à 16 % d’opacité, en mode de fusion normal : les traits sont blancs, ils éclaircissent un peu ce qu’ils croisent, et rien d’autre. C’est volontairement bas. À cette dose, on les remarque au deuxième regard ; plus fort, la page prend un parti pris d’archive qu’il faut alors assumer jusqu’au bout.

Le motif est une petite tuile de 220 pixels sur 340, répétée sur toute la page. Sur un grand écran, les mêmes traits reviennent donc à intervalles réguliers, ce que ne font jamais les vraies rayures. À 16 %, il faut chercher cette régularité pour la voir ; à forte dose, elle se remarque.

La règle des deux calques au plus tient ici comme ailleurs : au troisième, l’image se salit, et plus personne ne sait lequel retirer. La mise en page Label est déjà à ce plafond, avec la halation. Et le second calque, choisissez-le autre que le grain, pour la raison dite plus haut.

Ce qu’il coûte

Très peu. Le motif est une image SVG écrite directement dans la feuille de style, sous la forme d’une adresse data: : le fichier est dans l’adresse même, et il n’y a rien à télécharger (MDN). Le calque est en position fixe, ne capte ni clic ni défilement, et ne change jamais.

Sur un vrai film, les rayures sautent et les poussières passent d’une image à l’autre. La bibliothèque ne l’imite pas, et c’est voulu : un navigateur n’anime à peu de frais que la position et l’opacité d’un calque (web.dev). Une texture plein écran qui changerait à chaque image l’obligerait à repeindre tout l’écran, soixante fois par seconde. Le mouvement vient de la vidéo dessous ; la poussière reste où elle est, et ne se lève qu’à mesure qu’on quitte le premier écran, pour laisser la vidéo d’accueil nue.

L’accessibilité

• Le contraste. Les traits traversent tout, texte compris. À 16 %, ils changent à peine la couleur d’une lettre, mais vérifiez le contraste à l’endroit le moins favorable : au moins 4,5 pour 1 pour un texte courant, et 3 pour 1 pour un grand titre (W3C, WCAG 2.2).
• Le mouvement réduit. Quand le visiteur demande à son appareil moins d’animations (prefers-reduced-motion), la bibliothèque retire le grain et le givre. La poussière reste : elle ne bouge pas.
• Aucun clignotement. Les rayures d’un vieux film sautillent ; ici, rien ne vacille. Une page ne doit pas flasher plus de trois fois par seconde, sous peine de déclencher des crises chez les personnes photosensibles (W3C, critère 2.3.1), et ce calque ne flashe jamais.

Comment il est fait

La tuile est un petit dessin SVG : quatre traits verticaux de six dixièmes de pixel d’épaisseur, en blanc légèrement transparent, et cinq cercles blancs de moins d’un pixel de rayon, ou à peine plus. Chaque commande M18 0v340 part du haut de la tuile, à 18 pixels du bord, et trace un trait jusqu’en bas :

<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>

Ce dessin est inscrit dans la feuille de style comme image de fond, répétée, d’un calque posé par-dessus la page. L’opacité multiplie le réglage du calque par le « voile » qui le retient sur le premier écran :

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

Dans l’atelier

La poussière fait partie des dix matières de la bibliothèque. On la choisit à l’étape « La matière », après le fond, seule ou avec une seconde matière.