Como criar SITES ANIMADOS com Google Antigravity (Tutorial Completo)

Artigo de Blog

Tudo sobre: Como criar SITES ANIMADOS com Google Antigravity (Tutorial Completo)

[música] Fala galera, me chamo Rafael Mod Sala Ninja. Velho, seguinte, no vídeo de hoje eu vou te mostrar como você pode criar páginas animadas utilizando aqui o antiraft.

Então vou te mostrar aqui alguns exemplos. A gente vai gerar a imagem do zero, a gente vai gerar a animação e depois vai inserir aqui numa lampage fictícia pra gente poder testar.

Então aqui um exemplo do qual eu tinha feito, que ele fica aqui andando e basicamente eu fiz isso aqui a partir de uma imagem, consegui gerar essa animação e trouxe para cá. Aqui é um outro exemplo. E aí essa mesma animação eu posso deixar ela rolando assim ou então eu posso atribuir ela a um screw do mouse, por exemplo, né?

Entendendo o conceito

Então o que eu tô te mostrando aqui, você consegue fazer de várias maneiras ou então deixar mais uma vez ele passando aqui de forma automática. Então tem várias formas aqui da gente poder trabalhar, beleza?

Então nesse vídeo vou te mostrar aqui todo o passo a passo de como que faz para você poder criar esse tipo de animação do zero, seja com a sua imagem, imagem do seu cliente, enfim, totalmente personalizado. E depois vou te mostrar como que você vai inserir em uma L page.

Se tu gosta desse tipo de vídeo, você curte, velho, faz o seguinte, esmaga o dedo do like, se inscreve no canal, deixa embaixo nos comentários a sua sugestão de vídeo. Dito isso, vamos ver aqui no vídeo como que funciona na prática. Então vamos lá, galera.

Aplicacoes reais

Seguinte, vamos já iniciar aqui pelo passo um, do qual a gente precisa ter uma imagem, uma imagem base, uma imagem de referência e aí pode ser, cara, qualquer imagem, literalmente o item que você quer animar, pode ser uma land page, um site, pode ser, enfim, um post que você tenha visto. Vamos nesse exemplo aqui utilizar o Freepick, beleza?

Então eu vou assar pelo Freepick, porém você pode pegar referências também ali na Beh, no Pinterest, enfim, o que não falta é site que você pode pegar referências, seja de página ou seja de um determinado item. Nesse caso, eu vou fazer através de um item, que é basicamente aqui o açaí.

Então eu vi aqui no site do Free Piick, que inclusive vou deixar o link para vocês aí abaixo na descrição, cara. Um site que vale super a pena. Obviamente tem imagens gratuitas, porém tem imagens pagas aqui que você pode utilizar.

O futuro do tema

E aí, ó, digitando a saia aqui na barra de pesquisa, veja que ele aparece várias opções pra gente, ó. Essa daqui eu gostei, vou selecionar ela.

Beleza. Outra coisa legal também que eu poderia pegar só conteúdo com IA ou eu poderia excluir para não trazer nenhum conteúdo com inteligência artificial, ó. Ah, Rafa, não achei legal.

Pode estar aqui, ó, copo de açaí, E aí você tem várias opções aqui. Eu vou usar esse primeiro aqui mesmo. Eu vou fazer aqui o download, vou jogar numa pastinha pra gente poder trabalhar.

Beleza? Então vou pegar aqui, fazer o download, vou arrastar aqui pra minha pasta.

E beleza, galera, já tô aqui com o meu açaí, a minha imagem LP açaí a perfeito. O que que a gente vai fazer agora?

Vamos ao passo dois. Então, pegou referência ali, peguei bem rapidinho com vocês, nem escolhi muito. Vamos agora pro passo dois.

O passo dois é se a gente gerar a imagem de início e a imagem de fim. Para isso, a gente vai precisar de dois sites, que é basicamente aqui o chat GPT ou o Gemini.

Aí você escolhe qual que você acha que faz mais sentido, que você curte mais. E também o ISISK, que é uma IA do Google para gerar imagem.

