Nel 2012 il CSS3 era abbastanza nuovo da sembrare un trucco. Gradienti, angoli arrotondati e trasformazioni erano appena arrivati in tutti i browser, e volevamo capire fin dove potevano spingersi. Così ci abbiamo disegnato: una serie di supereroi (Superman, Batman, Wolverine, Spider-Man, Iron Man e Hulk), poi R2-D2, poi un Game & Watch di Donkey Kong Jr. Niente immagini, niente canvas, solo riquadri, bordi e gradienti sovrapposti finché non sembravano qualcosa.
Ogni eroe ha richiesto circa un giorno. R2-D2 ne ha richiesti quattro. Il Game & Watch una settimana, perché non abbiamo resistito a renderlo responsive.
Quest’anno siamo tornati su tutti e otto. Il brief che ci siamo dati era semplice: stessi soggetti, a quattordici anni di distanza, e nessuno sconto per la nostalgia. Ognuno è stato rifatto due volte, in due mezzi molto diversi, e puoi vedere tutte e tre le versioni fianco a fianco su Then & now.
Due remake, due regolamenti
Renderizzato è il diretto discendente degli originali: puro HTML & CSS, ancora niente immagini, niente SVG e niente canvas. Ciò che è cambiato è tutto ciò che sta intorno alle regole. Il CSS moderno ci dà gradienti sovrapposti con vera miscelazione dei colori, clip-path per sagome organiche, modalità di fusione, filtri per una luce morbida e proprietà personalizzate che permettono a un solo valore di guidare un intero personaggio. Gli eroi del 2012 erano ritagli piatti. Quelli del 2026 hanno luce scolpita, tute con texture e meteo.
3D butta via il regolamento. Ogni pezzo è scolpito in codice con l’API Python di Blender, esportato come un unico file di modello e illuminato dal vivo nel browser con three.js. Puoi trascinarli per ruotarli, e ognuno fa qualcosa quando tieni premuto.
Stessi soggetti, a quattordici anni di distanza, e nessuno sconto per la nostalgia.
Ogni pezzo fa qualcosa
Un disegno che si può solo guardare ci sembrava un’occasione persa, così ogni remake ha un’idea con cui giocare:
- La vista calorifica di Superman segue il puntatore e brucia dove si posa.
- Batman aspetta su un tetto sotto la pioggia; tieni premuto e il bat-segnale illumina le nuvole.
- Gli artigli di Wolverine escono, con l’effetto sonoro adatto.
- Spider-Man spara una ragnatela.
- Iron Man carica il repulsore e l’unibeam, e la sua maschera si solleva mostrando Tony sotto.
- Hulk resta calmo finché non tieni premuto, poi ruggisce.
- R2-D2 emette i suoi bip, e in 3D proietta un ologramma.
- Il Game & Watch è giocabile: un gioco LCD in tre dispositivi, l’originale Wide Screen, un Game Boy e un portachiavi Mini Classic.
Sono piccole cose, ma fanno la differenza tra un’illustrazione e un software, e il software è ciò che facciamo.
Cosa hanno cambiato quattordici anni
La risposta onesta è: meno il CSS che il nostro modo di lavorare. Nel 2012 ogni gradiente era un tentativo, ricaricato e ritoccato finché non sembrava giusto. Nel 2026 potevamo vedere che un dettaglio era sbagliato, descrivere perché e correggerne la causa. Quando le lenti di Spider-Man sembravano decentrate, il motivo non era il disegno: una lente era una copia speculare dell’altra, ribaltata attorno a un perno decentrato. La correzione è stata un solo numero.
I pezzi 3D ci hanno insegnato la stessa lezione su scala più grande. Scolpire un volto solo con il codice è difficile, e le nostre prime teste erano grezze. Invece di combatterlo, siamo partiti dalle mesh umane di base gratuite in CC0 di Blender Studio e le abbiamo rimodellate via script in ciascun personaggio. Le mani hanno seguito la stessa strada. Abbiamo raccontato di più su questo processo in Scolpire supereroi in codice con Blender.
Uno scaffale da museo per tutti
Otto pezzi in due mezzi sono tanti da assimilare, così in cima a Then & now c’è uno scaffale da museo: tutti e otto i pezzi 3D come piccole statue su un piatto che gira lentamente, ognuna sotto il proprio riflettore. Le statue sono versioni leggere dei modelli completi, caricate solo quando la pagina è inattiva, quindi lo scaffale non costa quasi nulla prima che tu scorra. Clicca su una e vai dritto alla sua riga, dove l’originale del 2012 sta accanto a entrambi i remake.
C’è anche un segreto. Se conosci il codice, provalo.
Perché farlo
I Labs sono sempre stati il posto in cui proviamo le cose prima di averne bisogno. Gli eroi del 2012 ci hanno insegnato cosa poteva fare il CSS anni prima che usassimo quelle tecniche nel lavoro per i clienti. I remake del 2026 hanno fatto lo stesso per il 3D procedurale, l’illuminazione in tempo reale e la costruzione di pezzi interattivi che si caricano comunque in fretta su un telefono. La prossima volta che un cliente avrà bisogno di qualcosa che si muove, sapremo già dove sono i limiti.
Dai un’occhiata alla serie completa, oppure inizia dal Superman in 3D e tieni premuto.