¡Gemini 3 acaba de reventar las animaciones web! Y esto puedes hacer 🔥

Criando Animações com Inteligência Artificial

Introdução à Inteligência Artificial do Google

• O Google se destaca na concorrência com suas ferramentas de inteligência artificial, como o Nano Banana Pro e o Gemini 3, que facilitam a criação de conteúdos visuais e programação.

• Essas ferramentas permitem criar animações em minutos, algo que antes exigia uma equipe inteira de profissionais.

Fluxo de Trabalho para Criação de Páginas Animadas

• O primeiro exemplo apresentado é a criação de páginas animadas usando a plataforma Flow para gerar imagens e convertê-las em vídeo.

• Após criar as imagens, outras ferramentas são utilizadas para remover marcas d'água e converter os arquivos para um formato ideal para web.

Processo Detalhado de Criação

• No Flow, é possível selecionar o modelo Nano Banana Pro sem custo adicional devido a uma atualização recente. A primeira tarefa é criar uma página 404 original.

• As instruções para o design da página 404 são fornecidas em um documento separado; duas imagens são geradas simultaneamente no Flow.

Animação da Página 404

• A imagem escolhida é animada ao mudar da função "criar imagem" para "converter foto em vídeo", introduzindo elementos com transições suaves.

• Resultados incluem vídeos que criam um efeito de loop, permitindo simulações visuais interessantes. O download do vídeo finalizado ocorre em qualidade 1080p.

Remoção da Marca D'Água e Conversão Final

• Para remover a marca d'água do vídeo baixado, utiliza-se uma ferramenta específica onde se marca a localização da marca d'água antes de removê-la.

• O vídeo é então convertido para um formato compatível com web (GIF), criando um efeito contínuo que recomeça automaticamente quando termina.

Integração no Site

• Os recursos criados precisam ser enviados à nuvem através do Supabase, permitindo o uso dos URLs nos sites desejados.

• Uma nova página 404 animada é integrada ao blog existente sobre inteligência artificial, proporcionando uma experiência interativa aos usuários ao acessar links quebrados ou inexistentes.

Introdução ao Manus 1.6 Max e suas Funcionalidades

Avanços na Inteligência Artificial

• O Manus 1.6 Max é uma versão poderosa de um agente de inteligência artificial que facilita o trabalho, permitindo que os usuários se concentrem em decisões importantes.

• A nova versão oferece recursos avançados de design, permitindo alterações em imagens e desenvolvimento rápido de aplicativos móveis para iOS e Android sem necessidade de programação.

Demonstração Prática

• O vídeo apresenta um segundo caso sobre como adicionar animações interativas a uma página da web, utilizando o Google AI Studio para criar imagens.

• O processo inclui remoção de marcas d'água e conversão das imagens para formatos compatíveis com a web antes da integração em uma nova página.

Criação e Animação de Imagens

Processo Criativo

• Utilizando o modelo Nano Banana no Studio, o usuário pode descrever como deseja que as imagens comerciais apareçam, criando um fundo escuro para a animação.

• A primeira imagem gerada serve como ponto de partida; a segunda imagem é criada com ingredientes específicos (cerejas e gelo), resultando em uma apresentação profissional.

Animação com Flow

• As duas imagens são animadas usando o Flow, onde vídeos são gerados mostrando a lata girando e explodindo com os ingredientes incluídos.

• Após remover marcas d'água e otimizar os vídeos para a web, eles são carregados no Supase para gerar URLs públicos utilizáveis.

Integração no Site

Configuração do Site

• Com as imagens estáticas e animadas prontas, o próximo passo é configurar um site para um refrigerante específico utilizando URLs dos conteúdos criados.

• O programa permite visualizar a animação do refrigerante PJavi em tela cheia, destacando informações adicionais sem cobrir elementos importantes da lata.

Estilo Diferenciado

• A animação foi projetada para capturar melhor a atenção do cliente potencial através de detalhes visuais atraentes.

• É possível configurar diferentes comportamentos da animação conforme interação do usuário na página.

Curso Intensivo de Inteligência Artificial

Oferta Especial