Aqui tá o link, né, do ISC, ó. Você entra pelo Labs ali do Google, aí tem a opção de você acessar e eu vou te mostrar aqui na prática, tá?

Então vamos abrir aqui o chat GPT e acessando pelo link que eu vou deixar embaixo na descrição também pr facilitar para vocês. Veja que a gente tem aqui algumas opções, ó.

É o whisk que é para criar imagens, o flow para gerar vídeos e a gente vai usar os dois nessa aula. E tem esse aqui para gerar música também. Vamos começar pelo whisk.

Então vou parar aqui nesse botãozinho, ó. Inicio o whisk. Ele vem para essa tela.

Eu vou abrir aqui a ferramenta e criar o novo projeto. E aqui no eh por enquanto não vou mexer aqui no whisk.

Eu vou pegar a minha imagem. Ó, essa imagem aqui, inclusive nem tá com fundo, eh, nem retire fundo, mas ela já vai servir aqui pra gente, vai ficar legal, vocês vão ver. E abre aqui o chatpt.

Então, vamos seguir pelo passo dois. Vamos gerar a imagem de início e a imagem de fim. E para isso a gente vai usar essas duas ferramentas.

Eu vou começar vindo aqui no chatpt, arrastando a imagem do meu açaí ou o que você tiver desenvolvendo e aí eu vou vou falar a minha ideia para ele. Então eu vou digitar aqui, já mostro.

Perfeito, galera. Digitei aqui o meu prompt. Então, olha só, irei gerar uma animação onde iremos ter a imagem de início e de fim, né?

Então, começa ali na imagem de início e a imagem de fim. E depois vou pegar essas duas imagens, irei enviá-las para animar ali no VO3.

De início, eu quero que ele gera um prompt para gerar para gerar essa imagem. Os textos vão ficar na esquerda e a imagem na direita, mas poderia ser o centro, enfim, depende da forma como você quer montar a página.

E aqui a gente já vai planejando. Coloquei aqui, ó, que deve aparecer todo o copo na imagem para ele acabar não cortando. Beleza?

Basicamente vai ser isso aqui. Eu vou enviar e vão ver o que ele retorna pra gente. Ele já retornou aqui.

Foi bem rapidinho, ó. Prompt para gerar imagem. Eu vou copiar, voltar aqui no ISC, vou colar e aí vou dar uns dois enters aqui, que ele vai gerar quatro imagens pra gente.

Ah, um ponto interessante é que eu quero que a imagem seja aqui, ó, paisagem, beleza? que é para encaixar legal no site. Outra coisa, eu vou querer que essa imagem também o fundo dela seja roxo.

Então, vamos fazer alguns ajustes. Quero que o fundo seja roxo e não metade clara e metade escura. Ajuste para mim.

E aí eu vou tirar aqui um print de como ficou agora, só para ele ver. Anexei um print para ver como ficou.

Perfeito. E no caso, essa vai ser a nossa imagem final.

Por quê? Eu quero que a primeira imagem seja os itens caindo em cima do açaí e a imagem final vai ser o açaí montado.

Beleza? Ó, ele tá gerando aqui pra gente de novo prompt, cara. E esse whisk aqui, ele é muito bom.

Olha só, eu vou enviar aqui de novo, vou pedir mais quatro imagens. E aqui, ó, se quiser trocar a parte de fundo.

E aí eu posso até copiar esse item aqui, eu vou jogar aqui no finalzinho, ó. Então, basicamente tô copiando e colando aqui, tá? Não tem segredo.

E aí, esse roxo aqui, esse aqui tá legal? Deixa eu ver, ó. Esse aqui eu gostei.

Nossa, esse aqui ficou bom também. Ah, eu gostei desse daqui, ó. Eu vou fazer o download.

Deixa eu pegar ele e vou arrastar aqui pro meu pro meu site, né? Deixa eu arrastar para cá. Vai ser a imagem 01, na verdade, a imagem 02.

E agora a gente vai gerar a imagem 01. Deixa eu arrastar aqui.

Então, eu fiz o download da imagem. Você vai clicar nesse botãozinho aqui, ó, para fazer o download.

