Sites 3D Estilo Awwwards

O que Sites 3D Estilo Awwwards faz?

Você está construindo experiências web 3D cinematográficas e conduzidas por rolagem na linhagem de Active Theory, Lusion, 14islands, Bonhomme, Resn, Studio Freight, Locomotive e Igloo Inc. O alvo estético é premium, lento, suave (lerp), brilhante e atmosférico — nunca abrupto, nunca poluído, nunca padrão.

Filosofia Central

Leia estes antes de tocar no código. Eles são a diferença entre "demo Three.js" e "Site do Dia do Awwwards".

1. Estética > Geometria. Um cubo de 6 polígonos com um bom HDRI, mapeamento de tom ACESFilmic e efeito bloom parece melhor do que um modelo de 200k polígonos iluminado por um único DirectionalLight. Gaste o orçamento primeiro em iluminação/pós-processamento, geometria por último.
2. Aplique lerp em tudo. Nenhum valor deve mudar instantaneamente. Posição da câmera, rotação, progresso da rolagem, posição do mouse, até alvos de raycaster — todos passam por um fator de amortecimento (0.06–0.1 é o ponto ideal). O mundo parece vivo porque nada se move abruptamente.
3. HTML de arquivo único quando possível. O resultado padrão é um único arquivo .html usando imports ESM de unpkg (e esm.sh para GSAP). Sem etapa de build, a menos que o usuário peça explicitamente. Isso torna o trabalho portátil, revisável e compartilhável.
4. Mobile primeiro, desempenho sempre. Limite pixelRatio a Math.min(devicePixelRatio, 2). Faça frustum culling. Reduza o pós-processamento pela metade em dispositivos móveis. Teste em um Android de médio porte no Chrome DevTools antes de declarar como concluído.
5. Mapeamento de tom ACESFilmic é inegociável. renderer.toneMapping = THREE.ACESFilmicToneMapping e renderer.outputColorSpace = THREE.SRGBColorSpace. Sem isso, tudo parece plano e "típico de WebGL".
6. metalness > 0 requer um mapa de ambiente. Um material metálico sem envMap é uma mancha preta. Sempre carregue um HDRI (ou use RoomEnvironment como fallback) antes de introduzir metais/vidro.
7. Alvo de 60fps no desktop, piso de 30fps no mobile. Se não conseguir, corte passes de pós-processamento antes de cortar geometria — o olho nota ruído mais do que triângulos.

Stack Técnica Bloqueada

Estas versões foram testadas juntas. Não atualize sem perguntar.

three                       0.170.0
gsap                        3.12.5  (com ScrollTrigger)
lenis                       1.1.0   (NÃO @studio-freight/lenis — esse escopo foi aposentado)

O pós-processamento usa o EffectComposer nativo do three de three/addons/postprocessing/. A biblioteca standalone postprocessing (v6.36.0) foi avaliada e descartada desta skill — seus internos chamam Material.onBeforeRender(), que o three r170 removeu, produzindo um aviso no console por material por frame. Os passes nativos do three (UnrealBloomPass, OutputPass, ShaderPass, LUTPass, etc.) cobrem todos os efeitos que precisamos com zero desvio de versão.

Vidro usa o MeshPhysicalMaterial nativo do three com transmission: 1.0 + dispersion: 1.2 (recurso r166+ — refração cromática sem libs externas). O MeshTransmissionMaterial do drei-vanilla NÃO está no núcleo/addons do three; recorra a ele apenas quando precisar de distorção temporal ou amostragem de backbuffer por objeto (então adicione drei-vanilla e [email protected] ao seu importmap). Veja PATTERNS.md #5 para ambos os caminhos.

Os imports via CDN usam este padrão de importmap (veja assets/templates/minimal.html para o exemplo canônico):

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/[email protected]/build/three.module.js",
    "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
    "gsap": "https://esm.sh/[email protected]",
    "gsap/ScrollTrigger": "https://esm.sh/[email protected]/ScrollTrigger",
    "lenis": "https://unpkg.com/[email protected]/dist/lenis.mjs"
  }
}
</script>

Escolha do compositor — resolvida: Esta skill usa o EffectComposer nativo do three de three/addons/postprocessing/. A biblioteca npm standalone postprocessing foi testada e rejeitada: [email protected] sinaliza Material.onBeforeRender() removido no r170, inundando o console uma vez por material por frame. Os passes nativos do three cobrem todos os efeitos que esta skill precisa (bloom, vinheta via ShaderPass, granulação via ShaderPass, LUT via LUTPass, mapeamento de tom de saída via OutputPass). Veja references/POST_PROCESSING.md para a cadeia de passes canônica.

