In 2012 was CSS3 nieuw genoeg om als een truc te voelen. Verlopen, afgeronde hoeken en transformaties waren net in elke browser beschikbaar, en we wilden weten hoe ver je ermee kon gaan. Dus tekenden we ermee: een reeks superhelden (Superman, Batman, Wolverine, Spider-Man, Iron Man en Hulk), daarna R2-D2, daarna een Donkey Kong Jr. Game & Watch. Geen afbeeldingen, geen canvas, alleen vakjes, randen en verlopen, gestapeld tot ze op iets leken.
Elke held kostte ongeveer een dag. R2-D2 kostte er vier. De Game & Watch kostte een week, omdat we het niet konden laten hem responsief te maken.
Dit jaar gingen we terug naar alle acht. De opdracht aan onszelf was eenvoudig: dezelfde onderwerpen, veertien jaar uit elkaar, en geen nostalgiekorting. Elk stuk werd twee keer opnieuw gemaakt, in twee heel verschillende media, en je ziet alle drie de versies naast elkaar op Toen & nu.
Twee remakes, twee regelboeken
Gerenderd is de directe opvolger van de originelen: pure HTML & CSS, nog steeds geen afbeeldingen, geen SVG en geen canvas. Wat er veranderd is, is alles rond de regels. Moderne CSS geeft ons gelaagde verlopen met echte kleurmenging, clip-path voor organische silhouetten, blend modes, filters voor zacht licht en custom properties waarmee één waarde een heel personage aanstuurt. De helden van 2012 waren platte uitknipsels. Die van 2026 hebben geboetseerd licht, getextureerde pakken en weer.
3D gooit het regelboek overboord. Elk stuk is in code geboetseerd met de Python-API van Blender, geëxporteerd als één modelbestand en live belicht in de browser met three.js. Je kunt ze slepen om te draaien, en ze doen allemaal iets als je ingedrukt houdt.
Dezelfde onderwerpen, veertien jaar uit elkaar, en geen nostalgiekorting.
Elk stuk doet iets
Een tekening waar je alleen naar kunt kijken, voelde als een gemiste kans, dus elke remake heeft één idee waarmee je kunt spelen:
- De hittestraal van Superman volgt je aanwijzer en brandt waar hij landt.
- Batman wacht op een dak in de regen; houd ingedrukt en het bat-signal verlicht de wolken.
- De klauwen van Wolverine schieten naar buiten, met het bijpassende geluidseffect.
- Spider-Man schiet een web.
- Iron Man laadt zijn repulsor en unibeam op, en zijn gezichtsplaat gaat omhoog om Tony eronder te tonen.
- Hulk blijft kalm tot je ingedrukt houdt, dan brult hij.
- R2-D2 piept, en in 3D projecteert hij een hologram.
- De Game & Watch is speelbaar: één lcd-game in drie toestellen, de originele Wide Screen, een Game Boy en een Mini Classic-sleutelhanger.
Het zijn kleine dingen, maar ze maken het verschil tussen een illustratie en een stuk software, en software is wat we maken.
Wat veertien jaar veranderde
Het eerlijke antwoord: minder over CSS dan over hoe we werken. In 2012 was elk verloop een gok, ververst en bijgesteld tot het goed oogde. In 2026 konden we zien dat een detail niet klopte, beschrijven waarom, en de oorzaak oplossen. Toen de lenzen van Spider-Man niet gecentreerd leken, lag dat niet aan de tekening: de ene lens was een gespiegelde kopie van de andere, omgedraaid rond een draaipunt dat niet in het midden lag. De oplossing was één getal.
De 3D-stukken leerden dezelfde les op grotere schaal. Een gezicht boetseren met alleen code is moeilijk, en onze eerste hoofden waren ruw. In plaats van ertegen te vechten, begonnen we vanuit de gratis CC0-basismeshes van mensen van Blender Studio en vormden die met een script om tot elk personage. Met handen ging het net zo. We schreven meer over dat proces in Superhelden boetseren in code met Blender.
Een museumplank voor allemaal
Acht stukken in twee media is veel om te bevatten, dus bovenaan Toen & nu staat een museumplank: alle acht 3D-stukken als kleine beeldjes op een langzaam draaiend plateau, elk onder een eigen spot. De beeldjes zijn lichte versies van de volledige modellen, die pas laden als de pagina stil is, dus de plank kost bijna niets voordat je scrolt. Klik op een beeldje en je springt meteen naar de bijbehorende rij, waar het origineel uit 2012 naast beide remakes staat.
Er is ook een geheim. Als je de code kent, probeer het eens.
Waarom de moeite
In Labs proberen we altijd dingen uit voordat we ze nodig hebben. De helden van 2012 leerden ons wat CSS kon, jaren voordat we die technieken in klantwerk gebruikten. De remakes van 2026 deden hetzelfde voor procedurele 3D, realtime belichting en interactieve stukken die toch snel laden op een telefoon. Als een klant de volgende keer iets nodig heeft dat beweegt, weten we al waar de grenzen liggen.
Bekijk de hele set, of begin met de 3D-Superman en houd ingedrukt.