Beleza? E aqui eu vou pedir novamente para ele, porém para gerar agora a imagem de início, que vai ser os itens caírem dentro do copo de açaí.

Só que o copo de açaí não precisa, não é para ficar cheio, né? Porque ele vai ficar cheio ao final, que vai ser justamente essa imagem que a gente acabou de cheirar. Beleza?

Então vou digitar aqui e já mostro para vocês. Ó, digitei aqui esse prompt, ó. Agora vamos gerar a imagem de início, onde os ingredientes devem estar caindo dentro do copo do açaí.

O copo não deve estar cheio e deve mostrar o copo todo semelhante, né? O copo todo semelhante à imagem.

Eh, primeira imagem gerada. Além disso, quero que alguns ingredientes caiam no chão. Perfeito.

Vou mandar aqui para ele. Ele vai me retornar com o prompt. Eu vou jogar aqui.

E agora, como eu já tenho a primeira imagem em base, para facilitar aqui para ele, eu posso simplesmente pegar minha imagem e arrastar para cá, ó, nessa parte de assunto, né? Então, veja que eu tenho esse iconezinho, ó, aqui no meu canto superior esquerdo.

Você vai clicar, vai arrastar tua imagem para cá, a imagem que você gerou, seja a imagem de início ou a imagem de fim. E agora eu vou pegar esse prompt.

E aí ele vai levar em consideração tanto o meu prompt quanto essa imagem aqui. Então eu vou pedir para ele gerar mais quatro imagens pra gente ver como que vai ficar. Galerinha, ele gerou aqui para mim, mas eu não gostei.

Vou explicar o porquê. Ó, ele colocou os ingredientes caindo, né?

Inclusive ingredientes aqui no chão. Mas o copo tá cheio. Eu não quero.

Eu quero que os ingredientes preencham o copo. Então eu mandei aqui, ó.

ficou boa, mas repara que o copo está cheio. Não quero, preciso que tenha espaço para fazer o efeito de ingredientes caindo ali no copo.

Tirei um print, joguei aqui, vou mandar para ele e aí eu vou pedir os ajustes até eu achar aqui a imagem que eu considero ideal. Beleza? Ó, ele gerou aqui pra gente.

Ele tinha gerado assim, eu também não tinha gostado porque ele mudou o copo. Aí eu voltei aqui, ó, e falei para ele que precisa colocar o copo com o leite condensado, né?

E aí ele gerou aqui para mim. Eu gostei dessa, eu gostei dessa daqui, essa também.

Eu vou pegar essa daqui, eu vou fazer o download e aí eu vou arrastar aqui pro meu computador. Então eu já tô com a minha imagem de início e a minha imagem final. E aí de posse dessas duas imagens, que que a gente vai fazer?

Então ó, gerei aqui a imagem início, a imagem fim. Agora a gente vai precisar gerar as animações através do VO3.

Rafa, como que eu tenho acesso ao VO3? Vou deixar o link para vocês aí na na descrição, tá?

Mas basicamente é pelo mesmo site que a gente acessou o ISC, a gente acessa aqui o VO3, que é basicamente esse flow aqui, ó. Você vai acessar o site que eu vou deixar para vocês. Clica aqui, ó, abra o flow.

Ele vai vir para cá. E, cara, justamente quando tô gravando o vídeo, mudou aqui a visualização.

Então, bom que a gente já conhece a visualização nova. Era um pouquinho diferente aqui, mas vai dar pra gente poder criar porque essa é a ferramenta de criação de imagem de de vídeos aqui do Google.

Rafa, como que a gente faz agora? Vamos lá.

Eu já tô aqui no flow. Vamos fazer o seguinte. Eu vou clicar aqui nessa opçãozinha.

Eu vou querer vídeo, eu vou querer ele paisagem, que vai ser o background do meu site. Aqui, se eu não me engano, deve ser a velocidade. Eu vou deixar esse aqui.

E eu quero fazer por frames, ou seja, o frame de início e o frame final, que vão ser justamente as duas imagens do qual a gente criou. Deixa eu abrir aqui para vocês verem, ó.

