# Como criar um site animado com IA do zero?

> Published 2026-09-27T14:40:19.921Z on https://www.crazystack.com.br/pt/p/como-criar-um-site-animado-com-ia-do-zero/
> Source video: https://www.youtube.com/watch?v=LN8rLcRYFHo

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](https://higgsfield.ai) | Gera as imagens e interpola o vídeo | Plano gratuito com limites |
| [Claude Code](https://claude.com/product/claude-code) | Agente que escreve e roda o código no terminal | Requer assinatura ou créditos da Anthropic |
| [GitHub](https://github.com) | Hospeda o código-fonte com versionamento | Gratuito para repositórios privados |
| [Vercel](https://vercel.com) | 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](https://nextjs.org), 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](https://code.visualstudio.com), 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](https://www.youtube.com/watch?v=LN8rLcRYFHo)