Este artigo detalha o processo de criação de sites animados de alto impacto utilizando ferramentas de Inteligência Artificial, conforme apresentado no tutorial de Gustavo Campos. Em 2026, a capacidade de reter a atenção do usuário logo na seção inicial (hero) é considerada fundamental para o sucesso de qualquer serviço ou produto online.
1. Inspiração e Concepção Visual
O processo começa com a busca de referências no Dribbble, uma plataforma utilizada para encontrar inspirações de design. Ao selecionar um modelo (como um site de fast food), o desenvolvedor captura um print para servir de base.
Em seguida, o Chat GPT é utilizado para analisar essa imagem e gerar um prompt cirúrgico focado apenas no plano de fundo, sem textos, que será usado para gerar novos ativos visuais.
2. Geração de Imagens com IA
A ferramenta utilizada para a criação das imagens é o Whisk (do Google Labs). O fluxo envolve:
- Criação da imagem estática: Gerar um elemento central (ex: um hambúrguer) posicionado lateralmente para dar espaço aos textos do site.
- Geração da variação: Criar uma segunda imagem do mesmo objeto “explodindo” ou com ingredientes voando, utilizando a primeira imagem como referência para manter a consistência.
3. Animação e Processamento de Vídeo
Com as duas imagens prontas (objeto intacto e objeto explodindo), utiliza-se o Vel 3 (ou 3.1) para criar uma transição animada em slow motion entre as duas molduras (frames).
Um ponto técnico crucial revelado nas fontes é que o Google Antigravity não interpreta vídeos diretamente. Por isso, o vídeo gerado no Vel deve ser convertido em uma sequência de imagens (arquivos numerados em uma pasta) para que a ferramenta de desenvolvimento consiga processar a animação.
4. Desenvolvimento do Site com Google Antigravity
O Google Antigravity é a ferramenta central para a montagem do site. O procedimento inclui:
- Organização de Pastas: Criar uma pasta de projeto e inserir a sequência de imagens convertida.
- Prompt de Estruturação: Fornecer ao Antigravity (via Chat GPT) as instruções e referências visuais para criar o código do site, utilizando a sequência de imagens como o fundo do hero.
- Visualização em Tempo Real: Utilizar a extensão Live Server para abrir um servidor local e visualizar as alterações instantaneamente no navegador.
5. Refinamento e Iteração
Dificilmente o site fica perfeito no primeiro comando. As fontes sugerem um processo de refatoração por meio de novos prompts para ajustar:
- Posicionamento: Mover textos para o lado oposto à animação para evitar sobreposição.
- Estética: Melhorar o design de botões e elementos de navegação.
- Fluidez: Ajustar o tempo de duração da animação (ex: aumentar para 6 segundos) para garantir que ela seja impactante e fluida.
6. Potencial de Mercado
A criação desses sites é apresentada não apenas como um exercício técnico, mas como uma oportunidade de negócio profissional. O alto nível visual permite vender esses projetos para empresas locais (como hamburguerias) ou utilizar tráfego pago para alcançar clientes em outras cidades, oferecendo um produto “extremamente chamativo” que impede o usuário de sair da página logo de cara.