A imagem início e a imagem final para fazer uma animação, ó, da hora. Beleza? E aí, como que eu vou pedir aqui para ele o que eu quero?

Eu vou pedir pro próprio chat GPT gerar esse prompt para mim também. Então eu vou pegar minhas duas imagens, ó.

Eu vou arrastar aqui pro meu chat. Então vou pegar. Perfeito.

Agora vamos gerar o promptimar as imagens. Então, a primeira imagem vão ser os ingredientes caindo no có até encher ele por completo. Enquanto ele vai gerando aqui o prompt pra gente, eu vou voltar aqui no flow e aí eu vou colocar colocar minha imagem de início e minha imagem final clicando aqui nesse botão.

Ele retornou aqui pra gente o prompt. Eu vou pegar esse prompt, vou arrastar aqui, vou copiar, vou voltar. Então, tô com a minha imagem início e minha imagem final selecionadas aqui, ó.

Beleza? E aí eu vou simplesmente colar aqui o meu prompt.

Deixa aqui o VO3 3.1 FH, tá? Você deixar o Quality, ele fica muito, ele gasta muito crédito. Beleza?

Então tô gerando aqui. Vamos ver como que ele vai trazer pra gente. Se eu não me Ah, tá, entendi.

Esse daqui, ó, X1, X2, X3, X4, é a quantidade de vídeos que você quer gerar. Então, imagina que eu quero gerar de dois em dois, de três em três. Aí você vai selecionando aqui.

Beleza? Como eu só tô gerando um, eu vou aproveitar e vou selecionar aqui, né, X3 e vou pedir novamente o mesmo prompt. Então, vou colar aqui, selecionar aqui a imagem início final e vou dar um enter também.

Selecionar aqui a imagem, imagem dois, coler aqui o mesmo prompt, vou enviar. E aí ele vai gerar pra gente quatro vídeos, que aí fica interessante porque às vezes um vem ruim, aí vem um outro que que é legal.

Então, gerando mais de um, aí a gente consegue ter uma flexibilidade bacana pr conseguir visualizar aqui o resultado final. Ele gerou aqui o primeiro já. Vamos ver como que ficou.

Ó, deixa eu tirar aqui o áudio. Ficou legal, mas eu queria um pouquinho mais de ingrediente caindo aqui no chão.

Então eu vou voltar aqui, vou falar, vou falar para ele, ó, o vídeo ficou muito bom, mas quero um, é alguns ingredientes caindo no chão para dar um efeito que o açaí vem bem recheado. [risadas] Beleza? E aí eu vou fazer o mesmo rolê, Pegar aqui a imagem de início, a imagem final.

Vou aproveitar aqui. E agora eu vou colocar X4. Não esquece de deixar aqui frames.

Pode deixar aqui o VO3.1 F. E aí eu vou pegar aqui o novo prompt, vou copiar, vou colar. Peço para ele gerar e enquanto ele tá gerando, eu vou te mostrar os outros três vídeos.

Então vou clicar aqui. Vamos ver esse. Nossa, esse ficou bem legal também, ó.

Gostei. Deixa eu ver esse daqui.

gostei. Já vou baixar.

Vou ficar aqui em baixar. Vou pegar aqui 1080p.

Eu não quero ficar criando aqui várias versões pra aula não ficar longa. Então, aquela dali eu gostei.

Vou pegar ela. Deixa eu só ver esses últimos quatro que eles vão criar aqui pra gente e aí logo na sequência a gente já vai pro próximo passo. Beleza?

Ele gerou aqui para mim. Vamos escolher.

Eu já baixei aquele lá que eu tinha comentado, mas vamos ver se esses que ele gerou agora vão ficar bons. Não, vamos ver esse aqui.

Ficou legal. Gostei desse. Deixa eu ver.

Esse aqui ficou bacana também. E esse aqui? Vamos ver.

Nossa, esse ficou bom. Eu vou pegar esse último aqui, vou fazer o download dele Perfeito.

