En 2012, le CSS3 était assez nouveau pour ressembler à un tour de passe-passe. Les dégradés, les coins arrondis et les transformations venaient tout juste d’arriver dans tous les navigateurs, et nous voulions savoir jusqu’où ils pouvaient aller. Alors nous avons dessiné avec : une série de super-héros (Superman, Batman, Wolverine, Spider-Man, Iron Man et Hulk), puis R2-D2, puis une Game & Watch Donkey Kong Jr. Pas d’images, pas de canvas, juste des boîtes, des bordures et des dégradés empilés jusqu’à ressembler à quelque chose.
Chaque héros a pris environ une journée. R2-D2 en a pris quatre. La Game & Watch a pris une semaine, parce que nous n’avons pas pu résister à l’envie de la rendre responsive.
Cette année, nous sommes revenus sur les huit. Notre consigne était simple : les mêmes sujets, à quatorze ans d’écart, et aucune indulgence pour la nostalgie. Chacun a été refait deux fois, dans deux médiums très différents, et vous pouvez voir les trois versions côte à côte sur Then & now.
Deux remakes, deux règles du jeu
Rendered est le descendant direct des originaux : du pur HTML & CSS, toujours sans images, sans SVG et sans canvas. Ce qui a changé, c’est tout ce qui entoure les règles. Le CSS moderne offre des dégradés superposés avec un vrai mélange des couleurs, clip-path pour des silhouettes organiques, des modes de fusion, des filtres pour une lumière douce et des propriétés personnalisées qui permettent à une seule valeur de piloter tout un personnage. Les héros de 2012 étaient des découpages à plat. Ceux de 2026 ont une lumière sculptée, des costumes texturés et une météo.
La 3D jette le règlement par la fenêtre. Chaque pièce est sculptée en code avec l’API Python de Blender, exportée dans un seul fichier de modèle et éclairée en direct dans le navigateur avec three.js. Vous pouvez les faire tourner, et chacune fait quelque chose quand vous maintenez.
Les mêmes sujets, à quatorze ans d’écart, et aucune indulgence pour la nostalgie.
Chaque pièce fait quelque chose
Un dessin qu’on ne peut que regarder nous semblait une occasion manquée, alors chaque remake a une idée avec laquelle jouer :
- La vision thermique de Superman suit votre pointeur et brûle là où elle touche.
- Batman attend sur un toit sous la pluie ; maintenez et le bat-signal illumine les nuages.
- Les griffes de Wolverine sortent, avec l’effet sonore qui va avec.
- Spider-Man lance une toile.
- Iron Man charge son répulseur et son unirayon, et son masque se lève pour montrer Tony dessous.
- Hulk reste calme jusqu’à ce que vous mainteniez, puis il rugit.
- R2-D2 bipe, et en 3D il projette un hologramme.
- La Game & Watch est jouable : un jeu LCD dans trois appareils, la Wide Screen d’origine, une Game Boy et un porte-clés Mini Classic.
Ce sont de petites choses, mais elles font la différence entre une illustration et un logiciel, et c’est du logiciel que nous faisons.
Ce que quatorze ans ont changé
La réponse honnête : moins le CSS que notre façon de travailler. En 2012, chaque dégradé était un pari, rafraîchi et ajusté jusqu’à ce qu’il ait l’air juste. En 2026, nous pouvions voir qu’un détail clochait, expliquer pourquoi et corriger la cause. Quand les lentilles de Spider-Man semblaient décentrées, ce n’était pas le dessin : une lentille était une copie en miroir de l’autre, retournée autour d’un pivot décentré. La correction tenait en un seul chiffre.
Les pièces 3D ont enseigné la même leçon à plus grande échelle. Sculpter un visage uniquement avec du code est difficile, et nos premières têtes étaient grossières. Plutôt que de lutter, nous sommes partis des maillages humains de base gratuits en CC0 de Blender Studio, remodelés par script pour chaque personnage. Les mains ont suivi le même chemin. Nous avons détaillé ce processus dans Sculpter des super-héros en code avec Blender.
Une étagère de musée pour tout le monde
Huit pièces dans deux médiums, c’est beaucoup à absorber, alors le haut de Then & now est une étagère de musée : les huit pièces 3D en statuettes sur un plateau qui tourne lentement, chacune sous son propre projecteur. Les statuettes sont des versions allégées des modèles complets, chargées seulement une fois la page au repos, si bien que l’étagère ne coûte presque rien avant que vous ne fassiez défiler. Cliquez sur l’une d’elles et vous arrivez directement à sa ligne, où l’original de 2012 côtoie les deux remakes.
Il y a aussi un secret. Si vous connaissez le code, essayez-le.
Pourquoi s’en donner la peine
Les Labs ont toujours été l’endroit où nous essayons des choses avant d’en avoir besoin. Les héros de 2012 nous ont appris ce que le CSS pouvait faire des années avant que nous utilisions ces techniques pour nos clients. Les remakes de 2026 ont fait de même pour la 3D procédurale, l’éclairage en temps réel et des pièces interactives qui se chargent toujours vite sur téléphone. La prochaine fois qu’un client aura besoin de quelque chose qui bouge, nous saurons déjà où sont les limites.
Jetez un œil à l’ensemble, ou commencez par le Superman 3D et maintenez.