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

> Published 2026-09-27T14:41:44.497Z on https://www.crazystack.com.br/pt/p/como-criar-um-site-3d-com-ia-do-zero-2026/
> Source video: https://www.youtube.com/watch?v=iprTP2Bm_8g

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?](https://skalablog.com/pt/p/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](https://code.visualstudio.com) como editor e o [Claude Code](https://claude.com/product/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](https://chromewebstore.google.com/detail/claude/anthropic), 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](https://gsap.com) 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](https://github.com), 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](https://git-scm.com):

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](https://www.hostinger.com.br), 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](https://nextjs.org), framework React da [Vercel](https://vercel.com), 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](https://www.hostinger.com.br/hospedagem) e da [Vercel](https://vercel.com/pricing) 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](https://www.youtube.com/watch?v=iprTP2Bm_8g)