Em 2012 o CSS3 era novo o bastante para parecer um truque. Gradientes, cantos arredondados e transformações tinham acabado de chegar a todos os navegadores, e queríamos saber até onde iam. Então desenhamos com eles: uma série de super-heróis (Superman, Batman, Wolverine, Homem-Aranha, Homem de Ferro e Hulk), depois o R2-D2, depois um Game & Watch do Donkey Kong Jr. Sem imagens, sem canvas, só caixas, bordas e gradientes empilhados até parecerem alguma coisa.
Cada herói levou cerca de um dia. O R2-D2 levou quatro. O Game & Watch levou uma semana, porque não resistimos a deixá-lo responsivo.
Este ano voltamos aos oito. O briefing para nós mesmos foi simples: os mesmos temas, catorze anos depois, e sem desconto por nostalgia. Cada um foi refeito duas vezes, em dois meios muito diferentes, e você pode ver as três versões lado a lado em Antes & agora.
Dois remakes, dois regulamentos
Renderizado é o descendente direto dos originais: HTML & CSS puros, ainda sem imagens, sem SVG e sem canvas. O que mudou foi tudo em volta das regras. O CSS moderno nos dá gradientes em camadas com mistura de cores real, clip-path para silhuetas orgânicas, modos de mesclagem, filtros para luz suave e propriedades personalizadas que deixam um único valor controlar um personagem inteiro. Os heróis de 2012 eram recortes planos. Os de 2026 têm luz esculpida, trajes com textura e clima.
3D joga o regulamento fora. Cada peça é esculpida em código com a API Python do Blender, exportada como um único arquivo de modelo e iluminada ao vivo no navegador com three.js. Você pode arrastar para girá-las, e cada uma faz algo quando você segura.
Os mesmos temas, catorze anos depois, e sem desconto por nostalgia.
Cada peça faz alguma coisa
Um desenho que só se pode olhar parecia uma chance perdida, então cada remake tem uma ideia com a qual você pode brincar:
- A visão de calor do Superman segue o seu ponteiro e queima onde cai.
- O Batman espera num telhado sob a chuva; segure e o bat-sinal ilumina as nuvens.
- As garras do Wolverine saem, com o efeito sonoro a acompanhar.
- O Homem-Aranha dispara uma teia.
- O Homem de Ferro carrega o repulsor e o unifeixe, e a máscara se ergue para mostrar o Tony por baixo.
- O Hulk fica calmo até você segurar, e então ruge.
- O R2-D2 apita e, em 3D, projeta um holograma.
- O Game & Watch é jogável: um jogo de LCD em três aparelhos, o Wide Screen original, um Game Boy e um chaveiro Mini Classic.
São coisas pequenas, mas são a diferença entre uma ilustração e um software, e software é o que fazemos.
O que catorze anos mudaram
A resposta honesta é: menos sobre CSS e mais sobre como trabalhamos. Em 2012 cada gradiente era um chute, atualizado e ajustado até ficar certo. Em 2026 conseguíamos ver que um detalhe estava errado, descrever o porquê e corrigir a causa. Quando as lentes do Homem-Aranha pareciam fora de centro, o motivo não era o desenho: uma lente era a cópia espelhada da outra, virada em torno de um pivô fora de centro. A correção foi um número.
As peças 3D ensinaram a mesma lição em escala maior. Esculpir um rosto só com código é difícil, e nossas primeiras cabeças eram toscas. Em vez de brigar com isso, partimos das malhas humanas base gratuitas e CC0 da Blender Studio e as remodelamos por script em cada personagem. As mãos seguiram o mesmo caminho. Escrevemos mais sobre esse processo em Esculpindo super-heróis em código com o Blender.
Uma prateleira de museu para todos
Oito peças em dois meios é muita coisa para absorver, então o topo de Antes & agora é uma prateleira de museu: as oito peças 3D como pequenas estátuas em um pedestal que gira devagar, cada uma sob o seu próprio holofote. As estátuas são versões leves dos modelos completos, carregadas só quando a página fica ociosa, então a prateleira quase não custa nada antes de você rolar. Clique em uma e você vai direto para a linha dela, onde o original de 2012 fica ao lado dos dois remakes.
Também há um segredo. Se você souber o código, experimente.
Por que se dar ao trabalho
O laboratório sempre foi onde testamos coisas antes de precisarmos delas. Os heróis de 2012 nos ensinaram o que o CSS podia fazer anos antes de usarmos essas técnicas em trabalhos para clientes. Os remakes de 2026 fizeram o mesmo pelo 3D procedural, pela iluminação em tempo real e por peças interativas que ainda carregam rápido no celular. Da próxima vez que um cliente precisar de algo que se mexe, já saberemos onde ficam os limites.
Dê uma olhada no conjunto completo ou comece pelo Superman em 3D e segure.