Engenharia reversa de sites é estudar um site pronto para entender como ele foi feito: quais bibliotecas carrega, como liga a animação ao scroll e onde entra o 3D. O roteiro tem sete passos, da cópia local à reconstrução em pequeno, sempre para aprender e nunca para republicar.
Por que estudar um site premiado por dentro?
Porque assistir não ensina. Você rola um site do Awwwards, gosta, e não sabe dizer se aquilo é vídeo, CSS, canvas ou shader. Abrir o site por dentro troca a impressão por diagnóstico.
O próprio Awwwards trata isso como estudo legítimo. A série Rebuilding Awwwards Websites using React & GSAP, publicada em vídeo na plataforma, refaz sites premiados para mostrar a técnica. A ideia é a mesma deste roteiro: reconstruir para entender.
Quais são os 7 passos do roteiro?
Baixar
salve o site inteiro no computador, com scripts, fontes, modelos e vídeos, para estudar sem depender de o site continuar no ar
Ler a aba Rede
abra o DevTools, marque Disable cache, recarregue e role a página até o fim, observando o que chega em JS, Font, Media e Fetch/XHR
Identificar as bibliotecas
use a busca da aba Rede para procurar ScrollTrigger, lenis e THREE dentro dos arquivos, mesmo quando os nomes vêm embaralhados
Isolar o efeito
escolha um único efeito, como o título que se monta no scroll, e descubra qual elemento ele move, quando começa e quando termina
Anotar os tokens
registre cores, fontes, espaçamentos, durações e curvas de easing, porque o efeito depende desse ritmo tanto quanto do código
Reconstruir em pequeno
refaça só aquele efeito num arquivo vazio, com seus textos e suas imagens, até o movimento se comportar igual
Arquivar
guarde o site baixado, as anotações e a sua versão numa pasta por referência, com a data e o link original
O primeiro passo decide os outros. Um "salvar como" do navegador costuma trazer a página sem o JavaScript que anima, e aí não há o que estudar. O guia como baixar um site completo e abrir offline explica o que funciona em 2026 e o que vem quebrado.
Que pistas na aba Rede revelam cada biblioteca?
A aba Rede do Chrome separa as requisições por tipo (JS, CSS, Img, Media, Font, WS, Wasm e outros), permite buscar texto dentro de todas elas e mostra, na coluna Initiator, quem pediu cada arquivo. É o suficiente para reconhecer a pilha da maioria dos sites premiados.
| Pista na aba Rede | Biblioteca provável | O que ela faz |
|---|---|---|
| gsap.min.js, ou a palavra gsap dentro de um chunk | GSAP | Anima propriedades em linhas do tempo, com controle fino de duração e easing |
| ScrollTrigger.min.js, ou registerPlugin(ScrollTrigger) na busca | ScrollTrigger (plugin do GSAP) | Liga a animação à barra de rolagem: scrub, pin de seção e pontos de início e fim |
| lenis.css, a palavra lenis no JS, atributos data-lenis-prevent | Lenis | Rolagem suave por cima da rolagem nativa, sem dependências |
| three.module.js, a palavra THREE no JS, arquivos .glb e .gltf, um canvas ocupando o herói | three.js | Monta a cena 3D em WebGL: câmera, luz, materiais e modelos |
| .woff2 no filtro Font | Fontes próprias do site | Mostra a tipografia que de fato carregou |
| .mp4 ou .webm no filtro Media | Vídeo | Separa o que é vídeo do que é renderizado ao vivo |
Fontes: documentação do ScrollTrigger no gsap.com (GSAP grátis e de código aberto, versão 3.15), repositório do Lenis no GitHub (licença MIT, versão 1.3.26) e site oficial do three.js (release r186), abertos em outubro de 2026.
Em sites feitos com Next.js ou Vite, os nomes dos arquivos chegam com hash, e gsap.min.js vira algo como um chunk numerado. Por isso a busca dentro das requisições vale mais do que o nome do arquivo. Se aparece ScrollTrigger, aparece GSAP. Se aparece lenis.on, a rolagem é do Lenis.
Como isolar e reconstruir um efeito sem se perder?
Escolha um efeito só. O erro mais comum é tentar entender o site inteiro de uma vez. Um título que se monta, uma imagem que fica presa enquanto o texto passa, um objeto 3D que gira com o scroll: um por vez.
Na reconstrução, a ordem que costuma funcionar é rolagem, depois disparo, depois animação. O repositório do Lenis documenta a ponte com o GSAP: o evento de scroll do Lenis chama ScrollTrigger.update, e o Lenis passa a rodar no relógio do GSAP. Com isso, o ScrollTrigger lê a rolagem suave sem tremer.
const lenis = new Lenis()
lenis.on('scroll', ScrollTrigger.update)
gsap.ticker.add((time) => lenis.raf(time * 1000))
gsap.ticker.lagSmoothing(0)Depois, ligue um efeito ao scroll com scrub e pin, e use markers para ver na tela onde a animação começa e termina, recurso que a documentação do ScrollTrigger descreve para desenvolvimento. Quando o movimento bater, troque os valores pelos tokens que você anotou no passo 5.
Para anotar os tokens com método, o guia como extrair cores, fontes e espaçamentos de qualquer site mostra o caminho no DevTools. E para ver o mesmo raio-x aplicado a um site real, abrimos o nosso em anatomia de um herói 3D.
O que observar além do código?
A técnica é metade. A outra metade é narrativa: o que aparece primeiro, quanto tempo cada cena dura, onde o scroll para e respira. Isso tem nome e estrutura, e está em scrollytelling.
Anote também o que o site não faz. Quantas fontes carrega, se o 3D espera o primeiro quadro no celular, se o vídeo só entra quando aparece. As escolhas de contenção são as mais difíceis de enxergar e as que mais separam um site premiado de um site pesado. Os projetos que usam essa mesma pilha estão em projetos da Brave Cross.
Perguntas frequentes
O que é engenharia reversa de sites?
É estudar um site pronto para entender como ele foi feito: quais bibliotecas usa, como liga a animação ao scroll, de onde vêm fontes, vídeos e modelos 3D. O objetivo é aprender a técnica e refazê-la com seu conteúdo. Republicar o trabalho de outra pessoa não faz parte do estudo e esbarra em direitos autorais.
Como fazer uma animação igual à de um site?
Descubra a biblioteca primeiro: busque ScrollTrigger, lenis e THREE na aba Rede do DevTools. Depois isole um único efeito, anote duração e easing e refaça do zero num arquivo vazio, com seus textos e imagens. O GSAP é grátis e de código aberto segundo o gsap.com em outubro de 2026, então dá para praticar sem custo.
Como saber se um site usa GSAP ou Lenis?
Abra o DevTools, vá à aba Rede, recarregue e use a busca em todas as requisições. Se aparecer gsap ou registerPlugin(ScrollTrigger), o site usa GSAP. Se aparecer lenis, lenis.css ou atributos data-lenis-prevent, a rolagem suave é do Lenis, biblioteca com licença MIT segundo o repositório oficial no GitHub.
Como descobrir se um site usa three.js?
Procure um elemento canvas ocupando o herói e busque THREE nos scripts pela aba Rede. Arquivos .glb ou .gltf no carregamento também indicam modelos 3D. O three.js se descreve como biblioteca JavaScript de 3D e estava na release r186 no site oficial em outubro de 2026.
Estudar um site do Awwwards por dentro é permitido?
Estudar e arquivar para referência própria é a prática que o próprio Awwwards ensina na série Rebuilding Awwwards Websites. O problema começa ao publicar textos, imagens, modelos ou código de outra pessoa como se fossem seus. Para o caso concreto, consulte um advogado; o panorama da lei brasileira está no artigo sobre copiar site.
Do estudo ao projeto vendido
Um site premiado deixa de ser mágica quando você consegue apontar o arquivo, a biblioteca e a linha do tempo de cada efeito. Sete passos, um efeito por vez, e a referência vira repertório. Se quiser a base técnica, a Brave Cross Education tem um curso de Next.js, a estrutura em que esses sites costumam rodar.
Repertório só vira renda quando vira projeto. O Método mostra como criar e vender sites de R$ 4 mil a R$ 20 mil em 14 dias, sem programar, com IA. Conheça o Método da Brave Cross.