Scroll-Telling com IA: A Técnica que Grandes Marcas Usam e que Você Pode Replicar em Casa

Resposta rápida: É possível criar um site profissional com animações dinâmicas e interativas — como os do iPhone/Apple — usando ferramentas de IA do Google (Gemini, Wiscky, Flow/Veo 3 e AntiGravity) em questão de minutos, sem precisar de uma agência de publicidade e praticamente de graça. O resultado pode virar uma fonte de renda extra prestando serviços de criação de sites para pequenas empresas.

Você já ficou de queixo caído ao navegar num site onde tudo ganha vida conforme você vai rolando a tela? Aquele tipo de animação que acompanha o scroll do mouse, com elementos surgindo, explodindo e se organizando de forma cinematográfica — igual ao site da Apple ou de grandes marcas internacionais?

Pois é. Há algum tempo, construir algo assim exigiria uma agência de publicidade cara, semanas de trabalho e um orçamento de cinco dígitos. Hoje, com o avanço da inteligência artificial, qualquer pessoa com um computador, uma assinatura do Gemini e as ferramentas certas consegue replicar esse nível de profissionalismo — e ainda transformar isso em renda extra.

Neste artigo, você vai entender o passo a passo completo de como criar um site de agência com IA, quais ferramentas usar, quanto isso pode custar (ou economizar), e como monetizar esse conhecimento.

🎬 Veja o Resultado Antes de Começar — Vale Cada Segundo

Antes de mergulhar no passo a passo, assista ao vídeo do canal Elias de Mello | IA e Agentes de IA, onde o próprio Elias — coordenador de uma equipe de IA numa empresa de tecnologia em São Paulo, com 15 anos de experiência em tech — mostra ao vivo a criação de um site animado e interativo usando o Guaraná Antarctica como produto base. O resultado é simplesmente impressionante: animação em scroll, efeitos de explosão com frutas e latinha, publicado online em minutos e praticamente de graça.

📺 Assista aqui no YouTube

O canal tem o objetivo direto: não ensinar inteligência artificial em teoria, mas ensinar como aplicar IA na sua vida profissional, pessoal e nos seus negócios para tirar vantagem competitiva agora. Exatamente o que você vai aprender aqui.

O Que É Possível Criar com IA em Minutos?

Vamos colocar em perspectiva. Segundo levantamentos de agências digitais brasileiras:

• Um site institucional simples custa, em média, R$ 3.000 a R$ 5.000
• Sites com animações e design interativo (scroll-telling) variam entre R$ 8.000 e R$ 30.000+
• Projetos com experiência de usuário premium (tipo Apple, Nike, Starbucks) podem ultrapassar R$ 50.000
• Uma agência cobra em média R$ 150 a R$ 300 por hora de trabalho

Com as ferramentas de IA que vamos mostrar abaixo, você consegue chegar num resultado visualmente equivalente ao de uma agência — investindo apenas o valor da assinatura do Gemini (que tem planos a partir de valores acessíveis) e algumas horas de aprendizado.

As Ferramentas Gratuitas (ou Quase) Que Você Vai Precisar

Antes de ir ao passo a passo, conheça o arsenal:

💡 Dica importante: O Gemini gratuito pode ter limitações em alguns recursos. O investimento no plano Pro é altamente recomendado — especialmente se você planeja transformar essa habilidade em renda extra.

Passo a Passo: Como Criar um Site de Agência com IA

1. Escolha o Produto e Organize a Pasta do Projeto

O primeiro passo é simples: escolha uma imagem de alta qualidade do produto que você quer destacar no site — pode ser o produto de um cliente, o seu próprio ou até um produto aleatório para praticar.

No vídeo, Elias escolheu o Guaraná Antarctica como exemplo prático. Ele baixou uma imagem de qualidade da internet e criou uma pasta no computador com o nome do projeto (guaraná). Tudo que for gerado ficará nessa pasta.

Dicas para essa etapa:

