Crie um site 3D animado com o Google AI Studio
Houve um momento na quarta-feira à noite em que movi o mouse sobre uma página web e um personagem girou em tempo real para seguir meu cursor — cabeça levemente inclinada, ombros acompanhando, cabelo esvoaçando de uma forma que nenhum keyframe CSS poderia falsificar realisticamente — e pensei: isso parece uma cinemática de jogo AAA, e eu construí em uma tarde.
Sem Unity. Sem Blender. Sem Three.js. Sem shader WebGL de 500 linhas de GLSL. Toda a "camada de animação 3D" é um vídeo morph incorporado em uma página web com três linhas de JavaScript que vinculam a posição de reprodução ao movimento do mouse. O resultado parece um site 3D completamente interativo. Na realidade, é uma combinação inteligente de uma animação morphing gerada por IA, uma página web padrão criada no Google AI Studio e um pequeno truque que acopla o scrubbing do vídeo ao movimento horizontal do mouse.
Vou mostrar exatamente como construí — cada passo, cada ferramenta, cada ponto onde a demo quase falhou e o que corrigi. Sem abstrações. No final, você terá tudo que precisa para replicar o mesmo esta noite.
Por que este truque "3D" funciona (e por que não é realmente 3D)
O que acontece aqui não é renderização 3D real. Não há malha poligonal, buffer de profundidade ou projeção de câmera. É um vídeo pré-renderizado de um personagem se transformando — renderizado por um modelo de vídeo IA — onde JavaScript controla a posição de reprodução com base na posição do cursor. Mouse à esquerda = vídeo avança para o início; mouse à direita = vídeo avança para o final. Como o vídeo mostra uma rotação suave, cria-se a ilusão de controle de rotação 3D.
Isso importa porque diz onde investir esforço. A maior parte da qualidade vem do vídeo morph — não da construção web. Uma animação morphing melhor supera JavaScript melhor por uma ordem de magnitude.
Passo 1: Roube como um artista (a fase de ideação)
Todo bom projeto começa se inspirando. Navegue pelo Awwwards, Dribbble ou simplesmente os sites de marcas que admira. Busque especificamente: animações hero que pareçam orgânicas; animações de personagens; e páginas que sugiram profundidade com mínima tecnologia 3D real.
Meu conceito: uma landing page escura e cinemática com um personagem central que parece seguir o cursor do usuário, com uma navbar minimalista e um efeito typewriter no título.
Passo 2: Crie duas poses do personagem com um editor de imagens IA
O vídeo morph precisa de frames de início e fim. Mantive a mudança de pose sutil — 15-30 graus de diferença de rotação é o ponto ideal. Combine o fundo — qualquer inconsistência entre os dois frames se torna um cintilamento visível na animação morphing.
Passo 3: Gere o vídeo morph com o Google Flow (Veo 3.1)
A ferramenta é o Google Flow, a plataforma de geração de vídeo do Google baseada no modelo Veo 3.1. Não é "Clai" nem "Clay" — isso é distorção de transcrição.
O fluxo: vá ao Google Flow, faça upload das imagens como keyframes, defina o prompt como algo tipo: "Smooth cinematic rotation of the character from left to right, maintaining consistent lighting and style." Gere o vídeo.
Detalhe crítico: Gere múltiplas variantes. Trate a geração de vídeo IA como fotografia — faça várias tomadas e escolha a melhor.
Passo 4: Construa o hero e a navbar no Google AI Studio
Google AI Studio pode gerar páginas web HTML/CSS/JS por prompts. Dei um prompt detalhado pedindo uma landing page escura e cinemática. Iteraei duas vezes para corrigir espaçamento e tipografia.
Passo 5: Incorpore o vídeo morph como fundo do hero
<video id="hero-video" src="morph.mp4" muted playsinline preload="auto"
style="width:100%; height:100vh; object-fit:cover;"></video>
muted e playsinline são ambos necessários para reprodução automática em navegadores móveis. preload="auto" garante que o vídeo carregue antes da interação.
Passo 6: Conecte o movimento horizontal do mouse ao scrubbing do vídeo
const video = document.getElementById('hero-video');
document.addEventListener('mousemove', (e) => {
const progress = e.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
Mouse totalmente à esquerda = frame 0. Mouse totalmente à direita = último frame. Tudo entre interpola linearmente.
Passo 7: Corrija a experiência mobile (porque não há cursor)
Adicione eventos touch para mapear a posição horizontal do toque ao mesmo scrubbing de vídeo:
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const progress = touch.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
Como fallback, reproduza o vídeo lentamente em loop automático.
Passo 8: Adicione um efeito typewriter ao título
Pedi ao Google AI Studio para adicionar um efeito typewriter. Adicionei um atraso vinculado ao evento loadeddata do vídeo para que a animação não comece antes do vídeo carregar.
Passo 9: Faça deploy grátis com GitHub e Vercel
Crie um repositório no GitHub, faça push do HTML e MP4, conecte ao Vercel (tier gratuito funciona). Seu site 3D animado está no ar, hospedado grátis, com SSL automático e CDN.
O veredicto honesto: onde brilha e onde quebra
Onde brilha: A primeira impressão é espetacular. Tempo de construção mínimo — cerca de três horas. Zero complexidade em runtime.
Onde quebra: A rotação é fixa. A qualidade do vídeo cobre tudo. Mobile é cidadão de segunda classe.
O que esperar realmente (resultados realistas)
Planeje 2-4 horas. Espere gerar 3-5 variantes de morph. O resultado será impressionante no desktop e aceitável no mobile. Para landing pages, portfólios e showcases criativos, é um multiplicador legítimo do fator wow.
Perguntas frequentes
O Google AI Studio é gratuito para construir sites?
Sim, o tier gratuito inclui geração de HTML/CSS/JS.
Qual ferramenta faz a animação morph do personagem?
Google Flow, baseado no modelo Veo 3.1. "Clai" e "Clay" são erros de transcrição.
Por que meu scrubbing de vídeo tem lag?
Vídeo muito longo, não pré-carregado ou bitrate muito alto. Mantenha sob 5 segundos, use preload="auto" e comprima com HandBrake.
Como faço o site animado funcionar no mobile?
Adicione listeners touchmove que mapeiam posição horizontal do toque a currentTime do vídeo. Adicione fallback de reprodução automática lenta.
Devo usar Figma para este build?
Para um build deste tamanho, Figma é exagero. Google AI Studio gera a estrutura HTML diretamente.
Você não precisa de um motor de jogos — precisa de uma tarde
As ferramentas mudaram. O que costumava ser uma semana de trabalho de estúdio agora é um experimento de uma tarde. A combinação de geração de imagens IA, geração de vídeo IA e geração de código IA funde todo o pipeline de conceito a deploy em uma única sessão.
Se quer explorar builds criativos como este para sua marca ou clientes, esse é exatamente o tipo de projeto que adoro. Me encontre em fiverr.com/s/EgxYmWD.
Vamos trabalhar juntos
- Fiverr (builds personalizados e integrações): fiverr.com/s/EgxYmWD
- Portfólio: mejba.me
- Ramlit Limited (soluções empresariais): ramlit.com
- ColorPark (design e branding): colorpark.io
- xCyberSecurity (serviços de segurança): xcybersecurity.io