Enquanto ele tá fazendo download aqui, vamos só recapitular rapidinho. Primeiro você vai pegar uma imagem referência, independente da onde seja. Aqui eu peguei no free pick, mas você pode usar sites como Bence ou Pinterest.

Passo dois, você vai gerar ali a imagem de início e fim. E aí utiliza uma inteligência artificial como o Gemini ou o chat GPT para te gerar os prompt e o whisk para gerar ali as imagens, tanto a imagem inicial quanto a imagem final da sua animação. Passo três, você vai gerar essas imagens, né?

Vai gerar animação a partir das imagens com o VO3. Tá o link aqui bonitinho para vocês poderem consultar. E agora o passo o passo quatro vai ser a gente pegar esse vídeo e transformar em uma sequência JPEG.

Por quê? Eu consigo criar tanto uma imagem para ela ficar passando ali loop infinito, quanto eu consigo criar uma animação que ela funciona através do screw do mouse, interligada ao screw do mouse através desse método.

E para isso a gente vaiar esse sitezinho aqui, ó, e zegif, aqui nessa parte de vídeo tools, vídeo para JPL. Dá para fazer PNG também, mas PNG é muito pesado, então eu vou deixar assim, beleza? Fiz o download aqui do vídeo.

Deixa eu baixar. Vou pegar esse vídeo e vou arrastar aqui pro meu PC.

Perfecto. Agora com o vídeo em mãos, vamos pro passo quatro que é a sair site chamado exegf.com. Nessa abinha aqui de vídeo topack.

Eu vou pegar aqui o vídeo e vou arrastar para dentro do site. Depois de ter arrastado o vídeo, ele me deu quando que eu quero iniciar e é um vídeo de 8 segundos, eu vou deixar ele assim mesmo.

Mas caso você queira iniciar a partir do segundo um, segundo dois ou finalizar antes do segundo oito, você pode fazer. Eu vou deixar assim mesmo.

Eu vou simplesmente clicar nesse botão aqui, ó, converter true jpg. Beleza, ele converteu aqui para mim, ó.

Então são várias e várias imagens e aí eu vou cá nesse botãozinho aqui chamado, ó, download frames e zip. Então vou fazer o download de tudo através de uma pasta zip.

Essa pasta zip eu vou pegar ela e vou arrastar pro meu computador. Então vou mostrar para vocês como que eu gosto de organizar.

Peguei a pasta, arrastei aqui para dentro do meu computador, onde eu vou criar minha L page. Eu vou dar dois cliques para poder extrair no Windows, se eu não me engano, clica com o botão direito e clica em extrair. Só que você precisa ter um programa para extrair raro.

Então, se você não sabe, né, isso aí, você dá uma pesquisadinha, mas só pesquisar é zip, né? Programa para descompactar zip, você encontra um monte, tanto para Windows quanto paraa Mac, tá?

Essa pasta eu vou deletar. A pasta que eu extraí, eu vou colocar imagens. aula a sair e veja que tem aqui 40 itens, que é justamente a imagem de início, ó, e a imagem final e todas as imagens ali entre elas, tá?

Caso você queira com mais qualidade, você pode fazer com PNG também, mas aí eu acho que é muito pesado. Eu vou fazer assim mesmo.

E agora por último, a gente vai pro próximo passo. Então, transformamos o vídeo a animação e uma sequência JPG.

Agora a gente vai pro passo C, que é gerar a lampage no antigraft. E aí, para isso eu vou pedir aqui um prompt também pro chat GPT. Então agora vamos criar a lampage.

Quero criar apenas a giro section. Beleza?

Eu poderia pedir para criar toda a lampage, mas não. Quero criar apenas a hero a hero section.

Eh, quero que tenha headline, subhe, três destaques, CTA e menu. Não quero inserir imagens. Irei colocar as imagens da animação depois.

poque em deixar o design bonito também. Preciso ter um IDF, widif bom, que é a largura do conteúdo, né, para eh o texto ficar legal e a animação no lado direito ficar boa.

Também gere o promption no antigraft. E eu vou dar um enter, ele vai gerar aqui para mim.