• Prefira imagens em alta resolução (mínimo 1080px)
• Fundo neutro ou transparente facilita a geração de efeitos
• Salve também uma versão sem fundo, se possível

2. Gere o Prompt de Imagem no Gemini 3 Pro

Aqui começa a mágica. O objetivo é criar dois frames:

• Frame final: imagem com o produto e efeitos (explosão de frutas, líquido, etc.)
• Frame inicial: o background limpo, sem o produto

Para isso, você usa o Gemini 3 Pro com um prompt estruturado. O prompt original foi criado para o projeto do Starbucks (com café), e o Gemini converte automaticamente para o seu produto.

Estrutura do prompt para o Gemini:

• Subject (assunto): o produto central
• Composição: como os elementos estão organizados
• Elementos-chave: o que aparece ao redor do produto
• Ambiente e luz: o clima da cena
• Estilo e detalhes: realismo, nível de detalhe, qualidade

3. Gere as Imagens no Wiscky (Nano Banana)

Com o prompt gerado pelo Gemini, acesse o Wiscky — ferramenta de geração de imagens do Google que usa o modelo Nano Banana — e:

1. Arraste a imagem do produto para o Wiscky
2. Cole o prompt gerado pelo Gemini
3. Gere múltiplas opções (geralmente 2 a 4 variações)
4. Escolha a melhor e faça o download

Se a primeira geração não ficou como esperado (no vídeo, a latinha sumiu na primeira tentativa), peça um ajuste ao Gemini e regere. Esse processo de iteração é natural e faz parte do fluxo.

4. Crie o Prompt de Animação e Gere o Vídeo no Flow (Veo 3)

Esta é a parte que mais impressiona: transformar o frame em um vídeo animado cinematográfico.

O Flow é a ferramenta do Google que usa o modelo Veo 3 para geração de vídeos. Você vai:

1. Criar um novo projeto no Flow
2. Fazer o upload do frame inicial e do frame final
3. Colar o prompt de animação (gerado pelo Gemini, assim como o de imagem)
4. Gerar o vídeo em Fast (para economizar créditos) ou HD

O resultado? Vídeos de ~8 segundos com animações realistas — líquido saindo da latinha, frutas explodindo ao redor, efeitos de natureza, tudo gerado por IA com física convincente.

Atenção aos créditos: o Flow usa créditos de IA para gerar vídeos. Fique de olho no consumo, especialmente se for gerar muitas variações.

5. Remova a Marca D’Água com Magic Eraser

Os vídeos gerados pelo Veo 3 podem vir com uma pequena marca d’água no canto. Para removê-la:

1. Acesse magiceraser.org
2. Faça o upload do vídeo gerado
3. Marque a área com a marca d’água
4. Clique em “Remove Now”
5. Faça o download do vídeo limpo

O resultado pode ter um leve artefato visual, mas é quase imperceptível em movimento e não compromete o resultado final.

6. Converta o Vídeo em Frames com Ezgif

Este é o segredo técnico que permite a animação de scroll no site:

• Acesse ezgif.com
• Use a ferramenta “Video to JPG”
• Faça o upload do vídeo limpo (sem marca d’água)
• Configure: 24 frames por segundo, qualidade máxima (1920px)
• Converta e faça o download do ZIP com todos os frames

Cada frame é uma foto do vídeo. No site, conforme o usuário rola o mouse para baixo, o JavaScript exibe os frames em sequência — criando a ilusão de animação em tempo real.

Organize os frames:

• Extraia o ZIP na pasta do projeto
• Renomeie a pasta para assets (importante para o script do site reconhecer os arquivos)

7. Desenvolva o Site com o Google AntiGravity

Chegou a parte onde o site é gerado do zero — literalmente por um agente de IA.

O Google AntiGravity é um IDE (ambiente de desenvolvimento) que usa agentes de IA baseados no Gemini 3 Pro para planejar, escrever e testar código autonomamente. Lançado em novembro de 2025, é gratuito e disponível para Windows, macOS e Linux.

Fluxo no AntiGravity:

1. Abra a pasta do projeto no AntiGravity
2. Cole o prompt de desenvolvimento (gerado pelo Gemini, convertido para o seu produto)
3. Deixe no modo Planning — o agente vai apresentar o plano antes de executar
4. Confirme os comandos de instalação (Node.js, dependências)
5. Aguarde o agente criar todos os arquivos do site

O agente cria a estrutura completa em TypeScript com Node.js, incluindo:

• Lógica de scroll-telling (animação vinculada ao scroll)
• Paleta de cores baseada na imagem do produto
• Estrutura responsiva e otimizada
• Animação dos frames sincronizada com o mouse

💡 Dica do Elias: Use o Gemini 3 Pro no AntiGravity para interfaces e design. Para back-end e aplicações mais robustas, modelos como Claude podem trazer resultados diferentes — vale experimentar dependendo do projeto.

Se der erro ao rodar localmente (como aconteceu no vídeo com o PowerShell), simplesmente descreva o problema para o agente em português e ele corrige imediatamente.

8. Publique o Site Online de Graça no Netlify

Com o site funcionando localmente, é hora de colocar no ar:

1. Rode o comando de build do projeto (o agente indica qual é)
2. Isso gera uma pasta out ou dist com os arquivos estáticos
3. Acesse netlify.com e arraste a pasta direto para o painel
4. Em segundos, seu site estará online com uma URL pública

Para projetos pessoais e de portfólio, o Netlify gratuito é suficiente. Para projetos de clientes com domínio próprio, recomenda-se uma hospedagem paga como a Hostinger.

Quanto Tempo Isso Tudo Leva?

Isso mesmo: em menos de 2 horas, você tem um site profissional com animação interativa no ar. Uma agência levaria semanas para entregar algo equivalente, cobrando R$ 8.000 a R$ 30.000 ou mais.

Como Transformar Isso em Renda Extra Real

Agora vem a parte mais interessante. Se você domina esse fluxo, abre-se uma oportunidade concreta de geração de renda extra — prestando serviços de criação de sites para pequenas empresas, empreendedores e profissionais liberais.

Quem são seus potenciais clientes?

• Pequenos negócios locais (salões, restaurantes, lojas, clínicas)
• Profissionais liberais (advogados, médicos, psicólogos, arquitetos)
• E-commerces iniciantes que precisam de vitrine digital
• Marcas de produtos que querem um site impactante para lançamentos
• Influenciadores e criadores de conteúdo que precisam de um hub profissional

Quanto cobrar?

Com 2 a 3 projetos por mês, é possível gerar entre R$ 5.000 e R$ 15.000 de renda extra — com custo operacional próximo de zero, já que as ferramentas são gratuitas ou de baixo custo.

Inclusive, se você está buscando outras formas de virar professor particular ou monetizar suas habilidades online, ensinar esse processo para outras pessoas também pode ser uma fonte de renda adicional.

O Papel da IA no Mercado de Web Design: Ameaça ou Oportunidade?

Muitos profissionais de tecnologia se perguntam: a IA vai acabar com o trabalho de web designers e desenvolvedores?

A resposta mais honesta é: vai transformar, não acabar.

O que muda:

• Tarefas repetitivas e de baixo valor são automatizadas
• O profissional passa a ser um orquestrador de ferramentas, não apenas executor
• O tempo de entrega cai drasticamente, aumentando a capacidade de atender mais clientes
• Quem não se adaptar perde espaço para quem souber usar essas ferramentas

Como bem disse Elias no vídeo: “a IA não é o futuro — é sua vantagem agora.” E não adianta saber que existe se você não souber aplicar.

Esse mesmo raciocínio vale para outras áreas. Se você tem interesse em como a IA está impactando o ensino e a educação, vale a leitura sobre EdTech e IA no ensino.

Dicas Avançadas Para um Resultado Ainda Melhor

Melhore a qualidade das imagens

• Use imagens com fundo limpo (facilita a composição)
• Adicione mais de um produto na cena para sites de portfólio
• Experimente diferentes ângulos e iluminações

