Como criar um site animado com IA do zero?

Você monta um site animado com IA combinando três ferramentas: Claude Code escreve o código, Higgsfield gera o vídeo e a Vercel publica tudo de graça. O fluxo nasceu de um projeto real cobrado a um cliente. Neste guia, você reproduz cada etapa, das imagens de referência ao domínio próprio.

Como funciona um site animado com IA na prática

Um site animado com IA combina vídeo gerado por inteligência artificial com código escrito por um agente de programação. O efeito central é o scroll-jacking controlado: enquanto o usuário rola a página, o vídeo avança quadro a quadro, simulando uma animação interativa.

O truque que torna isso viável não é pedir um vídeo pronto. Você fornece duas imagens, uma do estado inicial e outra do estado final do objeto, e a ferramenta de vídeo interpola as duas. No caso do tutorial, uma moto parada e a mesma moto em alta velocidade serviram de referência.

Segundo o criador do vídeo, um site desse tipo foi entregue a um cliente real por R$ 2.500 em julho de 2026, e ele afirma que animações assim permitem cobrar mais que um site estático. Esse valor é relato do próprio autor, não uma média de mercado.

Quais ferramentas você precisa usar

O fluxo usa quatro ferramentas, cada uma com um papel bem definido. Nenhuma delas exige licença paga para começar, embora planos pagos existam para uso profissional.

Ferramenta	Papel no fluxo	Custo para começar
Higgsfield	Gera as imagens e interpola o vídeo	Plano gratuito com limites
Claude Code	Agente que escreve e roda o código no terminal	Requer assinatura ou créditos da Anthropic
GitHub	Hospeda o código-fonte com versionamento	Gratuito para repositórios privados
Vercel	Publica o site e vincula o domínio do cliente	Plano gratuito (Hobby) para uso individual

O código gerado segue o padrão do Next.js, framework React mantido pela própria Vercel. Essa combinação reduz atrito no deploy, porque a plataforma reconhece a estrutura do projeto automaticamente.

Por que gerar imagens em vez de pedir um vídeo pronto

Trabalhar com imagens dá controle sobre o resultado e evita retrabalho. Você escolhe o quadro inicial e o quadro final exatos, e o vídeo nasce já alinhado à identidade visual do site, com o mesmo tema dark e a mesma paleta.

O Higgsfield funciona como uma camada sobre modelos de geração: entre os mecanismos disponíveis na plataforma em 2026 estão o Nano Banana para imagens e modelos de vídeo como o Sora, segundo a própria interface do serviço. Você pode gerar as duas imagens dentro da plataforma ou subir referências próprias.

Nomeie os arquivos com clareza, por exemplo foto-inicial e foto-final, e coloque-os na pasta do projeto antes de chamar o agente. Essa organização simples evita que o modelo confunda qual imagem vem primeiro na sequência.

Como integrar o Claude Code ao Higgsfield via MCP

O Higgsfield expõe um servidor MCP (Model Context Protocol) que permite a agentes de código chamarem suas ferramentas de geração diretamente. É isso que faz o Claude Code pedir o vídeo sem você sair do terminal.

O passo a passo seguido no tutorial é o seguinte:

1. Crie uma pasta no computador e coloque nela as duas imagens de referência.
2. Abra a pasta no Visual Studio Code, editor gratuito da Microsoft, e abra o terminal integrado.
3. Instale a CLI do Higgsfield com npm install e faça login conforme as instruções da página de integração.
4. Dentro do Claude Code, rode /mcp e confirme que o servidor do Higgsfield aparece conectado; use o comando de reconnect se necessário.
5. Escreva o prompt descrevendo o site, o comportamento do scroll e o papel de cada imagem.

Um prompt eficaz no tutorial foi direto ao ponto: criar uma loja virtual de motos elétricas com tema dark, usar as duas fotos, gerar o vídeo com o Higgsfield e travar o scroll enquanto a moto percorre a tela, com títulos H1 animados durante o percurso. Quanto mais concreto o comportamento descrito, menos idas e voltas o agente precisa.

