Como criar um site 3D com IA do zero (2026) — Parte 2

Um site 3D com IA pode sair por menos de R$ 15 por mês de hospedagem, segundo o criador do tutorial. O segredo não está no código, que a IA escreve, mas no jogo de imagem: fotos geradas primeiro, vídeo depois e animação controlada pelo scroll do mouse.

Parte 2 de uma série, depois de Como criar um site animado com IA do zero?.

Como criar um site 3D com IA funciona na prática?

Um site 3D com IA se apoia em três pilares: imagens geradas por inteligência artificial, um vídeo amarrado à rolagem da página e um agente de código que monta tudo. O tutorial do canal O Rei dos Sites, publicado em agosto de 2026, mostra o fluxo completo, da pasta vazia até o site no ar.

A tese central do criador é simples: criação de site nesse estilo é jogo de imagem. O código é a parte de menos, porque a IA escreve. O que diferencia o resultado é a qualidade das fotos e do vídeo, especialmente em monitores grandes, onde a baixa resolução aparece de imediato.

Por que gerar fotos antes do vídeo?

O primeiro passo do fluxo é sempre a criação das fotos. O criador explica que gerar o vídeo a partir das imagens deixa o processo mais visual e garante fidelidade: o vídeo sai exatamente com o enquadramento das fotos aprovadas.

No tutorial, as imagens e o vídeo foram criados na mesma ferramenta de geração por IA, e os arquivos finais foram fornecidos na descrição para quem quer reproduzir o projeto. A recomendação prática é usar resolução alta, porque vídeo fraco compromete o resultado em qualquer tela grande.

Ordem recomendada:

1. Gere as fotos do produto ou tema com IA.
2. A partir das fotos aprovadas, gere o vídeo.
3. Só então leve os arquivos para o editor de código.

Qual o papel do Claude Code e da extensão no navegador?

Depois dos assets, o fluxo usa o Visual Studio Code como editor e o Claude Code, ferramenta de codificação agêntica da Anthropic que roda no terminal. O criador cola um prompt pronto pedindo um site com scroll trigger, e o agente cria a estrutura do projeto pedindo permissão comando a comando.

O diferencial mostrado no vídeo é a extensão do Claude para Chrome, que permite ao agente abrir o site em localhost, rolar a página sozinho e conferir se a animação funciona. Ele identificou dois bugs sem que o criador apontasse: o vídeo travava porque o servidor local não suportava HTTP range requests, e o tick do GSAP dormia quando não havia animação ativa.

Como controle de custo, o criador cita que a sessão de cerca de 18 minutos consumiu por volta de 67 mil tokens, cerca de 15% do limite da sessão no plano usado, segundo a tela de uso que ele mostra no vídeo (dado reportado pelo próprio criador).

O que é ScrollTrigger e por que ele depende do vídeo?

ScrollTrigger é o nome do recurso que conecta a animação à rolagem do mouse. Conforme você desce a página, o vídeo avança, criando o efeito de site 3D sem precisar de WebGL pesado.

No projeto, a biblioteca responsável é o GSAP, suíte de animação JavaScript muito usada para esse tipo de transição. A combinação vídeo + ScrollTrigger é o que produz a sensação de profundidade: o arquivo de vídeo precisa estar em boa resolução, porque cada quadro aparece em tela cheia durante o scroll.

Para quem quer replicar, a dica do tutorial é testar a sincronia entre capítulos da página: se o vídeo pausa ou trava quando o scroll para, o agente precisa ajustar o tick da animação.

Como publicar o site a partir do GitHub?

Com o código pronto, o próximo passo é versionar no GitHub, plataforma de repositórios que também serve de portfólio. O criador recomenda repositório público quando não há dados confidenciais, porque recrutadores e clientes conseguem ver o trabalho.

O processo no terminal é o fluxo clássico do Git:

1. git init para inicializar o repositório local.
2. git add . para preparar todos os arquivos.
3. git commit e os comandos de envio copiados da própria página do GitHub.
4. Confirmar a branch correta antes do deploy — no vídeo, o autor confere com git branch.

Onde hospedar: Hostinger ou Vercel?

O deploy do tutorial usa a Hostinger, hospedagem que também patrocina o canal. Pelo painel, o caminho é criar o site na opção de web apps, escolher domínio temporário, importar o repositório do GitHub e implantar como projeto estático, já que o exemplo é HTML puro sem package.. Projetos em Next.js, framework React da Vercel, também podem ser publicados pelo mesmo caminho.

Sobre preço, os números citados valem para agosto de 2026 e são reportados pelo criador: plano de hospedagem a partir de cerca de R$ 12/mês na Hostinger, contra um plano Pro de aproximadamente US$ 20/mês na Vercel para a equipe dele, que pagava por volta de R$ 1.000/mês antes de migrar. São valores de planos e contexto particular — confira a página atual de preços da Hostinger e da Vercel antes de decidir.

Tabela resumo:

Opção	Perfil do projeto	Ponto forte	Atenção
Hostinger	Sites estáticos e apps Node	Preço baixo e painel em português	Recursos de plataforma gerenciada mais limitados
Vercel	Apps Next.js e React	Deploy integrado ao framework	Custo sobe em escala
GitHub Pages	Portfólios simples	Gratuito para sites estáticos	Sem backend próprio

O criador ganhou R$ 7.500 vendendo site assim?

O título do vídeo afirma um faturamento de R$ 7.500,00 com um site feito a partir de um prompt. Esse número é a alegação do próprio criador e não vem acompanhado, no vídeo, de contrato ou comprovante — trate como relato pessoal, não como resultado garantido.

O que o vídeo comprova é o método: um site animado com scroll trigger, montado com IA e publicado. A viabilidade comercial depende do seu mercado, do preço cobrado e da entrega, fatores que ficam fora do tutorial.

Perguntas frequentes

• Preciso saber programar para criar um site 3D com IA? Não é obrigatório para reproduzir o tutorial, mas ajuda muito a revisar o código, corrigir bugs e adaptar o projeto para outros clientes. O criador recomenda entender a lógica do site, não só colar o prompt.

• Dá para usar outro agente além do Claude Code? Sim. O vídeo cita alternativas como GPT e outras ferramentas, mas o autor defende que, para criação de software, o Claude Code com a extensão do navegador entregou o melhor fluxo de teste automático.

• A hospedagem precisa ser a Hostinger? Não. Qualquer hospedagem que entregue arquivos estáticos grandes com boa velocidade serve. O criador escolheu a Hostinger por preço e pela interface em português, e cita a Vercel como opção mais cara para escala.

• Por que meu vídeo trava no scroll? No tutorial, o bug veio de um servidor local sem suporte a HTTP range requests, além do tick do GSAP parado sem animação ativa. Usar um servidor de desenvolvimento adequado e ajustar o ScrollTrigger resolve.

• Quanto custa manter esse tipo de site? Segundo valores citados no vídeo em agosto de 2026, a hospedagem sai a partir de cerca de R$ 12/mês na Hostinger. O custo de IA depende do plano usado; a sessão mostrada consumiu cerca de 15% do limite do plano do criador.

Source video