Personalize as cores automaticamente

• Sempre envie o frame final do produto ao AntiGravity
• O agente lê as cores dominantes da imagem e monta a paleta do site automaticamente
• Isso garante consistência visual sem precisar de um designer gráfico

Otimize para mobile

• Solicite ao agente que a animação funcione também em telas menores
• No prompt de desenvolvimento, inclua: “garantir responsividade em dispositivos móveis”

Hospedagem profissional para clientes

• Para clientes pagantes, use uma hospedagem com domínio próprio (Hostinger, por exemplo)
• Configure SSL (HTTPS) para segurança — a maioria das hospedagens oferece gratuitamente

Conclusão: A Era da IA Já Começou — Você Está Dentro ou Fora?

Criar um site de agência com animações cinematográficas, que antes exigiria semanas de trabalho e dezenas de milhares de reais, hoje é acessível a qualquer pessoa com um computador, acesso à internet e disposição para aprender.

As ferramentas Gemini, Wiscky, Flow/Veo 3, AntiGravity e Netlify formam um ecossistema completo, gratuito ou de baixo custo, capaz de entregar resultados que impressionam qualquer cliente.

E o mais importante: esse conhecimento tem valor de mercado real. Transformar essa habilidade em renda extra é uma das oportunidades mais acessíveis e escaláveis do momento.

🚀 CTA — Sua Próxima Ação

Quer começar agora?

1. ✅ Assista ao vídeo completo do Elias de Mello no YouTube (link nas referências)
2. ✅ Baixe o Gemini e o AntiGravity (links no vídeo)
3. ✅ Escolha um produto ou negócio e siga o passo a passo
4. ✅ Publique seu primeiro site com animação e compartilhe o resultado
5. ✅ Comece a oferecer o serviço para clientes locais

Compartilhe este artigo com alguém que ainda acha que criar sites com IA é coisa de programador avançado. A surpresa vai ser grande.

FAQ — Perguntas e Respostas Frequentes

É preciso saber programar para criar um site com IA usando o AntiGravity e o Gemini?

Não. O grande diferencial dessas ferramentas é exatamente esse: você descreve o que quer em linguagem natural — português mesmo — e o agente de IA planeja, escreve e testa o código por conta própria. Você atua como um gestor do projeto, aprovando etapas e descrevendo ajustes quando necessário. Conhecimentos básicos de informática (criar pastas, instalar programas, abrir navegador) são suficientes para começar.

O Gemini gratuito é suficiente para criar o site ou preciso assinar um plano pago?

O Gemini gratuito pode dar acesso a algumas funções, mas para obter os melhores resultados — especialmente na geração de imagens com o Wiscky, vídeos com o Flow/Veo 3 e o raciocínio mais apurado do Gemini 3 Pro — é altamente recomendado assinar um plano pago. Os planos são acessíveis e o retorno é imediato, principalmente se você pretende usar isso como fonte de renda extra atendendo clientes.

Quanto tempo leva para criar um site profissional com animação de scroll usando essas ferramentas de IA?

O processo completo — desde a escolha do produto até a publicação online — leva entre 1 e 2 horas para quem já conhece o fluxo. Para iniciantes, pode levar entre 3 e 5 horas nas primeiras tentativas, considerando o tempo de aprendizado com cada ferramenta e os ajustes de prompt que normalmente são necessários. Com a prática, o tempo cai drasticamente.

O site gerado pela IA funciona bem no celular (é responsivo)?

Sim, desde que você inclua essa instrução no prompt de desenvolvimento enviado ao AntiGravity. O agente é capaz de criar layouts responsivos que se adaptam a diferentes tamanhos de tela. É importante testar no celular após a publicação e, se necessário, descrever os ajustes diretamente para o agente — ele corrige de forma rápida e eficiente.

O Netlify é confiável para publicar o site de um cliente profissional?