Enquanto a gente tá gerando prompt, vamos abrir aqui o anraft e aí a gente já faz a criação. Beleza? Tô aqui no meu antigraft, vou cãozinho aqui, ó, open folder para abrir aqui a minha pasta.

Ele abriu aqui para mim. E como eu já tinha colocado a pasta de imagens dentro da pasta que eu vou criar land page, ele já aparece aqui, ó, todas as minhas 40 imagens da minha animação.

Então já facilita aqui pra gente. Ã, caso você não tenha colocado as imagens dentro da pasta que você abriu graft, é só pegar a pasta, obviamente e arrastar aqui para dentro, tá? E aí fica fácil depois a gente poder manipular.

Eu vou voltar aqui. Eu vou copiar tudo isso daqui.

Inclusive ele já gerou aqui a ou a própria COP para mim, né? Ó, deixa eu copiar tudo.

Vou voltar aqui no meu antigraft. Vou colar aqui, galera. O Gemini, cara, 3.1 Pro aqui tá muito lento, então eu tô utilizando flash, tá?

Então vou deixar Gemini 3 Flash. Vou deixar aqui Fash também porque eu quero que seja mais rápido e também é algo simples, é uma L page só a parte do hero section, então não preciso ativar o modo planning. E aí eu vou dar um enter aqui, ele vai começar a criar pra gente, galerinha.

Ele finalizou aqui pra gente, ó, aqui o antigraft, né? Então ele finalizou aqui a página.

Você pode abrir a página aqui na sua pastinha, né, clicando aqui no index.html, ó, ele vai abrir a página para você, tá? Ou uma outra forma, você pode instalar essa extensão de do próprio Visual Studio Visual Studio Code, né? Mas aqui no Antig também, que é bem parecido, para não dizer igual.

Você vem aqui, ó, go live e aí você consegue eh criar um servidor interno. Para instalar essa extensão é bem simples.

Aqui no menu lateral da esquerda, você vem aqui extensões. E que você pesquisa por L Server, você vai encontrar, ó, essa daqui, só clicar, instala. E depois de instalar ela, você vai ter esse botãozinho aqui, ó, Go Live.

É, se você clicar, ele vai abrir aí o teu site também da mesma forma, tá? Então, eh, o próprio antigraft já abre ali normalmente o navegador.

Se ele não abrir, você pode assar a pasta e abrir manualmente ou então através desse live server. Ou então pode pedir aqui para ele abrir a página para você também que ele abre. Beleza?

Então, quatro opções diferentes aí para você não ter dúvida. Beleza? Fez isso.

Porém, ficou bacana ali a Hero Section. Beleza?

Só que aí o que a gente quer é ter a animação ali, né? Como que a gente vai fazer agora para ter a animação? Eu vou pedir aqui para ele.

Então agora vamos colocar a animação em todo o background da heroction. Importante falar isso aqui, tá?

Senão ele vai colocar só na coluna da direita. Não alterar a posição dos textos nem menu.

Inserir apenas a animação de background. Os textos devem ficar por cima da animação de background, só para ele não jogar o texto para cá, né, para trás, né, por causa do Z index, deixar na frente como prioridade.

E aí eu vou falar para ele, as imagens para criar a animação estão na pasta. Posso dar um arro, vim aqui em file e selecionar aqui a pasta, ó, imagens aula, sair.

Ou mais simples, cara, você pode vir aqui na pastinha, clica, segure a raça e joga aqui no chat, ó. Clica, segura a raça e joga aqui no chat.

Ele já puxa aqui a pasta para ele poder entender. As imagens para criar animação estão na pasta.

Beleza. Quero que a animação seja fluída. E aí eu vou dar um enter aqui, ele vai começar a criar pra gente, beleza?

E aqui no navegador, depois que ele criar, é só você atualizar a página e já vai carregar aqui pra gente. Então vamos esperar ele criar e eu já retorno para poder te mostrar aqui o resultado final e se precisa fazer algum ajuste.

Ó, veja que ele já deu até uma cagada aqui no texto, ó. Colocou o texto aqui pra esquerda, já é algo que tem que pedir ali para ajustar, mas vamos aceitar aqui e vamos ver o retorno.