• O apresentador menciona vagas disponíveis para um curso intensivo sobre inteligência artificial com aulas personalizadas via videochamada.

• Um cupom especial está disponível por tempo limitado para inscrições antes do fechamento das vagas.

Como Criar um Site Profissional Usando Inteligência Artificial

Introdução ao Design de Sites

• O processo começa com a inspiração em designs profissionais encontrados no site Mobing, que apresenta os melhores estilos de sites.

• A técnica envolve o uso do Gemini para extrair elementos-chave dos designs em formato JSON, facilitando a replicação.

Aplicação da Técnica

• Um exemplo prático é a ideia de criar um aplicativo que permita alugar espaços para filmagens ou reuniões durante o dia, inspirado pelo modelo do Airbnb.

• A extração dos designs do Airbnb será aplicada a esse novo modelo de negócios, utilizando cópias das páginas principais.

Construindo o Site

• Após extrair os pontos-chave em formato JSON, as informações são coladas no Google AI Studio para construção do site.

• O resultado inicial é uma nova página chamada "Locasset", que possui um estilo visual semelhante ao do Airbnb e funcionalidades específicas.

Estilos Visuais e Funcionalidades

• A nova plataforma permite visualizar imagens e detalhes sobre locações disponíveis por hora, focando em reuniões ou gravações.

• O design inicial gerado pela inteligência artificial pode ser funcional mas visualmente pouco atraente; melhorias são necessárias.

Replicação de Estilos Sem Extração Completa

• Para replicar estilos de sites interativos não incluídos nas ferramentas anteriores, é possível copiar a URL e acessar o código-fonte da página desejada.

• Embora animações não sejam extraídas diretamente, essa abordagem pode ser combinada com métodos anteriores para criar recursos animados.

Criação e Compartilhamento do Projeto

• Após colar o HTML extraído em um novo chat e especificar os estilos desejados, um novo site profissional é criado com animações interativas.

• O projeto pode ser compartilhado com clientes através de URLs geradas ou enviado para repositórios no GitHub para facilitar acesso e colaboração.

Melhoria de Componentes em Sites

Ferramentas para Aprimoramento

• Existem ferramentas como AC Eternity UIs e 21st que oferecem uma variedade de componentes prontos para serem copiados e colados em projetos existentes, facilitando a melhoria de detalhes em sites já funcionais.

Exemplos Práticos com 21st

• A plataforma 21st apresenta animações interativas, como robôs que se movem com o mouse e caixas informativas que mudam de cor ao passar o cursor. Essas animações são categorizadas para fácil acesso.

• A seção "Componentes de UI" é destacada por permitir a adição de elementos específicos, como animações em cards, melhorando a estética do site.

Integração de Animações

• Para adicionar animações aos botões do site, basta copiar o código da ferramenta e colá-lo na plataforma utilizada (ex: Horizon), onde as alterações são aplicadas automaticamente.

• Após enviar o código, as animações são incorporadas rapidamente, adaptando-se à identidade visual do site. Isso demonstra como pequenas melhorias podem impactar significativamente a aparência profissional.

Adicionando Novos Componentes

• Além de modificar componentes existentes, é possível incluir novos elementos, como ícones de clientes. O processo envolve selecionar designs adequados e utilizar a função de copiar e colar.

• Essa técnica permite aprimorar ou adicionar novos componentes rapidamente, inspirando-se nos melhores designs disponíveis.

Uso da Plataforma Stitch

• Stitch é uma ferramenta do Google voltada para design web que oferece modelos avançados (Yemini 3 Pro). Permite criar designs para diferentes sistemas operacionais.

• Ao criar um aplicativo fictício sobre esportes na neve, é possível gerar protótipos funcionais rapidamente. As capturas de tela ajudam na visualização clara do design proposto.

Previsão e Exportação dos Designs

• A plataforma também possui um recurso chamado "prever mapa de calor", permitindo identificar os elementos mais clicados pelos usuários antes da implementação final.

• Os projetos podem ser exportados diretamente para outras plataformas como Google AI Studio, facilitando ainda mais o fluxo de trabalho no design web.