O que o agente entrega e como testar o resultado

Com o prompt dado, o Claude Code monta a estrutura do projeto em Next.js, gera o vídeo chamando o Higgsfield e salva tudo nas pastas corretas: as imagens e o arquivo de vídeo dentro de public/media, o código em app e components.

O agente sobe o servidor de desenvolvimento local, por padrão na porta 3000, e avança para outra porta se ela estiver ocupada. Você testa a animação rolando a página no navegador e conferindo se o vídeo acompanha o scroll de forma suave.

Uma extensão do Chrome para o Claude Code permite que o agente enxergue a tela e teste a página sozinho. Vale conferir a responsividade em largura de celular antes de aprovar, porque animações de scroll são o ponto que mais quebra em telas pequenas.

Como publicar o site gratuitamente na Vercel

A publicação passa pelo GitHub, que guarda o código com histórico de versões. Você cria um repositório privado, copia os comandos que o próprio GitHub sugere e pede ao Claude Code para comitar e enviar o código ao final do trabalho.

Na sequência, na Vercel você clica em Add New Project, importa o repositório e faz deploy. Como o projeto já nasce em Next.js, a plataforma detecta tudo sozinha e o site fica no ar em poucos minutos, em uma URL gratuita.

Se o cliente tem domínio próprio, você vincula o endereço dele nas configurações do projeto na Vercel. O plano Hobby, gratuito, cobre uso individual; empresas com várias pessoas precisam de plano pago, como o autor do tutorial explica ter.

Não há banco de dados no exemplo, o que simplifica o deploy. Um site institucional ou loja vitrine animada cabe bem nesse modelo sem custo de infraestrutura.

Quanto dá para cobrar por um site assim

O autor relata ter cobrado R$ 2.500 pelo site de cliente que originou o tutorial e sugere R$ 5.000 como faixa possível para projetos mais completos. Esses números são experiência pessoal dele, divulgada em julho de 2026, e não uma referência de tabela de mercado.

O argumento de valor para o cliente é concreto: animação de scroll com vídeo sob medida transmite percepção de produção cara, e o custo de entrega caiu porque a IA comprime o tempo de trabalho. O que você cobra depende do seu mercado, do porte do cliente e do escopo.

Fique atento à parte comercial. O próprio tutorial admite que construir é a parte fácil e vender é o gargalo real. Preparar portfólio, definir escopo e alinhar expectativas de revisões importa tanto quanto dominar as ferramentas.

Perguntas frequentes

• Preciso saber programar para criar um site animado com IA?

O tutorial foi feito para quem não mexe no código à mão: o agente escreve tudo e você descreve o resultado desejado. Conhecer o básico de terminal e estrutura de pastas ajuda a acompanhar e corrigir quando algo sai do esperado.

• O Higgsfield é gratuito?

A plataforma tem plano gratuito com limites de geração, e planos pagos para volume maior. Os valores e limites mudam com frequência, então confira a página oficial de preços antes de assumir um projeto.

• Publicar na Vercel custa algo?

O plano Hobby é gratuito para uso individual e já permite vincular domínio próprio. Projetos comerciais com equipe ou tráfego alto entram em planos pagos conforme a política atual da Vercel.

• Dá para usar outro editor em vez do Claude Code?

Sim. O autor menciona alternativas como Cursor e Codex, e o servidor MCP do Higgsfield também lista integrações com outros agentes. O fluxo permanece o mesmo: conectar a ferramenta, passar as imagens e descrever o comportamento da animação.

• O vídeo gerado sai em boa qualidade?

Depende do modelo escolhido na plataforma e do que você pedir no prompt. No tutorial, o autor nota que poderia ter solicitado 4K no vídeo do cliente, o que indica que a resolução é um parâmetro a definir na geração.

Source video