L’effet fuite de lumière sur un site web

Une fuite de lumière est une coulée chaude qui entre dans l’image par un coin, comme si le dos de l’appareil s’était entrouvert pendant la prise de vue. Sur un site, elle donne une heure à la page : une fin d’après-midi, un été, un souvenir. Des dix matières de la bibliothèque de l’atelier, c’est la seule qui soit orientée. Le grain et la trame couvrent l’écran de façon uniforme ; la fuite lui donne un haut et un bas, un côté d’où vient le jour.

Sans

Fuite de lumière

L’affiche de la démonstration est froide, ardoise et cobalt, et la coulée y vire au rose poudré dans le coin supérieur droit. C’est exactement la limite que signale la bibliothèque : sur un bleu froid, la fuite se défend mal.

D’où vient l’effet

En photographie argentique, la pellicule réagit à toute lumière : quand l’appareil n’est plus étanche, la lumière parasite voile le film. En 1933, le magazine britannique Amateur Photographer en dressait déjà la liste pour les négatifs en rouleau : un dos qui ferme mal, la lumière qui passe par la clé d’avancement du film, un point usé dans le soufflet d’un appareil pliant. L’article donnait aussi un indice pour trouver le coupable : quand le voile touche l’image mais épargne les bords du négatif, la lumière est entrée par l’appareil.

Le défaut est ensuite devenu un style. Dans les années 1990, la lomographie, née à Vienne, a célébré ce que la photographie soignée cherchait à éviter : le flou, la surexposition, le vignettage appuyé, les fuites de lumière. Le Holga, un appareil bon marché au boîtier de plastique sorti en 1982, a trouvé son public grâce à ce mouvement. Dans les années 2000 et 2010, des applications pour téléphone, Hipstamatic et Instagram en tête, ont imité ce rendu avec des filtres qui ajoutaient de fausses fuites de lumière (PetaPixel, 2024). La bibliothèque en reprend la version apprivoisée : une lumière chaude, qui ne mange jamais le sujet.

Quand le poser

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

• la mise en page Hébergement, pour les camps, les gîtes et les hôtels. Le fond y change de scène à mesure qu’on descend, et la fuite y ajoute la lumière d’une fin de journée ;
• la mise en page Événement, pour les festivals, les salons et les soirées, où elle accompagne le grain ;
• la mise en page Bien-être, pour le yoga, le massage et les thérapies, où elle réchauffe la texture papier.

Elle va aussi aux métiers qui racontent un moment : une chambre d’hôtes, un photographe de mariage, un glacier de bord de mer, une guinguette. Elle aime les palettes chaudes, ocres, rouges brique, orangés, et les vidéos tournées en lumière dorée.

Il vaut mieux s’en passer :

• sur une palette froide. La coulée prend sa teinte dans la couleur d’accent du site, mêlée à un orangé pâle : sur une image bleue, elle tourne au rose poudré, et avec un accent bleu, à un halo lavande qui n’évoque plus le soleil ;
• quand le coin supérieur droit porte quelque chose d’important. Le calque y est le plus fort, et c’est souvent là que se trouve le bouton de la navigation : vérifiez qu’il se lit toujours ;
• sur un site qui doit paraître neutre et précis : un cabinet médical, un logiciel, un bureau d’études. Une lumière parasite y passe pour un défaut.

Le bon dosage

Dans la bibliothèque, la fuite est posée à 28 % d’opacité, en mode de fusion superposition (screen). Ce mode ne peut qu’éclaircir : là où le calque est noir, rien ne change, et là où il est clair, l’image s’illumine, comme deux projecteurs braqués sur le même écran (MDN).

La lumière part du coin supérieur droit. Un large dégradé teinté d’accent et d’orangé pâle s’y étale, et un point presque blanc, un peu décalé vers l’intérieur, fait le cœur de la brûlure. À 28 %, on la remarque sans qu’elle couvre l’image ; plus fort, elle commence à délaver ce qui passe dessous.

La règle des deux calques au plus vaut ici comme ailleurs : au troisième, l’image se salit, et plus personne ne sait lequel retirer. Les mises en page Événement et Bien-être sont déjà à ce plafond, avec le grain pour l’une, le papier pour l’autre. Évitez aussi de doubler la lumière : la halation, qui prend elle aussi la couleur d’accent en fusion screen, ferait briller la page deux fois.

Ce qu’il coûte

Presque rien. Le calque est fait de deux dégradés radiaux que le navigateur dessine lui-même : aucun fichier à télécharger, aucune image à décoder. Il est posé en position fixe, et ne capte ni clic ni défilement.

Surtout, il ne bouge pas. Un navigateur sait animer à peu de frais la position et l’opacité d’un calque ; presque tout le reste l’oblige à repeindre (web.dev), et une lumière qui palpiterait sur tout l’écran le ferait repeindre à chaque image. Seule son intensité change, au début : le premier écran reste nu, pour laisser la vidéo d’accueil intacte, et la fuite se lève à mesure qu’on descend.

L’accessibilité

• Le contraste. La fusion screen éclaircit tout ce qu’elle touche, texte compris. Dans le coin éclairé, un texte perd du contraste, qu’il soit clair sur fond sombre ou foncé sur fond clair. Les règles d’accessibilité demandent au moins 4,5 pour 1 pour un texte courant, et 3 pour 1 pour un grand titre (W3C, WCAG 2.2) : mesurez-le à l’endroit le plus lumineux.
• 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 fuite reste : elle est immobile, et rien en elle ne relève du mouvement.
• Aucun clignotement. 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). La fuite ne clignote jamais, et ne vacille pas comme une flamme.

Comment il est fait

Deux dégradés radiaux, radial-gradient(), centrés sur le coin supérieur droit d’un calque posé par-dessus la page. La couleur du premier est calculée par color-mix() : 60 % de la couleur d’accent du site, 40 % d’un orangé pâle. Le second est un blanc chaud. Le tout passe en fusion screen, et l’opacité multiplie le réglage du calque par le « voile » qui le retient sur le premier écran :

.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%);
}

Parce que la teinte vient de --accent, changer la couleur d’accent du site change la couleur de la fuite : elle appartient toujours à la palette.

Dans l’atelier

La fuite de lumiè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.