Confiabilidade do CDN: Padrão para unpkg.com para three e lenis — ele espelha a estrutura de diretórios do npm exatamente, então three/addons/... resolve corretamente. cdn.jsdelivr.net foi testado e falhou intermitentemente ao servir arquivos [email protected]/examples/jsm/postprocessing/* (ERR_CONNECTION_CLOSED) de algumas redes. Use esm.sh para GSAP porque é o gateway ESM mais limpo para o pacote UMD do GSAP. Se unpkg estiver inacessível, ordem de fallback: unpkg → esm.sh → cdn.skypack.dev. Para produção, coloque os arquivos localmente (baixe para /vendor/) — dependência estrita de CDN é aceitável apenas para protótipos.

Política de atualização: As versões estão bloqueadas porque foram testadas juntas. Para atualizar: (1) altere primeiro em assets/templates/minimal.html, (2) execute todos os quatro modelos em um navegador, (3) corrija quaisquer problemas, (4) atualize SKILL.md e PATTERNS.md. Não altere versões silenciosamente em um único modelo — a deriva entre modelos é a fonte número 1 de "funciona na minha máquina".

O Fluxo de Trabalho em 5 Etapas

Siga esta ordem. Pular uma etapa produz uma saída de "demo técnica" em vez de uma saída de "site premium".

Etapa 1 — Identifique o Arquétipo da Experiência

Todo site 3D Awwwards se encaixa em um destes. Escolha um e comprometa-se:

Arquétipo	Padrão	Referência
Vitrine de objeto	Objeto herói único, câmera orbita/zoom ao rolar	Páginas de produto Bonhomme, Apple AirPods Pro
Tour por sala	Caminho de câmera por interior 3D	Igloo Inc., portfólio Bruno Simon
Túnel	Câmera voa para frente através de geometria infinita	Experimentos Active Theory
Descida vertical	Rolagem = cair/subir por camadas	Estudos de caso 14islands
Sobrevoar	Câmera atravessa uma paisagem	Estudos de caso Lusion
Campo de partículas	Milhares de pontos reagindo à rolagem/mouse	Experimentos Resn

Pergunte ao usuário qual arquétipo se não disseram. Não invente um novo — estes são comprovados.

Etapa 2 — Planeje os Ativos

Escolha a fonte mais barata que atende ao padrão:

1. Primitivas Three.js (SphereGeometry, BoxGeometry, TorusKnotGeometry) — para trabalhos abstratos/vitrine. A maioria dos sites Awwwards usa estas. Não as ignore.
2. Blender via MCP — quando precisar de uma forma personalizada. Veja references/BLENDER_PIPELINE.md para receitas (moeda, orbe de vidro, blob, sala low-poly) e a configuração de exportação GLB (Draco + KTX2).
3. Polyhaven — HDRIs e texturas, gratuitos, CC0. O HDRI é mais importante que o modelo.
4. Sketchfab — último recurso para modelos prontos. Sempre verifique a contagem de polígonos.

Etapa 3 — Escolha um Modelo

Comece a partir de assets/templates/:

• minimal.html — cena vazia com HDRI, mapeamento de tom, Lenis, pós-processamento configurado. Use como base para qualquer coisa personalizada.
• coin-scroll.html — moeda gira e cai ao rolar (vitrine de objeto).
• room-walkthrough.html — câmera se move ao longo de uma spline através de uma sala (tour por sala).
• glass-product.html — produto único com MeshPhysicalMaterial transmissão + dispersão (r166+), HDRI, bloom suave (vitrine de objeto, vidro).

Os modelos são pontos de partida, não o trabalho final. Remova o que não precisar, adicione camadas do que precisar.

Etapa 4 — Adicione Camadas de Polimento (nesta ordem)

A ordem importa. Cada camada assume que a anterior está no lugar.

1. HDRI carregado e aplicado como scene.environment
2. Mapeamento de tom — ACESFilmicToneMapping, exposição 1.0–1.2
3. Iluminação — mesmo com HDRI, adicione um DirectionalLight para direção da sombra
4. Pós-processamento — EffectComposer nativo do three com alvo HDR → RenderPass → UnrealBloomPass (força ~0.45, raio 0.4, limiar 0.82) → vinheta ShaderPass → OutputPass (aplica renderer.toneMapping = ACESFilmic) → granulação ShaderPass por último
5. Lenis rolagem suave conectada a GSAP ScrollTrigger.update
6. Cursor personalizado (opcional, mas uma marca registrada Bonhomme/Lusion)
7. Linha do tempo de rolagem — linha do tempo GSAP conduzida por ScrollTrigger, aplicando lerp nas propriedades da câmera/objeto
8. Granulação de filme como a camada final de composição — ShaderPass personalizado com um fragmento de ruído orientado por tempo, intensidade ~0.05 (veja references/POST_PROCESSING.md § "Passo 5 — Granulação de filme")

Etapa 5 — Auditoria de Desempenho

Antes de declarar como concluído:

• Lighthouse Performance ≥ 85 no desktop, ≥ 70 no mobile
• FCP < 1.8s, LCP < 2.5s
• 60fps no desktop, 30fps mínimo em Android de médio porte
• pixelRatio limitado a 2
• Arquivos GLB comprimidos com Draco, texturas KTX2 quando possível
• Nenhum console.log dentro de loops requestAnimationFrame (mata o desempenho no DevTools)
• Todas as animações conduzidas por tempo delta, não por contagem de quadros

Regras Rígidas — Nunca Faça Estas

Estas geram trabalho quebrado. Veja references/ANTI_PATTERNS.md para a versão longa.

1. Sem animações abruptas. Toda mudança de propriedade passa por lerp ou ease do GSAP.
2. Sem metalness > 0 sem um mapa de ambiente. Resultado: manchas pretas.
3. Sem pixelRatio sem limite. Um monitor 4K com devicePixelRatio = 2 cairá para 15fps.
4. Sem GLB não comprimido. A compressão Draco é obrigatória (veja BLENDER_PIPELINE.md).
5. Sem áudio de reprodução automática. Navegadores bloqueiam; usuários odeiam.
6. Sem console.log no loop de animação. Mesmo um por frame destrói o DevTools.
7. Sem misturar rolagem conduzida por CSS e JS. Lenis é o dono da rolagem. ScrollTrigger lê de Lenis. scroll-behavior: smooth do CSS deve ser removido.
8. Sem OrbitControls em produção. É para prototipagem. Sites reais usam câmeras conduzidas por rolagem.
9. Sem ShaderMaterial sem declaração de precisão. GPUs móveis precisam de precision mediump float;.
10. Sem raycasting contra toda a cena a cada frame. Filtre para um pequeno array de malhas interativas.
11. Sem animação baseada em contagem de quadros. Todo movimento deve ser conduzido por delta de clock.getDelta() e multiplicado por ele. Um monitor de 144Hz e um de 30Hz devem produzir movimento visualmente idêntico. Para lerp, use uma fórmula independente de taxa de quadros: factor = 1 - Math.pow(1 - ease, delta * 60) em vez de ease bruto.

Arquivos de Referência

Carregue estes sob demanda — não leia todos de uma vez.

• references/ARCHITECTURE.md — estrutura da cena, o loop de lerp/rolagem, ordem de renderização
• references/PATTERNS.md — 33 trechos de código copiáveis para necessidades comuns
• references/PROCEDURAL_GEOMETRY.md — geração de geometria apenas com código; primitivas, formas matemáticas, deslocamento de vértices, padrões híbridos Blender. O caminho padrão antes de recorrer a geradores de IA 3D.
• references/BLENDER_PIPELINE.md — receitas MCP Blender + configuração de exportação GLB
• references/SHADERS.md — blocos de construção GLSL (ruído, fresnel, dispersão, materiais personalizados)
• references/POST_PROCESSING.md — receitas de bloom, profundidade de campo, granulação, aberração cromática
• references/TRANSITIONS.md — transições de página Barba.js, View Transitions API
• references/ANTI_PATTERNS.md — lista longa do que mata a estética e por quê

Arquivo de Inspiração

Quando o usuário estiver indeciso sobre a direção, aponte-o para aqui. Abra estes em um navegador, não faça capturas de tela ou raspe.

• Active Theory — https://activetheory.net — mestres do estilo WebGL, distorções GLSL, bloom e dispersão artesanais
• Lusion — https://lusion.co — vitrines de produtos surreais, materiais transmissores, gradação de cores perfeita
• 14islands — https://14islands.com — 3D lúdico, transições de página marcantes, tipografia de bom gosto sobre cenas
• Bonhomme — https://bonhomme.lol — tipografia ousada encontra 3D, cursores distintos, liderado por direção de arte
• Resn — https://resn.co.nz — trabalho atmosférico com partículas, paletas oníricas, movimentos lentos de câmera
• Studio Freight — https://studiofreight.com — autores do Lenis; minimalismo + suavidade perfeitamente ajustada
• Locomotive — https://locomotive.ca — autores originais do Locomotive Scroll; maestria em coreografia de rolagem
• Igloo Inc. — https://igloo.inc — sobrevoos de paisagens, ritmo narrativo, iluminação nível Pixar
• Sites do Dia do Awwwards — https://www.awwwards.com/websites/sites_of_the_day/ — arquivo curado diário para tendências atuais

Áudio (Opcional, mas Marcante)

~70% dos vencedores 3D do Awwwards incluem áudio sutil: drones ambientes, ticks de hover, whooshes de rolagem. Bem feito, o áudio é a diferença entre "site" e "experiência". Mal feito, é o motivo pelo qual os usuários fecham a aba nos primeiros 2 segundos.

Regras:

• Use Howler.js (https://esm.sh/[email protected]) ou a Web Audio API. Sem tag <audio> para ambiente.
• Sempre bloqueie a reprodução atrás de um gesto do usuário (clique em botão, rolagem para a visualização após o primeiro viewport). Navegadores bloqueiam a reprodução automática de qualquer forma, mas a regra de UX é mais rigorosa: nunca inicie um som que o usuário não pediu.
• Forneça um botão de mudo persistente no canto da UI. Padrão: DESLIGADO no mobile, DESLIGADO na primeira visita (use localStorage para lembrar a escolha do usuário em visitas futuras).
• Loop ambiente a -18 dB a -24 dB. Sons de UI...