O Netlify é amplamente usado por desenvolvedores do mundo todo e é uma excelente opção para projetos pessoais, portfólios e testes. Para clientes com necessidade de domínio próprio, e-mail profissional e maior controle sobre o servidor, recomenda-se uma hospedagem paga dedicada, como a Hostinger. O Netlify gratuito, porém, já oferece HTTPS, CDN global e deploy instantâneo — mais do que suficiente para começar.

Posso usar o mesmo processo para criar sites de qualquer produto ou segmento?

Sim. O fluxo descrito no artigo é totalmente adaptável. O Gemini converte os prompts para qualquer produto — de uma loja de roupas a um escritório de arquitetura, de um restaurante a um lançamento de aplicativo. A chave está em adaptar bem o prompt inicial, fornecendo ao Gemini uma descrição clara do produto, as cores da marca e o estilo visual desejado.

Como cobrar pelo serviço de criação de sites com IA para clientes?

O valor depende da complexidade do projeto. Sites institucionais simples sem animação podem ser cobrados entre R$ 800 e R$ 1.500. Sites com animação de scroll (como o descrito neste artigo) podem variar entre R$ 2.500 e R$ 8.000, dependendo do número de seções, produtos e personalizações. Você pode cobrar também uma mensalidade de manutenção entre R$ 200 e R$ 500 por mês — o que garante renda recorrente.

O vídeo gerado pelo Veo 3 no Flow pode ser usado comercialmente sem problemas legais?

Este ponto merece atenção. As políticas de uso do Google para o Veo 3 estão em constante atualização. Em geral, conteúdos gerados por IA para uso próprio ou de clientes em sites não são problemáticos, mas é importante verificar os Termos de Serviço atualizados do Google Flow e do Veo 3 antes de usar o material em campanhas publicitárias pagas ou projetos de grande escala. A remoção da marca d’água também deve respeitar as diretrizes da plataforma.

O AntiGravity é realmente gratuito? Existe alguma limitação?

Sim, o Google AntiGravity foi lançado em prévia pública gratuita em novembro de 2025, disponível para Windows, macOS e Linux. A empresa sinalizou que pretende lançar planos pagos voltados a equipes e organizações no futuro. Por enquanto, o acesso individual é gratuito, com algumas limitações de uso em projetos muito complexos ou de grande escala. Para os casos de uso descritos neste artigo — criação de sites para clientes — o plano gratuito é mais do que suficiente.

Vale a pena aprender esse processo agora ou esperar as ferramentas ficarem mais simples?

Vale a pena agora. Quem aprende a usar essas ferramentas enquanto ainda são novidade leva uma vantagem competitiva real sobre concorrentes que ainda usam métodos tradicionais. O mercado de criação de sites não vai esperar: clientes já estão exigindo mais qualidade visual por menos custo, e quem souber entregar isso com IA sairá na frente. Esperar as ferramentas ficarem “mais simples” é o mesmo que perder a janela de oportunidade que existe hoje.

Referências

• Elias de Mello | IA e Agentes de IA — Vídeo: O site de agência que a IA criou em minutos (Resultado) — YouTube, 2025/2026
• Época Negócios — O que é Google Antigravity? Conheça a nova ferramenta de desenvolvimento que integra o modelo de IA Gemini 3 — Nov. 2025
• Renda Geek — Google lança Antigravity, IDE de IA com Gemini 3 Pro — Nov. 2025
• Sagy Marketing — Quanto custa um site profissional em 2025 — Nov. 2025
• Método Viral — Quanto cobra um freelancer para criar um site em 2025? — Jun. 2025
• Brinomi — Quanto custa fazer um site profissional em 2025 — 2025
• Jornal da Fronteira — Google Antigravity surpreende: plataforma transforma a criação de softwares com agentes de IA — Dez. 2025
• Brasil Ideal — Renda extra pós-pandemia: como a internet virou saída financeira para milhões
• Brasil Ideal — Replit e IA: O Guia Definitivo para Validar Produtos Digitais Rapidamente

Artigo produzido com base em conteúdo verificado e atualizado em fevereiro de 2026.