Tu as peut-être remarqué la peinture. Sur ce site, chaque bord d’encre fait pousser des coulures qui se remplissent, s’alourdissent, s’étirent en un fil et lâchent, tout comme chaque logo du bandeau des marques pour lesquelles on travaille. Les gouttes tombent sur ce qui se trouve dessous (une photo, une carte, un bouton) et s’écrasent. Sur une surface plane, elles restent en place. Sur une surface inclinée, elles glissent, débordent, coulent le long du bord et continuent de goutter. Tout finit en flaque au-dessus du pied de page, qui monte tant que tu restes.
Notre logo est une coulure, alors le site devait couler. Pas une vidéo en boucle : de la vraie peinture, calculée en direct dans ton navigateur. On l’a construit avec Claude Code, comme on peut l’espérer d’une agence qui affiche l’IA sur sa devanture. Afficher des coulures, c’était facile. Les rendre assez bonnes pour les laisser tourner sur un site en ligne, ça, c’était le vrai boulot, et c’est le sujet de cette note.
Une peinture qui sait où elle est
Chaque coulure est un petit jouet de physique. La peinture s’accumule dans le bulbe, le bulbe s’alourdit, et plus il est lourd, plus la coulure s’allonge vite, jusqu’à s’étrangler et lâcher. Une goutte qui tombe lit le vrai contour de ce qu’elle touche, coins arrondis et photos inclinées compris : sur un bouton rond, la peinture épouse le bouton. Elle sent aussi la page. Scrolle d’un coup sec et les gouttes suspendues se décrochent. Survole un logo sur la page d’accueil : il se soulève, et la peinture avec lui.
Avant d’avoir le droit d’aller sur le site en ligne, tout ça devait respecter quatre règles :
- Jamais dans les pattes. Elle ne doit ni bloquer un clic, ni cacher du texte, ni ralentir la page.
- Immobile sur demande. Si ton appareil demande moins d’animations, ou si JavaScript est désactivé, tu as la page au repos, coulures peintes dessus.
- Peinture en aplat. Des bords nets et le même petit reflet que le logo. Pas de flou, pas de dégradés.
- En veille quand rien ne bouge.
Là où ça s’est corsé
D’abord, les formes rondes. La plupart de ces logos sont posés dans des boutons en forme de pilule, et la peinture adore ramper autour de leurs bouts arrondis. C’est précisément là que les coulures ont commencé à faire des pointes acérées, comme taillées aux ciseaux. Le code qui dessinait une goutte suspendue partait du principe que la surface au-dessus était plate. Sous une pilule, c’est le cas. Sur la courbe, il dessinait un coin qui remontait la pente et une lamelle de peinture en travers du bouton lui-même. La solution : laisser la peinture rejoindre la vraie courbe des deux côtés, comme une bille glissée entre la goutte et la surface toucherait les deux.
Puis est venu le moment où le navigateur a failli fondre. Plus tu restais, plus la page s’alourdissait. La peinture s’empilait sur chaque photo et chaque carte croisées en scrollant, et survoler un logo faisait saccader le bandeau. La première version suivait une idée que la plupart des développeurs valideraient : dessiner la peinture sur plein de petits canvas et ne redessiner que les petits bouts qui changent. C’était l’inverse. Chaque canvas coûte quelque chose à la puce graphique rien qu’en existant et en étant redessiné, aussi petit soit-il, et après une longue visite, il y en avait environ 250. Moins de canvas, mais plus grands, et ne plus peindre ce que personne ne voit : le compte est tombé à environ 80. Dans un test qui fait défiler toute la page et survole une douzaine de logos, le travail graphique a baissé de 39 % et les longs à-coups sont passés de onze à un.
La mesure avait son propre piège. Notre première lecture disait que la page perdait 19 images par seconde. Faux. Les coulures tournent volontairement à 60 images par seconde, sur un écran qui se rafraîchit 120 fois par seconde, et le navigateur comptait chaque image sautée comme un échec. On aurait facilement pu passer une journée à optimiser pour faire baisser ce chiffre. Vérifie ce que veut dire un chiffre avant de lui courir après.
Un site peut avoir de la personnalité et rester rapide. L’astuce : traiter la partie ludique avec la même rigueur que les parties ennuyeuses. La tester dans un vrai navigateur, respecter les gens qui ne veulent pas d’animation, et la garder à l’écart de ce que le visiteur est venu faire.
Envie que ton site à toi ait l’air un peu plus vivant ?