2012 var CSS3 så nytt att det kändes som ett trick. Gradienter, rundade hörn och transformationer hade nyss landat i alla webbläsare, och vi ville veta hur långt de räckte. Så vi ritade med dem: en serie superhjältar (Superman, Batman, Wolverine, Spider-Man, Iron Man och Hulk), sedan R2-D2, sedan ett Donkey Kong Jr. Game & Watch. Inga bilder, ingen canvas, bara lådor, kanter och gradienter staplade tills de liknade något.
Varje hjälte tog ungefär en dag. R2-D2 tog fyra. Game & Watch tog en vecka, eftersom vi inte kunde låta bli att göra det responsivt.
I år gick vi tillbaka till alla åtta. Briefen till oss själva var enkel: samma motiv, fjorton år emellan, och ingen nostalgirabatt. Var och en gjordes om två gånger, i två mycket olika medier, och du kan se alla tre versionerna sida vid sida på Then & now.
Två nyversioner, två regelböcker
Renderad är originalens direkta ättling: ren HTML & CSS, fortfarande inga bilder, ingen SVG och ingen canvas. Det som förändrats är allt runt reglerna. Modern CSS ger oss lagrade gradienter med verklig färgblandning, clip-path för organiska silhuetter, blandningslägen, filter för mjukt ljus och anpassade egenskaper som låter ett enda värde styra en hel figur. Hjältarna från 2012 var platta urklipp. Hjältarna från 2026 har skulpterat ljus, texturerade dräkter och väder.
3D kastar regelboken. Varje verk skulpteras i kod med Blenders Python-API, exporteras som en enda modellfil och belyses live i webbläsaren med three.js. Du kan dra för att vrida dem, och varje verk gör något när du håller inne.
Samma motiv, fjorton år emellan, och ingen nostalgirabatt.
Varje verk gör något
En teckning som man bara kan titta på kändes som en missad chans, så varje nyversion har en idé du kan leka med:
- Supermans värmeseende följer din pekare och bränner där det landar.
- Batman väntar på ett tak i regnet; håll inne så lyser fladdermussignalen upp molnen.
- Wolverines klor kommer fram, med ljudeffekten som hör till.
- Spider-Man skjuter ett nät.
- Iron Man laddar sin repulsor och unibeam, och ansiktsplåten fälls upp och visar Tony under den.
- Hulk håller sig lugn tills du håller inne, sedan vrålar han.
- R2-D2 piper, och i 3D projicerar han ett hologram.
- Game & Watch går att spela: ett LCD-spel i tre enheter, originalet Wide Screen, en Game Boy och en Mini Classic-nyckelring.
Det här är små saker, men de är skillnaden mellan en illustration och en mjukvara, och mjukvara är det vi gör.
Vad fjorton år förändrade
Det ärliga svaret är: mindre om CSS än om hur vi arbetar. 2012 var varje gradient en gissning, uppdaterad och justerad tills den såg rätt ut. 2026 kunde vi se att en detalj var fel, beskriva varför och åtgärda orsaken. När Spider-Mans linser såg förskjutna ut var orsaken inte teckningen: den ena linsen var en spegelvänd kopia av den andra, vänd kring en förskjuten pivotpunkt. Lösningen var en enda siffra.
3D-verken lärde oss samma läxa i större skala. Att skulptera ett ansikte med bara kod är svårt, och våra första huvuden var grova. I stället för att kämpa emot började vi från Blender Studios fria mänskliga basmodeller under CC0 och formade om dem med skript till varje figur. Händerna gick samma väg. Vi skrev mer om den processen i Att skulptera superhjältar i kod med Blender.
En museihylla för hela samlingen
Åtta verk i två medier är mycket att ta in, så högst upp på Then & now finns en museihylla: alla åtta 3D-verk som små statyer på ett långsamt snurrande snurrbord, var och en under sin egen strålkastare. Statyerna är lättviktsversioner av de fullständiga modellerna, laddade först när sidan är i vila, så hyllan kostar nästan ingenting innan du scrollar. Klicka på en så hoppar du direkt till dess rad, där originalet från 2012 står bredvid båda nyversionerna.
Det finns också en hemlighet. Om du kan koden, prova den.
Varför bry sig
Labs har alltid varit stället där vi testar saker innan vi behöver dem. Hjältarna från 2012 lärde oss vad CSS kunde göra flera år innan vi använde teknikerna i kunduppdrag. Nyversionerna från 2026 gjorde samma sak för procedurell 3D, ljussättning i realtid och interaktiva verk som ändå laddar snabbt på en telefon. Nästa gång en kund behöver något som rör sig vet vi redan var gränserna går.
Ta en titt på hela samlingen, eller börja med Superman i 3D och håll inne.