Ele tá criando aqui pra gente, mas enquanto ele tá criando aqui, ó, se eu atualizar a página, já mostra como tá ficando. Aqui alguns ajustes que eu já quero fazer.

É imagem, o animação tá muito rápida, ó. A animação tá muito rápida e também tá com essa imagem pontilhada aqui, ó. E aí eu vou já mandar isso para ele, ó.

A animação está muito rápida. Quero que ela seja em slow motion, porém precisa ser fluída. Esse daqui eu vou pedir para ele tirar.

É, deixa eu tirar um print aqui. Vou arrastar. retire aquele campo eh com bordas na lateral direita.

Aquele campo com eu posso até tirar o o print daqui, ó, mais específico, né? Mas enfim, vamos só esperar ele finalizar.

Aí eu vou mandar esse comando aqui para ele também. Ele falou que terminou aqui.

Vamos abrir a página pra gente ver. Dar uma atualizada. Cara, ficou top.

Eu só acho que a animação ainda tá bem rápida. Se a gente for olhar aqui o vídeo, ó, deixa eu até abrir pra gente ver.

Ó, o vídeo tá slow motion. Aí, cara, é só questão de você pegar e mandar o prompt ali pro antigraft, né? Ah, deixa agora slow motion, faz o ajuste X, ajuste Y.

Outra coisa, caso você queira que essa animação ela seja e vinculada ao screw do mouse, o ideal é você fazer o quê? Termina de criar L page, obviamente, né, criando os outros blocos.

E aí você faz ali, basicamente, seleciona aqui a passa, né, arrasta para cá e pede para ele vincular essa animação dessas imagens ao screw do mouse. Conforme a pessoa for descendo o screw, vai acontecendo ali os itens eh caindo dentro do copo de açaí.

E é, por consequência, você pode pedir também quando subir o screw do mouse, quando tiver voltando, os ingredientes vão saindo do copo e assim vai fazendo aquele efeito bem legal. Beleza?

E aí, galera, o que vocês acharam, cara? Vocês curtiram? É uma maneira bem simples da gente fazer animação.

E aí você pode fazer animação vinculada a screw, você videozinho igual a gente fez, você pode fazer animação nos outros blocos do site também, enfim, abre n possibilidades de coisas que você pode fazer. E cara, basicamente que a gente usou muita ferramenta do Google utilizando chatt também.

E a partir dessa base aqui você consegue criar bastante coisa legal aí pras suas páginas para poder diferenciar elas. Se tu gostou desse vídeo e você curtiu, faz o seguinte, esmaga o dedo no like, se inscreve no canal e deixa aqui embaixo comentários a sua sugestão de vídeo. Lembrando, eu vou deixar o link do nossos treinamentos aí na descrição e também o link dos parceiros do canal, beleza?

Dito isso, obrigado pela sua audiência, um abraço, até a próxima. Valeu,

Pontos-chave

• E aí utiliza uma inteligência artificial como o Gemini ou o chat GPT para te gerar os prompt e o whisk para gerar ali as imagens, tanto a imagem inicial quanto a imagem final da sua animação.
• Então eu vou voltar aqui, vou falar, vou falar para ele, ó, o vídeo ficou muito bom, mas quero um, é alguns ingredientes caindo no chão para dar um efeito que o açaí vem bem recheado.
• E é, por consequência, você pode pedir também quando subir o screw do mouse, quando tiver voltando, os ingredientes vão saindo do copo e assim vai fazendo aquele efeito bem legal.
• Enquanto ele vai gerando aqui o prompt pra gente, eu vou voltar aqui no flow e aí eu vou colocar colocar minha imagem de início e minha imagem final clicando aqui nesse botão.
• E agora, como eu já tenho a primeira imagem em base, para facilitar aqui para ele, eu posso simplesmente pegar minha imagem e arrastar para cá, ó, nessa parte de assunto, né?

Fonte: Assistir vídeo original no YouTube
Conteúdo baseado na transcrição original