Education

Antigravity + Nano Banana 2 = Sites de R$25.000 (Absurdo)

by Enzo Barbatto

📚 Principais tópicos

Animações 3D em sitesO vídeo demonstra efeitos controlados pela rolagem, como uma casa sendo construída ou um produto se desmontando, e apresenta um site de teclado como projeto prático. 0:00
Geração das imagens e do vídeoO Nano Banana 2 é usado para criar a imagem do teclado desmontado, e o Kling 3 gera a transição entre a imagem original e a final. 2:01
Criação do site com AntigravityO Antigravity monta o site, enquanto o MCP do Firecrawl extrai referências de marca e informações da página oficial do produto. 7:07
Integração das animaçõesO vídeo principal é incorporado à seção hero e controlado pelo scroll; outra animação, reproduzida continuamente, é adicionada a um card do site. 11:13

✨ Principais aprendizados

Prompts e imagens de referênciaImagens iniciais e finais bem alinhadas ajudam a gerar uma transição mais adequada; o formato também deve ser consistente para evitar bordas indesejadas. 5:04
Rolagem suaveA recomendação é pedir que o Antigravity recodifique o vídeo com FFmpeg e use cada quadro como keyframe, para melhorar a resposta da animação ao scroll. 11:44
Pedidos específicos facilitam ajustesNomear corretamente as seções e os cards e explicar como cada vídeo deve se comportar ajuda o agente a implementar alterações com mais precisão. 13:15

🧠 Lições aprendidas

Revise o resultado geradoAs imagens podem incluir textos ou setas indesejados, e o site pode apresentar problemas visuais; vale iterar nos prompts e verificar cada resultado. 5:34
Design não é tudoAnimações melhoram a apresentação, mas o valor mais amplo de um site ou aplicativo também depende das automações e do back-end. 14:47

🏁 Conclusão e próximos passos

Experimente a técnicaA mesma abordagem pode ser aplicada a produtos e outros tipos de site, combinando imagens, vídeo e instruções claras para o agente. 1:00
Continue aprimorando o projetoO autor observa que o site ainda poderia receber melhorias e apresenta sua Masterclass como um caminho para aprofundar o uso do Antigravity e criar automações. 15:19

Transcript excerpt

0:00 Nesse vídeo vocês vão ver como criar sites com animações 3D absolutamente incríveis em menos de 10 minutos. Nesses 10 minutos a gente vai tanto construir o site usando o Antigravity para criar uma solução como essa. A gente vai usar o Nano Banana 2 para gerar as imagens e o Kling 3 para gerar os vídeos. Mas antes de começar, eu queria só pedir para você deixar um like e se inscrever no canal para me ajudar a trazer mais vídeos como esse. Então bora começar. Esse primeiro site que a gente tá vendo foi uma solução que eu criei

0:30 para uma empresa de construção de casas de alto padrão. Nessa primeira sessão do site, construímos o cenário dos seus melhores momentos há mais de 18 anos projetando residências exclusivas com arquitetura autoral, materiais nobres e atenção obsessiva a cada detalhe que transforma espaço em experiência. E se a gente rolar o mouse para baixo, a gente consegue ver a animação da casa sendo construída. Então, se eu rolar para baixo, essa animação passa paraa frente. Se a gente rolar para cima, ela volta pro estado original. E eu vou arrastar aqui do lado para ficar mais fácil de

🔒 The full, searchable transcript is available with Pro.

Suggestions