2012 war CSS3 neu genug, um sich wie ein Trick anzufühlen. Verläufe, abgerundete Ecken und Transformationen waren gerade erst in allen Browsern angekommen, und wir wollten wissen, wie weit sie reichen. Also haben wir damit gezeichnet: eine Serie von Superhelden (Superman, Batman, Wolverine, Spider-Man, Iron Man und Hulk), dann R2-D2, dann ein Donkey Kong Jr. Game & Watch. Keine Bilder, kein Canvas, nur Boxen, Rahmen und Verläufe, gestapelt, bis sie nach etwas aussahen.
Jeder Held dauerte etwa einen Tag. R2-D2 dauerte vier. Das Game & Watch eine Woche, weil wir nicht widerstehen konnten, es responsive zu machen.
Dieses Jahr sind wir zu allen acht zurückgekehrt. Unser Auftrag an uns selbst war einfach: dieselben Motive, vierzehn Jahre auseinander, und kein Nostalgie-Rabatt. Jedes wurde zweimal neu gemacht, in zwei sehr unterschiedlichen Medien, und auf Then & now siehst du alle drei Versionen nebeneinander.
Zwei Remakes, zwei Regelwerke
Gerendert ist der direkte Nachfahre der Originale: reines HTML & CSS, immer noch keine Bilder, kein SVG und kein Canvas. Geändert hat sich alles rund um die Regeln. Modernes CSS bietet geschichtete Verläufe mit echter Farbmischung, clip-path für organische Silhouetten, Mischmodi, Filter für weiches Licht und Custom Properties, mit denen ein einziger Wert eine ganze Figur steuert. Die Helden von 2012 waren flache Ausschnitte. Die von 2026 haben modelliertes Licht, texturierte Anzüge und Wetter.
3D wirft das Regelwerk über Bord. Jedes Stück wird in Code mit der Python-API von Blender modelliert, als eine einzige Modelldatei exportiert und live im Browser mit three.js beleuchtet. Du kannst sie per Ziehen drehen, und jedes macht etwas, wenn du gedrückt hältst.
Dieselben Motive, vierzehn Jahre auseinander, und kein Nostalgie-Rabatt.
Jedes Stück macht etwas
Eine Zeichnung, die man nur ansehen kann, fühlte sich wie eine vertane Chance an, also hat jedes Remake eine Idee, mit der du spielen kannst:
- Supermans Hitzeblick folgt deinem Zeiger und brennt dort, wo er landet.
- Batman wartet im Regen auf einem Dach; halte gedrückt, und das Bat-Signal erleuchtet die Wolken.
- Wolverines Krallen fahren aus, mit passendem Soundeffekt.
- Spider-Man verschießt ein Netz.
- Iron Man lädt Repulsor und Unibeam auf, und seine Gesichtsplatte hebt sich und zeigt Tony darunter.
- Hulk bleibt ruhig, bis du gedrückt hältst, dann brüllt er.
- R2-D2 piept, und in 3D projiziert er ein Hologramm.
- Das Game & Watch ist spielbar: ein LCD-Spiel in drei Geräten, dem originalen Wide Screen, einem Game Boy und einem Mini-Classic-Schlüsselanhänger.
Das sind Kleinigkeiten, aber sie machen den Unterschied zwischen einer Illustration und einer Software, und Software ist das, was wir machen.
Was vierzehn Jahre verändert haben
Die ehrliche Antwort: weniger an CSS als daran, wie wir arbeiten. 2012 war jeder Verlauf eine Vermutung, neu geladen und angepasst, bis er stimmte. 2026 konnten wir sehen, dass ein Detail falsch war, beschreiben warum und die Ursache beheben. Als die Linsen von Spider-Man nicht mittig wirkten, lag es nicht an der Zeichnung: Eine Linse war eine gespiegelte Kopie der anderen, um einen außermittigen Drehpunkt geklappt. Die Lösung war eine einzige Zahl.
Die 3D-Stücke haben dieselbe Lektion in größerem Maßstab gelehrt. Ein Gesicht nur mit Code zu modellieren ist schwer, und unsere ersten Köpfe waren grob. Statt dagegen anzukämpfen, haben wir mit den kostenlosen CC0-Basis-Meshes von Blender Studio begonnen und sie per Skript zu jeder Figur umgeformt. Mit den Händen ebenso. Mehr über diesen Prozess steht in Superhelden in Code modellieren, mit Blender.
Ein Museumsregal für alle
Acht Stücke in zwei Medien sind viel auf einmal, deshalb ist der Kopf von Then & now ein Museumsregal: alle acht 3D-Stücke als kleine Statuen auf einem langsam drehenden Drehteller, jede unter ihrem eigenen Spot. Die Statuen sind leichte Versionen der vollen Modelle und laden erst, wenn die Seite ruht, sodass das Regal fast nichts kostet, bevor du scrollst. Klick auf eine, und du springst direkt zu ihrer Zeile, wo das Original von 2012 neben beiden Remakes steht.
Es gibt auch ein Geheimnis. Wenn du den Code kennst, probier ihn aus.
Warum der Aufwand
Die Labs waren schon immer der Ort, an dem wir Dinge ausprobieren, bevor wir sie brauchen. Die Helden von 2012 haben uns gezeigt, was CSS kann, Jahre bevor wir diese Techniken in Kundenprojekten eingesetzt haben. Die Remakes von 2026 haben dasselbe für prozedurales 3D, Echtzeitbeleuchtung und interaktive Stücke getan, die auch auf dem Smartphone schnell laden. Wenn ein Kunde das nächste Mal etwas braucht, das sich bewegt, kennen wir die Grenzen schon.
Schau dir das ganze Set an oder fang mit dem 3D-Superman an und halte gedrückt.