UI nível gringo com IA e bons assets

Deixa eu já fazer o dar um sorrisão aí. Deixa eu mudar esse filtro que tá calma aí. Tá, galera, estamos ao vivo já. Tô só aqui fazendo a pub do momento. Pessoal, comenta aí se vocês estão escutando bem, de onde vocês são, que que vocês, onde vocês estão trabalhando. Calma aí, N, só um minuto que eu já tô só postando. Não, eu sei como é que é. Tá tranquilo. Galera tá chegando aí também. Então é assim, vamos devagar com calma. É na paz. De boa. Já já o menino começa a brilhar aí. Nossa, mas sai

uma foto minha com biquinho ao vivo, galera. Deixa eu colocar o link aqui pra turma. Eu tô, eu tô frenético. Nossa, eu tava ajudando o pessoal aqui num projeto e é uma etapa de K vis, uma etapa mais complicada, né? Não, imagina que a I ainda não substituiu-nos para isso. Correria, correria. Sim, Manaus. Deixa eu ver. Tô pior que o Júlio. Três empregos. Tá certinho aqui o áudio. Joinville. Joinville chove, hein? Tá louco? O lugar que chove? Não sei não, mas só ouso falar. Ouvi falar. Pessoal, vamos lá, então. Vamos começar. Só que antes de

passar a bola pro nosso amigo, eu só queria compartilhar a tela para poder repassar com vocês aqui o lance sobre a questão da conexão do cloud, porque ficou uma brecha ali num numa informação que eu passei. Deixa eu só colocar aqui para vocês rapidão. É, um minutinho. Compartilhar aqui minha tela. Hora que eu começo a brisar aqui minha câmera. Então, ó, aqui no meu canal tem o vídeo passo a passo para poder conectar o cloud no Figma, certo? E que que é essa conexão? Basicamente você vai pedir para IA aqui pro cloudzinho, ó, para ele

vir na su no seu Figma e criar alguma coisa ou modificar alguma coisa. Então vai sair um post em breve sobre isso, que é Basicamente mostrando o que que dá pra gente fazer com o cloud, mas basicamente é manipular, criar, editar, então dá para fazer muita coisa. E aí tem todo um tutorial nesse vídeo, vocês dão uma olhada aí no meu canal, beleza? todo o tutorial, só que aí chega numa parte aqui que é justamente essa parte que eu tô mostrando aqui do vídeo, que é de você copiar esse código. É muito simples, o tutorial

é muito simples, dá para vocês fazerem tranquilo, todo mundo tá conseguindo, algum outro que não, mas aí quando chega na hora de copiar esse código, que tá basicamente aqui no link que eu deixo lá na descrição, nessa documentação aqui, então tem toda essa documentação do Notion aqui. Aí a hora que chega para você copiar isso daqui e colar no arquivo também que eu mostro onde vocês conseguem esse arquivo, mas basicamente é aqui em configurações, ã desenvolvedor e edit config. Aí você vai se direciona direto paraa pasta. Eu não vou abrir porque senão vou mostrar aqui

o meu Jzon. Você vai simplesmente apagar tudo que tem nesse arquivo. Isso é importante porque eu tô vendo que a galera tá colocando depois do texto que já existe. Aí não dá certo. Então você tem que apagar tudo e e nesse Jzon você tem que acrescentar o seu token. Legal? Vocês conseguiram? Alguém conseguiu? Só dá um hello aí. Eh, e aí você vai adicionar o token que que eu mostro lá também como que vocês conseguem. Então, é só esse recadinho que eu queria dar, porque teve algumas pessoas que me mandou mensagem e aí eu acho

que é porque não ficou muito claro essa informação aqui no vídeo, que você tem que sobrescrever o texto existente, tá? E aí é uma baita ferramenta, dá para você usar de forma gratuita também. Então eu não vou mostrar aqui agora não pra gente não não ocupar muito tempo, mas basicamente dá para você rodar no gratuito, mas ele vai consumindo tokens e aí depois de um tempo ele ele acaba esses tokens e aí você espera mais duas 3 horas ali, ele recicla e você consegue fazer de novo esse trabalho junto com o cláudio. É basicamente um

novo jeito até de utilizar aqui o Figma conectado com o Cláudio. Eu tô achando genial. Eu tô criando documentação, tô criando n n formas de trabalhar com esse novo com essa nova ferramenta. Beleza, pessoal? Era só aí você não conseguiu conectar porque provavelmente você deve ter feito esse, você não deve ter feito isso, como eu comentei até uma curiosidade que tinha postado Instagram, mas depois eu apaguei. Escuta essa, né? O meu vídeo de tutorial ele tem 9 Minutos e o tempo médio de visualização desses vídeos, desse vídeo especificamente é de 2 minutos e 48. Então,

ou seja, a galera às vezes não tá conseguindo porque é acelerado. Então, vai passando, passando, ah, não deu certo, então é culpa do Gilberto. Então, assim, agora eu voltei aqui ainda para explicar mais um detalhe. É um vídeo que é tipo assim, eu fui seguindo o tutorial do PDF, então eu vi que é um pouquinho mais complexo, por isso que eu gravei o vídeo. Então você tem o PDF, você tem o tutorial em vídeo mastigado. Aí tem mais ainda essa informação. Então tenta aí que você vai conseguir. É um grande diferencial aí pro nosso workflow,

para tarefas repetitivas principalmente. Galera, bom, vamos lá. Vamos ao tema aqui agora. Era até essa enroladinha aí para para dar tempo do pessoal chegar. Então, Ner, obrigado por aceitar aí o convite. Desde que você mostrou ali aquela UI no Instagram, já te mandei mensagem, vamos trocar uma ideia, vamos mostrar pro pessoal também como que você desenvolveu essa UI, principalmente quando eh por ser algo diferente, né, por ser uma interface diferente, onde durante o scroll as coisas vão acontecendo. essa manipulação é um é um é um tipo de recurso que a gente não costuma ver no

dia a dia, não ser ali em projetos gringos e tudo mais. E tem um outro ponto também que é importante a Gente reforçar aqui, que é o que você comentou comigo em off, que é a questão de quanto que mudou no seu processo em relação à criação dos assets ali utilizando o IA. Então é a questão acho que do vídeo que você comentou das próprias imagens e isso é realmente muito muito legal. Então é isso, cara. começa aí se apresentando, falando um pouquinho sobre quem é você. Acho que o pessoal talvez aí não te conhece.

Essas lives elas ficam disponíveis lá dentro da plataforma Design Bush, então não é Bush, não, Design Bush, então aqui no YouTube, depois a gente faz o download dela e coloca dentro da plataforma. Então quem tá aqui online pode assistir com a gente e aí quem não quem quem não tá aqui presente vai poder assistir lá na nossa plataforma, não? Fechou? Então pessoal, tá todo mundo me escutando bem aí? Tudo certo? Enfim, vamos lá. Segue o jogo. Para quem não sabe ou não conhece, eu sou o Nascer, eh, sou desenvolvedor frontend, tá? E me aventurei há

um tempo atrás aí no UI para poder, eu, eu gosto muito de desenvolver as coisas de ponta a ponta, né? Então, eu já tinha um background, eu já tinha feito vários cursos lá atrás, né? É, eu eu segui mais firme assim no fronte, mas eu cheguei a Fazer cursos, por exemplo, de design gráfico, né? Na época mexia no core draw. Pessoal lembra aí quem quem é das antigas sabe que que é o core naquela época, Photoshop 7.0. Então, querendo ou não, tinha já um background de design e aí eu queria justamente unir, né, as duas

coisas com relação a comero saudades. Eu tava eu tava lembrando com com a minha esposa esses tempos, né, porque eu tinha muita dor aqui na época de gráfica. Hoje eu não tenho mais. Aí talvez seja por conta da ergonomia da mesa, eu não sei. Mas cara, é de gráfica zero bem mais novo do que do que quem mexe com cóo. Não, que é isso? Para quem não sabe, tem 30 anos. Pode não parecer, mas eu tenho 30 anos. Poxa, então fireworks eu comecei cedo, então mexi demais no Fireworks, entendeu? Photoshop 7.0, Corel Draw. E aí

eu eu tinha esse background, poxa. Aí quando eu terminei a minha faculdade, que foi de engenharia eletrônica com ênfase em software, cara, eu retomei a a criação de websites, assim, que que era uma bagagem que eu já tinha de desenvolvimento, mas eu queria muito Fazer as as coisas de ponta a ponta, né? E aí comecei a investir forte nisso. E aí com relação, já puxando o gancho do que que o o Gil falou, por que que eu decidi desenvolver, né, esse website? E para quem ainda não viu, deixa eu ver se eu posso compartilhar a

tela também. Claro, pau. Vamos lá. Vamos lá. Ó o Charles aí. Charles é deve aqui no Insane. Então pessoal, para quem não viu, vocês estão vendo minha tela certinho? Estão vou vendo. Mas cara, pera aí, pera aí, pera aí só um minutinho. Pera aí, calmaí, calma aí, calma aí. Vou remover. é que a gente tá assim, tá ganhando tração, o pessoal tá chegando. Ah, entendi. Eh, você tem essa esse background de designer gráfico, trabalhou ali com essas ferramentas arcaicas, né, e que eu tenho zero saudades, o pessoal ainda tem saudade. Aí e aí depois você

formou em tecnologia, eu também sou formado em ciências da computação, então a gente meio que deu essa essa debandada ali pr pra tecnologia, mas eu voltei 100% pro design já tem um tempo já. E hoje você trabalha especificamente em alguma empresa, é freelancer, como é que tá em relação ao teu ao seu momento, como que A gente criou uma conexão também? E aí as suas conexões, o que que isso um pouco ali antes da gente ir pro trabalho em si, né, pro pessoal te conhecer também de fato, não? Claro, claro, claro. Temos quase 100 pessoas

ao vivo aí com a gente. Eu basicamente eu comecei a minha faculdade, eu passei na, eu sou de Brasília, então eu passei na Universidade de Brasília para engenharia eletrônica, né, mas é um campus que tem eletrônica e software. E aí eu fui pegando matérias em em que eu consegui formar em engenharia eletrônica com ênfase em software, mas eu já era desenvolvedor, né? Eu já fazia trabalhos em PHP porque eu tinha feito técnico em informática. Então, eu já trabalhia de eu já trabalhava de freelancer nessa época, né? E era totalmente por indicação, tipo assim, literalmente, ah,

eu conheço o fulaninho ali que faz site, aí foi no boca a boca que eu fazia alguns websites nesse sentido. Posteriormente eu passei, foi em 2013, formei em 2018. E aí foi justamente em 2018 que eu falei: "Cara, eu quero isso mesmo, entendeu? Já experimentei o design gráfico, já vi o design, já vi o desenvolvimento, já vi algumas áreas e Aí a que mais eu me identifiquei, que eu gosto de criar é websites. E aí eu investi forte nessas duas. Com relação ao que eu trabalho hoje, eu trabalho sim numa empresa em meio período de

desenvolvimento frontend e o resto do tempo eu dedico à produção de conteúdo e freelancer. Eu comecei a compartilhar conteúdo no Instagram, acho que foi em 2020. 2020. Mas você tava um pouco sumido, não tava? Ou você tava assim, você mantinha uma frequência ou você teve um iato aí? Teve um pequeno iato. Exatamente. Teve um pequeno iato, mas aí foi alguns problemas pessoais. essa minha querida vovozinha morreu. E aí, eh, chegou o bom dessa inteligência artificial ao mesmo tempo que a minha avó faleceu. Aí eu decidi dar um iato, não porque eu não tinha talvez algo

que compartilhar, mas é porque eu tava vendo muita coisa acontecendo ao mesmo tempo. Esse negócio daí, a com as empresas trilharárias investindo bilhões todos os dias, faz com que toda hora saia uma uma inteligência artificial diferente. Aí eu falei: "Cara, eu preciso me adaptar a isso". É. E aí eu eu peguei esse ato literalmente para estudar e falar assim: "Cara, deixa eu parar só um pouquinho aqui, porque a produção de conteúdo exige da gente essa presença e aí eu fiquei um pouco mais recluso, mas foi estudando. E aí eu voltei muito recentemente, acredito no que

no início desse ano voltei para ficar, se Deus quiser, para poder mostrar todo esse esse background que eu adquiri. estudando forte inteligência artificial para poder adaptar o meu fluxo, cara. Porque não é algo, eu já passei por algumas, como é que eu posso dizer, eh, momentos disruptivos, né, da tecnologia. Quem nunca eh eu desenvolvia site, então, desde antes, poxa, chegou o Dream Weaver. Que que o Dream Weaver prometia lá da Adobe, né, cara? você não precisa mais tocar em código, então você só precisa puxar as caixinhas aqui que você faz o site. Pouco tempo depois,

né, veio o WordPress. O WordPress já tava nessa época, mas ele foi evoluindo conjunto com Elementor. Depois veio o WordPress ou o WordPress não, Webflow e agora o Frameer e aí depois a IR. Então tem vários momentos disruptivos ali onde a gente tem que se adaptar com relação à tecnologia. Eh, a parte de JavaScript também, quem é da época que que é um um programador um Pouco mais antigo, sabe que JavaScript não era muito bom para poder fazer a manipulação dos elementos don e e programar em JavaScript. De fato, a gente utilizava o JC Carry

e aí o o JavaScript ele, poxa, evoluiu a tal ponto da gente meio que abandonar o Jcarry. É lógico que tem empresas que ainda utilizam dessa stack, mas literalmente a foi desenvolvido novas frameworks, que aí foi outro boom, né, que foi o React desenvolvido em JavaScript, na base do JavaScript junto com view, que são as frameors que talvez são mais utilizadas pelas empresas até hoje, pela portabilidade, pela pela pelo nível de complexidade que consegue eh agregar em você conseguir fazer como é que como é que eu posso falar consumindo de um mesmo back, ter vários

fronts, o front do mobile, o front do web app. Então isso otimiza, né, as empresas e aí a gente tá agora com mais uma grande mudança de paradigma, né, que é a era das IA, que tá afetando acho que toda a cadeia de profissionais do desenvolvimento de um produto digital. Não tem como, né? Antes talvez afetava um, talvez afetava outro, mas se a gente For pegar o desenvolvimento de um produto digital como um todo, que são os designers, ex designers, divide designers, product designers, K, os devops, backend, front end, todo mundo tá tendo que que

olhar com carinho, ver o que que essas ferramentas têm o poder de entregar. E se fosse colocar de uma maneira talvez um pouco mais didática, eu diria que o desenvolvedor antes ele teria, ele tinha que fabricar o o software como se fosse uma grande montagem de peças de Lego. o desenvolvedor ele tinha que eh construir a peça de Lego dele e encaixar direitinho para poder ficar uma peça de Lego boa, top, que é o o nosso software com a inteligência artificial hoje, eu diria que o o desenvolvedor ele não precisa mais fabricar a peça de

Lego, ele precisa saber como é a peça de Lego para poder descrever para Iar, mas ele precisa, ele ele não faz mais, entendeu? Na maioria das vezes ele, se ele souber dar o comando, ele vai pegar a peça de que a e a entrega para nós pronta. A gente só tem que saber encaixar, certo? para poder não ter eh maiores problemas de de estrutura, né, de do background da empresa, regra de negócio, segurança. Então, poxa, é um grande paradigma porque aividade aumenta n vezes. E o que eu não conseguia fazer, que é o que a

gente vai comentar inclusive nesse nesse projeto, um negócio que é um asset que eu precisava contratar um profissional que saiba blender, que desenvolva um produto, entendeu? Nível de 3D, que exporte o custo que eu tinha para poder implementar um negócio desse. Com a inteligência artificial fica muito mais curto o processo e bem mais barato. Só só da gente não ter que usar mais banco de imagem também, né? Mas cara, e até até comentei aqui, né? Perguntei puxar se acho que minha câmera bugou um pouco. É, deu uma travadinha. Pera, tá, deixa eu só mudar para

outra aqui, só para falar isso que é importante. É, o Mac tá peidando, cara. Mas estão escutando? Importa também a câmera, né? Escutando? Tô. Isso que você, isso que você comentou é extremamente importante. Em algum momento nós vamos trazer conteúdos sobre a parte desenvolvimento, o quanto que isso mudou aqui na Insane. Então eu sai um post já sobre isso lá no meu perfil e aí o tempo de desenvolvimento que, sei lá, vamos colocar ali 40 horas para fazer uma landing page, a gente conseguiu reduzir isso para oito, 8 a 10 com o refino. Só Que,

tipo assim, ainda a gente tem essa margem de de horas, né, tipo assim, sei lá, mais 32 horas, que servirá para otimizações, refinamento, deixar a página ali realmente com, sei lá, uma semântica melhor, um CEO e um CMS, né? Tudo isso a gente tem essas capacidades aí. Então, assim, realmente mudou totalmente o fluxo de trabalho com o IA, mas a gente toma muito cuidado para que não seja só um um guspidor ali de prompt. Então, todo o código que é gerado, ele tem ali essa validação. Eu acho que o ponto principal em relação ao que

você falou ali, que acho que você vai mostrar também pro pessoal, eh, esse passo a mais com os assets, né, com a questão de você não precisar necessariamente, mas seria legal também essa pincelada do GESAP, né, que eu acho que é o que você usa para para dar essa otimizada. Então, assim, só pra gente poder resumir e a gente poder já avançar também, eh, não necessariamente a gente vai mostrar muitos códigos ou ensinar vocês, porque a gente não quer fazer uma live também muito densa, né? A gente quer mostrar o que que é possível, o

que que tem mudado e como que ele tem ali otimizado todo esse processo dele. Beleza? Exatamente. Eh, e aí com eu eu eu fiz justamente esse projeto Para poder eu mostrar em todas as frentes de forma prática, como que a IA eh impactou no desenvolvimento desse trabalho, não só na parte de código, né, onde teria partes ali onde querendo ou não são chatinhas, que você como programador, como desenvolvedor, você tem que colocar ali e gastar uma massa assim isenta, a ponto que se você souber descrever e eu literalmente pega o código pronto vou conferindo tudo

e aí eu encaixo dentro do do meu software e tudo mais, né, dentro do meu desenvolvimento. e a parte de desenvolvimento dos assets, eh, a parte de dos vídeos, porque eu pegava, eu pego a foto, né, com com base nessa foto, eu desenvolvo o vídeo e tem as otimizações, porque, querendo ou não, eh, talvez surgiu-se um novo problema com a era das inteligências artificiais, você tem muito mais mídia dentro dos websites, né? tem muito mais foto, tem muito mais vídeo. E aí é outro ponto que você também tem que considerar, porque eu lembro que para

poder a gente deixar a página um pouco mais dinâmica, sei que eu posso dizer assim, tinha a época que a gente utilizava muitos SVGs animados, então a gente desenvolvia todos os PEFs, a gente gastava tempo para poder colocar Eh fazer um PEF interessante com sombra parará, onde você tem a oportunidade de animar o SVG, entendeu? para poder dar essa dinamicidade, talvez com a área da inteligência artificial mudou-se um pouco isso, adicionou-se, acho que não é mudar a palavra, a gente utiliza, mas adicionou-se eh o o uso de imagens e de vídeos, que também é necessário

fazer a otimização para poder garantir mais ou menos o mesmo desempenho e disponibilidade, confiabilidade, né? Porque não adianta nada você fazer algo e também não estar disponível como como acesso. Sim, mas eu não sei se você concorda. Eh, é uma coisa inevitável perder a performance quando a gente tá falando de imagens e vídeos num website. Então, o discurso comercial ele é muito alinhado assim, olha, um site mais flat, a gente consegue uma performance melhor do que um site que tem um vídeo de background no Herosexual, né? Então, por mais que a gente otimiza ainda dois,

três megbas ou até mais, né, por imagem ali. Então eu super agora entendo que um site como esse que você vai mostrar, ele dificilmente vai bater 100 sem uma performance, porque ele tem peso para poder carregar todas essas informações ou não? Não. Sim. O que tem como a gente Adicionar a nível de programação para poder eh melhorar o desempenho é literalmente a gente discutir melhor um carregamento sobre demanda dos quais os próprios os próprios browsers navegadores, eles já vem implementando isso nativamente, tá? Eh, de forma bem genérica assim, é como se o JavaScript ele medisse

a distância do elemento para poder aparecer na tela. E aí, eh, se você tem muitos vídeos, é melhor que você distribua a entrega desses vídeos conforme vai chegando perto. Então, literalmente eu fiz a programação de de vídeos lá embaixo que estão lá embaixo, que eles não são carregados num primeiro momento. Quando você faz o request de um determinado website, quando é só você abrir o console, para quem não sabe, eh, ah, eu quero saber o que que acontece por debaixo dos panos quando eu abro um website, como é que se dão as requisições, né? Então

você abre uma aba anônima para poder garantir que esse website não tenha cash, dá um F5, clica em inspecionar e abre lá o console na aba network para você ver todas as requisições mínimas que um website eh que o navegador faz para poder carregar o seu website em questão de eh fontes, em questão de scripts do JavaScript, em questão de CSS, em questão de ícones, em questão de imagens e vídeos. E aí tem um determinado Pacote que você tem que carregar e entregar já de primeira, né? que aí isso impacta no CEO, mas tem aqueles

lá para baixo que você pode cadenciar essa entrega de forma que ele não carrega tudo de uma vez e conforme vai chegando perto do scroll até aparecer na tela, ele já vai carregando, sei lá, quando o elemento estiver, sei lá, a 1000 pixels de aparecer na tela no scroll, você já deixa ele pré-carregado. Então tem como a gente utilizar desses recursos de programação e alguns deles já estão sendo implementados de forma nativa pelo próprio navegador, como por exemplo loading la para poder fazer isso com imagens, ícones. Então, foi mais ou menos essa técnica que eu

utilizei e ele teve uma tem otimizações tanto a nível de software websit website, tanto a nível de hardware para poder você melhorar a entrega eh e disponibilidade. Porque a partir do momento que você coloca, por exemplo, muitos scripts, se você coloca muitos scripts ou muitas bibliotecas, é interessante que você não coloque tudo de forma local, coloque em CDN, porque em CDN eh, basicamente são servidores que disponibilizam essas bibliotecas. E aí tem um apelo regional. Se você tá Em São Paulo e o meu, sei lá, não vou exagerar, se você tá lá nos Estados Unidos e

o meu servidor do meu site tá em São Paulo, né, quando eu faço essa requisição, pode ter um CDN nos Estados Unidos que oferece essa mesma biblioteca e por estar mais próximo da região, geograficamente falando, ele vai carregar mais rápido. Então, tem esse nível de de otimização a nível de software, mas também tem a nível de hardware no servidor, onde eu coloco literalmente mais processamento, eh, coloco SSD para poder carregar, coloco mais processadores lógicos, mais memória RAM ou faço espelhamento, entendeu? Para quando ele vê que a requisição de um servidor tá muito cheia, ele troca

pro outro, entendeu? e faz esse espelhamento tanto a nível de banco de dados quanto a nível de disponibilidade. Então, eh, eu tem vários otimizações, mas a hardware é mais difícil, né? A software a gente consegue ter um bom resultado sem precisar gastar muito dinheiro, se eu posso dizer assim, entendeu? É uma aula de otimização. O pessoal tá falando que no framer é suave, então assim, deve ser alguns presets, né? alguma coisa meio automatizada, eu imagino. Entendi. É fora o o clássico. Você quer quer compartilhar a tela aí pro pessoal ir ver no site? Perfeito. Deixa

eu colocar aqui. Mas esse você não desenvolveu no framer não. Você fez na mão mesmo. Esse aqui foi foi na mão porque justamente eu tenho eu queria dar esse apelo, né? Deixa eu ver aqui. Deixa eu ver aqui. Compartilhar a tela. Tão vendo a tela agora? Tô vendo. Colocando aqui. Coloquei. Isso. Legal. Aí tem a otimização de vídeo também, né? Eu utilizo o software Handbreak, onde eu justamente consigo colocar o vídeo, que esse aqui ele foi gerado em alta definição. O que tá apresentando aqui para vocês é um é uma otimização dele. Pode ver que

a minha tela é 4K, ela dá uma esticadinha, mas para 1080p fica super satisfatório. Qual como chama ferramenta? Her. Handbreak. Hand. Isso. Hand de mão em inglês. Break. onde eu pego os vídeos em 4K 60 FPS e tem vários parâmetros para poder modificando, onde na maioria das vezes eu coloco. Ele é ah, acabei de ver que é o do abacaxi. Isso, exatamente. Para vídeo, para mim é o melhor. Eu literalmente coloco lá, tem uma barrinha onde quanto mais pra esquerda você coloca, menor a qualidade. ele já faz a otimização a melhor possível de custo benefício.

E aí você consegue alterar, por exemplo, FPS, né, 60, 30, 24. Tem vários codex. Aí eu utilizo placa de vídeo da Nvidia, coloco o Nventar alguns filtros a mais ou então retirar alguns filtros. E aí faz com que um vídeo desse ele fique, então é esse carinha aqui mesmo. Deixa eu dar uma olhadinha. O próprio esse aí. Ah, tá legal. Então, para vídeo, otimização, uso ele fazer o download dele. E não é uma ferramenta online. Isso aí, Tavi, ó. Vídeo encoder. Uhum. Legal. Se se, então você otimiza você otimiza ele no sentido de só deixa

voltar você pro palco aqui. Vou ver. Você otimiza no sentido de da do próprio peso dele. Se ele tem, tipo, sei lá, 10 m, ele passa a ter 2 m. É mais ou menos isso que o ganho é o o ganho é muito mais absurdo do que isso. Quer ver? Deixa eu uma dica massa, pessoal, para quem trabalha com vídeo, não sei nem se o se o pessoal aqui separando aqui para mandar para eles. Eu vou abrir aqui o vídeo quanto que ele tá pesando. Você tá que esse vídeo Ah, sim, sim. Eu vou compartilhar

a tela inteira porque eu só tinha compartilhado o Chrome, tela inteira. Basicamente isso aqui, o software, tá vendo, ó? Pode dar uns Ah, não sei se tem como, né? Tua tela gigantesca. É, minha tela é 4K, tá ruim de ver? Não, mas só pro pessoal ter uma ideia. Tranquilo. Poois a gente será que o a lupa a lupa do do Windows será que funciona? Deixa eu ver. Eu não sei. Tu conseguiu ver melhor aí? Aí ó, agora tá tudo agora. Aí sim. Aí sim. Aí, basicamente, ó, eu preciso jogar só algum vídeo para cá. Deixa

eu pegar aqui um vídeo, colocar, por exemplo, esse aqui. Aí, eh, quando eu preciso fazer a otimização de vídeo, eu venho aqui, ó, na aba vídeo, tem a os precepts de qualidade. Então, basicamente, quanto mais pra direita, qualidade placebo. Quanto mais pra esquerda, menor qualidade. E aí eu sempre tento achar um limar interessante entre desempenho e aí geralmente fica aqui, ó, nos 38. Então aqui quando tá no 37, 38, já tá no limite de não pixelar muito e ficar muito feio. Aham. Entendeu? E tem uma qualidade minimamente satisfatória. Aqui eu consigo fazer frames, alteração de

frames. Aqui o o codificador, na maioria das vezes só processador H X264. NVENK, para quem tem placa de vídeo da Nvidia, né, tem esse codec. Com relação aos filtros, eu deixo bem padrão, não costumo colocar muito. Dimensões, tem algumas pré-definições aqui, então quando você quer deixar na original, nenhum, mas na maioria das vezes, quando eu vou utilizar eu coloco 1080p. Tem aqui como fazer os cortes também, né? Dentro. Pessoal falou que é um pouco lento, mas eu não conheço outra ferramenta, né? Às vezes o pessoal até conhece. Você fala lento para para fazer o a

conversão. É, é. Ué. É porque eu tenho um um computador que eu diria que ele é satisfatório para poder fazer a conversão, OK? Sabe? Hum. Então, no MacBook vai ser mais lento, provavelmente, né? Não, é aí que tá. Eh, pode ter outros outros softwares, mas eu acredito que o que mais vai impactar na velocidade é o codificador de vídeo alinhado com a sua arquitetura. Porque, por exemplo, o NVECK é paraa placa de vídeo da Nvidia e aí é relativamente rápido. É só quando é um vídeo muito grande, sei lá, tô fazendo a otimização de aula

de 40 minutos, realmente demora. Agora, esses vídeos aqui é é papo de segundos. E aí o que Deixa talvez mais rápido é você alinhar o codificador de vídeo com a sua arquitetura. Como os MacBooks agora são M1, né, arquitetura ARM, talvez tem que ver aqui o o que ele melhor se encaixa. Aí eu já não sei te dizer. Eu só sei que para fazer só nível processador ele demora mais, que é o X264. Agora eu tenho o X, o H264 da NVENK, que é da Nvidia, que ele é bem satisfatório. Quer ver? Eu vou dar

o play nesse aqui. Aí aqui tem como adicionar a taxa de bit rate do bit rate do áudio, as dimensões. Aí eu sempre marco otimizado pra web. Deixa mais ou menos a tamb aqui de pré-definição. Seleciona aqui onde é que você quer salvar. Opa, deixa eu tirar esse zoom aqui só para poder salvar. Então, beleza. Coloquei lá. Iniciar a conversão. Aí, ó, rapidão terminou. Tá maluco. Então é como o o vídeo é curto, esse vídeo aqui ele tem quanto tempo? Tem 26 segundos. Mas tá que é o vídeo. Isso é o vídeo de apresentação quando

eu Abro essa sessão aqui, ó. Mas aí é outra outra curiosidade de otimização desse desse vídeo. Isso aqui que vocês estão vendo nessa sessão aqui não é vídeo, pessoal. Hum. Isso aqui são frames do vídeo. Então, basicamente, eu eu levei ele lá pro Premiere e exportei os frames. Por isso que tem uma pastinha aqui chamada frames. Olha só. Nossa, aquele vídeo lá, na verdade, tem 604 frames todos em P. Hum. Aí, ó, 604 frames que eu converti todos para web. Então, mas aí será 600 x 70k. Pois é, você vê. E a entrega e deu

cerca de 64 m a a pasta. Mas assim, eu coloquei isso aqui, tem a versão que tá otimizada pro servidor, que não é essa. E essa aqui eu tava testando local mesmo. A do servidor ela ficou com 30 MB, mas aquela ela é entregada de forma eh sob demanda, né? Uhum. Então exige um pouco mais mesmo, porque eu eu acho que eu exagerei no no comprimento do vídeo. Não, mas ficou lim. Vamos deixar ali. É, tem como deixar um pouco mais feitos dessa forma, você acha? Hã, os da Apple também são feitos assim? Sim. A

técnica que a Apple utiliza é justamente essa. Eu vejo que a Apple ela ela tem colocado os vídeos um pouco mais curtos, onde melhora essa relação de frames, mas quando você analisa aqui, vem aqui no expensionar, você pode ver que são literalmente fotos, frames que são passadas rapidamente para poder fazer essas animaçõezinhas. Não, esse primeiro, talvez o primeiro ele fosse vídeo mesmo, né? Mas aqueles que tem interação com o scroll, né? gira e tudo mais. Esse aí nem tem tanto. É, eu acredito que não sei se esse aqui é vídeo, é, tem que dispensionar a

a tela e ir abrindo aqui os elementos. Mas, ó, vídeo element, esse aqui já é um videozinho. Uhum. Vou aí tem que ir abrindo e conferindo assim, ó. Vídeo ID como vídeo. Tá vendo? Isso aqui já é um vídeo prad. Então, se o vídeo ele for suficientemente eh curto, esses mais curtinhos, 5 segundos de apresentação, super dá para colocar. Agora, para poder brincar com scroll, eh, a técnica ela é melhor Utilizando de de frames. E aí eu queria mostrar essas duas dinâmicas, porque no início essa parte aqui são frames passando literalmente, tá? E na parte

inicial aqui já é o vídeo em si. Então tem as duas técnicas nesse projeto para poder justamente como é que fun mostrar como é que funciona eh por debaixo dos panos. Uhum. Aí você só manda trocar de um pro outro ali de acordo com a cor que você escolherem, né? Isso. Isso aí já é feito a nível de JavaScript. Detecta evento de clique e aí ele só carrega um vídeo diferente fazendo essa transiçãozinha. Mas eu tenho todos os vídeos lá na na raiz, né, do projeto. Sim. Aí aqui são são frames sempre em web, foto,

sempre web, vídeo, sempre MP4. Aí eu deixo em 30 eh 30 fps, 1080, porque eu acredito que 1080 eh ele abraça bem a maioria das resoluções. Tem como até baixar um pouquinho do 1080p, mas eu acredito que é mais ou menos o Meio ali onde você consegue agradar a dispositivos de baixa resolução, quanto telas maiores aqui como 4K, que dá uma esticadinha, mas ainda fica um resultado super satisfatório, sem prejudicar tanto. Pessoal perguntou aqui de web, web, todas as fotos eu fiz em web. Deixa eu ver se eu consigo. O vídeo é o web e

o a foto é web. Webp, gente, é otimização mais potente que tem para pra web. Isso aí as as fotos elas têm tem essa média aqui. Eu coloco geralmente 70% de qualidade, 50 de 50 a 70% de qualidade. Quanto que tá no D? Qual é? Deixa eu colocar aqui a lupa. Aí ficou os frames em média, ó. 36 40k. Uhum. Tem uma pergunta criativa, cara. Como que você chegou a pensar nessa solução assim, tipo, eh, beleza ali do vídeo, trocando de cor, OK, mas até pra gente projetar isso no Figma também é um pouquinho complicado

esse aí. OK. Mas aquela sessão ali que o que a imagem vai rotacionando e até pra gente poder explicar isso pro cliente, ó, você imagina que aqui no scroll vai trocar de Uma imagem para outra, tá? A gente tá esse acordo que você imagina que que vai acontecer isso daí, por exemplo, né? Isso não tem como. É essa, cara, essa parte aqui ela aí já entra a inteligência artificial. Aqui já entra a inteligência artificial. Aí eu já vou ter que falar mais ou menos do meu fluxo para poder criar esse vídeo desse jeito aqui que

foi trabalhoso, mas foi, eu peguei a manha, tá? Você cria o vídeo e aí a gente poderia colocar no protótipo esse vídeo e tal, mas na hora de programar você transforma o vídeo em 600 frames e aí depois você transforma. Mas assim, isso tá exagerado, tá? Não considere, tipo assim, sempre essa essa porque tem como você colocar menos frames, mas a fluidez isso aí, a fluidez vai ficar prejudicada. Então é aquela, você quer o a qualidade full da full, vai ter mais frame, entendeu? E e a qualidade da da imagem vai piorar. Aqui eu tentei

achar o ideal assim para poder a gente ter desempenho e ter qualidade, né? Sem perder muita qualidade. Aqui, se eu não me engano, eu eu fiz a renderização para 30 fps. Eu Poderia tranquilamente ter baixado para 24, que é parte de cinema. Ele só não vai ficar tão fluido como tá aqui agora. Já conseguia salvar um pouco mais. A qualidade do das fotos dop também eu posso diminuir um pouco mais. a resolução da imagem também posso diminuir um pouco mais. Então, esse resultado de 60 m que a gente viu aqui dos frames, que são 600

frames que tá com 64 m, você pode diminuir pelo menos aí pela metade, aplicando essas técnicas aí. Você sacrifica um pouco de resolução, qualidade da foto do frame e qual foi a outra que eu disse? Isso a quantidade de frames, né? Pode colocar 24. Nesse caso aqui eu coloquei 30. Uhum. O Rafa perguntou aí só pra gente reforçar, né, que o fluxo é criar o vídeo em P4 e depois transformar em frames web. Exato. Como que você transformou em frame? Só para poder revisar mesmo. Em frame foi no Premiere. Quando você abre o Isso aí

é um recurso do Premiere mesmo, né? Aí qualquer editor de vídeo, ele com certeza tem esse recurso. Aí você escolheu para os essa quantidade. É, dependendo do do FPS que você coloca. Quer ver se Deixa eu ver se eu lembro aqui. Aqui. Hero joystick, acho que é esse. Ah, tá. A quantidade de frames por segundo FPS. Isso é literalmente 30 frames por segundo. Aí são 20 segundos, são 600 frames mesmo. Exatamente. E aí é na nas configurações de exportação mesmo do vídeo, entendeu? O vídeo, por exemplo, eu eu na inteligência artificial eu coloquei com 60

fps. Eu coloquei tudo que dava, 4K 60 fps. Aí eu jogo pro premier, mas na hora de exportar eu seleciono a a quantidade. Basicamente foi bem aqui, ó. E aqui estão os vídeos, tá vendo? Inclusive são justamente esses, ó. Então, tá aqui rolando bonitinho aqui, ó. 4K aqui tá aqui tá full. Aqui tá full. Aí na parte de export, ó. Deixa eu carregar aqui que eu mostro. Eh, tá aqui, ó. Pera aqui. Formato H264 é vídeo. Ah, eu quero em imagem ou é JPEG, tá Vendo? ou em PNG, ele já vai exportar, tipo assim os

frames, né, ao invés de do vídeo. Então, ou PNG ou JPG. Ah, não, convertar pra web depois. Isso aí, depois eu utilizo um outro script que eu achei aí no GitHub. Eh, mas tem software que faz isso, tá? É porque era gratuito. Aí eu achei o, eu sei rodar, coloquei para rodar. E aí ele transforma todos os os 600 frames de PNG ou JPG em Webp. E e assim em PNG o resultado fica estrondoso, fica simplesmente estrondoso, porque PNG é o formato, o web menos otimizado, o JPEG é mais otimizado, o PNG foi papo de

3 GB de foto quando ele exportou, o P ficou em 64 MB, então o ganho é estrondoso. Aí você vem aqui e seleciona aqui, ó, por exemplo, tamanho do arquivo e tamanho da resolução, tá vendo? Ele originalmente tá em 4K, 3840 por 2160. E aí você vai brincando aqui, ó. Eu coloquei em full HD, tem como você Colocar um personalizado que é entre o HD e o Full HD para poder otimizar mais ainda. E a taxa de quadros aqui, ó, você vai brincando com isso aqui também. Eu coloquei em 30 porque eu queria mais fluidez,

pá, qualidade, piriri, mas tem como otimizar aquilo ali e aí você vai diminuindo. Ah, eu quero 24 frames, quero 15, eu quero 18. Você vai selecionando, tá? Aí aqui são outras configurações, tudo mais. E aí, pá, clique em export, ele já vai exportar as fotos, entendeu? Então o essa parte do scroll, ela é bem mais, como é que eu posso dizer? O jeito de executar no código fica um resultado mais satisfatório. Eu já tentei fazer dando, controlando o player do vídeo pelo scroll, como se fosse o scroll, né? O player do vídeo vai e volta,

vai e volta, fica bem mais pesado, tá? com imagem, eh, o desempenho pelo browser fica infinitamente melhor. E aí quando eu fui ver e inspeccionar os sites da Apple, quando ela precisa utilizar de um vídeo mais longo, como Que como é o caso desse aqui, também são utilizados frames, né? São fotos. Pessoal, só para poder resumir, ele ainda vai chegar na parte que ele vai falar sobre o vídeo, então o pessoal já perguntou aqui, né, que como que você criou as imagens, os vídeos. Já a gente chega lá. Mas em resumo é tudo, ele criou

tudo com inteligência artificial, as imagens. Depois ele transformou isso em vídeo. Do vídeo ele jogou no Premiere e aí ele transformou cada frame em imagem em JPG. E aí depois ele transformou esse JPG em web para ficar na na maior otimização possível. Ainda assim são 600 imagens só para poder fazer essa animação vezes 40 kbp de 40k mais ou menos ali pela imagem. Mas é é como explicou, esse vídeo ele tem 20 segundos, então são 30 frames por segundo, né? Então são 600 frames no total. E mas para chegar nesse resultado, porque se você for

ver, tem todo um um resultado da iluminação, modificando ali alguns aspectos, né? alguns detalhezinhos ali. Então isso deixa a imagem também com uma precisão muito realista. Acho que para esse resultado é isso. E aí em questão de performance é sacrificado, né? Porque Você tem que considerar que você tem esse peso. Mas aí ele explicou, tô só tô só refatorando com algumas coisas, mas ele explicou lá no começo que isso já não é isso não é entregue pro usuário a partir do momento que ele acessa a página. Então, talvez até estrategicamente isso tá um pouco mais

para baixo ali da página, mas ela é entregue de acordo com que, tipo assim, o usuário ele tá scrollando, então ele scrollou e a página tá ali processando. E assim, talvez se fosse no antigamente que a internet era descada, né? Aí, ok, mas hoje a gente tá falando sobre uma internet de, sei lá, 500 MB ou 1 GB. Então, a gente tá numa velocidade um pouco maior. E aí, talvez pro responsivo pensaria numa outra solução. Não sei como é que ele como é que ele fez isso aí. Mas outro ponto também, eu tô só recapitulando

aqui, por mais que por mais que às vezes eu tô fazendo algum storage, alguma coisa aqui, mas eu tô super prestando atenção. Eh, o inicial é um vídeo e aí ele via JavaScript, mas quem usar frameer ou quer usar React, React não, Webfow, né, poderia fazer isso também facilmente, mas basicamente ele troca de um pro outro. Então esse que foi o insight. E deixa eu ver que mais que eu peguei. Acho que de forma resumida foi tudo isso, né? Isso. E aí você me você me chamou a atenção de um ponto que realmente eh a

Estrutura do website ela foi pensada em justamente ter a maior distância possível dessa sessão aqui, que é a que exige mais para aquela lá embaixo. Você pode ver que, ó, aqui é vídeo, aqui são frames webp, aqui também são frames. E aí eu faço uma animação via JavaScript para ele parecer que é um videozinho, mas isso aqui são fotos. É literalmente o JavaScript passando fotos, tá? Ele só tá pegando, deslocando a foto e esmaecendo fadeidinha. Aparece a foto, desloca um pouco, solta. Entendeu? Isso aqui tudo são fotos. Eh, aí, ó, você pode ver que eu

tenho uma distância considerável. Eu tenho primeiro uma sessão de apresentação, primeiro texto, que é levíssimo, né? Primeiro texto para depois ter dedicado eh essa nova apresentação com frames. Então, até a posição de de onde eu estou colocando essa apresentação aqui, ela também foi pensada de forma que fique longe o processamento, né? que não fique concomitante o processamento do do navegador para poder melhorar a performance. Então, bem lembrado. Não, não lembrava disso, mas eu pensei nisso quando foi executar. Eh, enfim, e agora a gente vai pro vídeo. Como é que eu fiz os vídeos? Pera aí.

Antes da gente ir pros vídeos, eh, e aí, só pra gente poder também concluir essa parte. Uhum. Cara, eu não sei se compensaria você pelo menos entrar no código para mostrar pro pessoal ali a a dimensão ou a complexidade que é fazer essa troca e onde que você carrega isso para trocar. Eu acho que o principal agora talvez ele seja esse scroll mesmo, né? Entendi. Então, basicamente, ó, o JavaScript tá tá pesado, viu, pessoal? Não vou mentir para vocês que são muitos efeitos aqui, ó. Isso aqui é tudo animação. Deixa eu ver se eu acho.

Esse aqui é o código para poder mudar heriro. Esse aqui também é outro. Calma, calma, calma. Também não é. Isso aqui é animação de outra coisa. Aqui começa aqui, ó. Basicamente aqui, ó. Eu tenho um, deixa eu só colocar a sessão aqui do canvas. Isso, ó. Eu coloco bem aqui, eu carrego nesse canvas, tá? Que que é o canvas? N basicamente uma tag que ele fixa a tela quando tá entrando naquela sessão. E aí eu vou carregar todos os frames dentro dessa tag. Pensa que é como se fosse uma tela isso aqui, tá? E aí

eu seleciono ela, dou um contexto, um contexto ali de 2D e aí começa a parte da programação, ó. Eu seto a quantidade de frames, qual é a pastinha que tá os frames e aqui a forma de como ele é para poder incrementar literalmente, ó, pegue um após o outro, porque os frames eles são numerados. Cadê? Ó, olha aqui a forma de como os frames são colocados, ó. Frame_line 236, underline 237, underline 238. Aí eu só tô dizendo pro código que é para ele eh pegar o número, tá vendo? Sempre incrementar um até o 604 ponp.

faz um arrei disso, começa no frame zero e aí frame count e imagens para carregar, aí carrega 604. Fechou? Aqui tem um um recurso do scroll trigger que é da biblioteca do GESAP, onde ele já tem algumas pré-definições disso. Então tem algumas coisas aqui que meio que a função já faz, entendeu? Não sou eu que faço tudo, é um controlador. Basic isso aí. Aqui tem um um pequeno, como eu chamo? Estrutura de repetição for, onde ele vai justamente, ó, carregar, instanciar a cada vez que ele roda a nova imagem. Tá vendo? Carregando. Vai colocar e

agora vai renderizar, entendeu? E aí depois ele renderiza, ó. Const render. Você tem que renomear eh imagem por imagem ou na hora que você exportou, ele já vem com os nomes certinho? Já vem com os nomes tudo certinho. Ah, bom. Quando você vai lá no Premiere, na parte do export, se você colocar isso aqui no nome, ó, se você colocar aqui nome do arquivo frame_line, ah, tá, ele já vai entender. Ele já vai entender. Aí ele só incrementa o número no final. Seria legal ver se a conseguiu fazer Isso no no Framer ou no Webflow,

porque eu imagino que por lá você deve fazer tudo via painel, né? Uhum. Aí aqui são definições, por exemplo, de tamanho da tela. São algumas definições de de canvas mesmo, de de como colocar dentro daquele daquela tagva. O [ __ ] é você tirar uma vírgula aí já quebra tudo. E aí depois tem o scroll trigger para poder criar isso, que aí a gente só definir os parâmetros para tudo funcionar, que é o quê? Parará. Seleciona um elemento, esse aqui que é o tamanho lá do elemento, quantas fotos são, de onde é que elas estão

vindo, cria o arrei com todas essas essas fotos. Eh, estabelece aqui alguns parâmetros a mais, carrega todas elas aqui, ó. Estabelece as condições de renderização por meio dessa variável, mais algumas coisinhas. Agora a gente estabelece o scroll trigger, que é literalmente para poder fazer o negócio funcionar, que é o quê? Quando eu passar o scroll, ele passa a foto. O trigger é o BG Hero 2, que é literalmente, ó, começa a fazer a animação quando você encontrar, quando Aparecer na tela essa tag, que é a BG Hero 2. é termine quando o tamanho da tela

for o tamanho seis, ou seja, eu quero eu eu estabeleço o tamanho, né, que eu quero que seja feita essa essa distância e quer dizer, essa animação. Isso aqui pode ser otimizado também, porque se eu colocar uma distância menor dentro do browser, eu posso utilizar menos frames. Então tudo você vai, né, ajustando várias variáveis ali para poder ter o melhor resultado possível. Pinue é para poder ele fixar na tela. Então, quando eu tô scrollando, você pode ver que ele vem acompanhando, vem acompanhando. Quando ele chega aqui, ó, ele pinou, ele ficou fixo. Aí ele começa

a execução. Eh, un upupdate, ou seja, a cada update do scroll, tudo que a gente definiu lá em cima, agora ele vai executar de fato aqui embaixo, né? que que é definindo os frames, qual que vai, qual próximo entrar parará. E é basicamente isso aqui. Acabou. Aqui já vem outro trecho de código fazendo outra coisa. Pesado, pesado. Ô, n, e a questão da dos, então, só pra Gente poder passar isso pro pessoal também. Agora dos assets, vamos lá. Eu até fiz um esqueminha aqui. Uhum. Pessoal, como que é o meu workflow com relação a a

essas fotos aí? Primeira coisa, tem como eu descrever, como é que eu faço? Tem como eu descrever a foto? Literalmente eu peço pro chattou, o Gemini, eu achei alguma foto, gostei dessa foto, acredito que vai encaixar. Eu tenho duas opções. Ou eu anexo essa foto dentro do prompt e falo, ó, pega essa aqui como original, modifica isso, isso e isso. Ou eu mando pro chat GPT e falo assim, ó, descreve, faz o prompt só de descrição dessa foto. Aí ele vai me dar uma uma descrição braba lá. Essas eu consegui literalmente anexando a foto no

prompt. Vou mostrar, tá? Então, basicamente, eu eu pego referências das fotos. Posteriormente no uso o chat GPT o propini para poder descrever esses prompts. Eu utilizo o Nana Banana Pro. Eu Utilizei o Nana Banana Pro e o Mid Journey, mas o Mid Journey não ficou muito bom, tá? Eu uso mais o mid jour Journey para você usa o nano banana em alguma ferramenta específica? Não, só o Nan Bana. Então, mas aí vocêou aí estúdio no no próprio Diminai. Isso foi no próprio Diminai. Deixa eu abrir aqui. Foi literalmente isso aqui, ó. Uhum. Então eu eu

coloquei a foto, aí eu fui pedindo para ele, né, algumas coisas. Ah, hã, teve que fazer upscale dessas imagens ou não? Exatamente. Que aí é o o a etapa final. Isso aqui é só a etapa para eu conseguir a foto com o frame que eu quero. Tudo parte de uma foto. Esse é o fluxo. Então eu achei uma foto. Aquele controle ali, pessoal, você vai ver que ele existe na realidade. Eu peguei de um controle que já existe, mas aí eu fui modificando pontos dele, eh, conforme muito teste, tipo assim, ah, modifica isso, modifica aquilo.

Aí eu fui pedindo pro Nano Banana fazer essas modificações. Quer ver? Ó. Então eu anexei literalmente eu gravei um audio Pro chatt falando assim: "Olha, tome essa imagem como referência. Eu quero fazer uma bem similar. Então, considere aqui, ó, o controle com design idêntico, com as mesmas cores, mesmos materiais, eh reflexões e a qualidade de renderização. Remova as logos, os brand names, os símbolos. E aí, como é que eu montei isso aqui? Foi o chat EPT. Eu literalmente gravei áudio e falei assim: "Ó, quero que você faça isso, isso, isso, isso, isso, isso." E monta

num prompt para mim. Eh, aí ele chegou nesse nesse resultado aqui, ó. Pode ver que tá com qualidade ruim ainda, porque esse não é o momento. Tem uma inteligência artificial só para poder fazer o upscape. Mas primeiro eu queria ele clean em diferentes posições. Você, você lembra que você me perguntou, como é que você conseguiu várias posições daquele? Eu fui pedindo pro dano banana pro assim, agora foca na parte dos botões, agora foca no analógico, agora eh eh rotaciona ele levemente, entendeu? Para poder mostrar o verso e a parte da frente do do Controle, focando

em determinadas áreas, tá? Aí eu fui brincando com o Nano Banana, aí ele também gera algumas marmotas. Você vocês podem ver aqui, ó, quando tava em época de teste, ele gerou botão demais. Isso aí eu fui tirando. Então a etapa inicial o frame fica feio, tá? Fica mais feio. Mas eu fiz com o Nano Banana Pro gratuito. Só para você ter noção, isso aqui eu já tenho uma ferramenta de que faz esse upscale que elas que eu que ela é paga e que não foi necessário, mas aí eu fui ajustando os frames só com nano

banana. Quer ver? Ó. Então com o chat aptou o Gemini. Eu descrevo os prompts. O mid journey ficou muito ruim. Quer ver? Deixa eu, deixa eu acessar o mid journey aqui. Ai, cara, eu uso mid journey faz muito tempo, nem sei se eu recomendo. O mid jour ele é bem basicão, mas ó, quando eu pedi para ele recriar f ele saiu umas marmotas assim, ó. As marmotas que saiu. Ficou muito ruim. O Nando Banana ficou ficou anos luz. Manda bem, né, banana? É, banana. Você tá doido. Outro nível. Então, eu uso mais o mid jour

para quando é para criar algo um pouco mais fácil, sabe? Uhum. Ele tem alguns resultados de com paisagens, tem uns negócios que sai legal, mas Nand Banana para mim tá na frente. Aí eu pedi para o Nano Banana modificar uma referência que eu já tinha. Uma vez que eu consegui todos os frames que eu queria, que eu já imaginei o vídeo, você tem que abstrair o vídeo na sua cabeça. Ah, ele vai vir de longe, depois ele vai aproximar nos botões, depois eles vai aproximar no nos analógicos, depois ele vai virar. Isso tudo com referências

de fotos que já existem, dando como base para ele, testando bastante. Aí uma vez que eu consegui os frames, aí eu vou pro cl, ó. Cadê o cling? Tô fazendo um processo aqui que acho que você vai curtir depois. Aí eu vou lá pro Cling, que é esse aqui, né? Aí você tem assinatura no Cling também. O cling não é assinatura, eu fui com créditos porque tem a opção de você colocar créditos, né? Tem a assinatura aqui, ó. Ah, tá b aqui. Isso. Tem a assinatura básica, Standard, Pro, Premie e Ultra. Mas aqui, ó, tem

os créditos porque eu não tô o tempo todo fazendo isso. Eu vou utilizar isso quando eu preciso fazer algum asset para algum projeto. Aí eu utilizei o os créditos, né? Aí aí fica mais barato. Cinco. Aí eu fui de cinco em 5 dó assim. Nossa, gastei dinheiro demais desses c em 5 dó aqui para poder chegar no Sabe qual versão do cling que você usou? Hã? Sabe qual que foi a versão que você usou do cling? Cara, já atualizou, tá na 3.0, mas acho que foi a 2.6. Bacana. Aqui, ó. Isso. 2.6 aqui, ó. Tá

falando aí que eu tô fazendo uns teste aqui. 2.6, tá vendo? Ah, N, como é que você conseguiu o prompt agora do cling, pessoal? chat GPT e Gemini de novo. Eu literalmente falava: "Olha, eu quero eh fazer um vídeo utilizando o Clean AI, onde eu tô descrevendo um controle, que é um joystick, eu quero renderização nível eh Apple, eu eu literalmente descrevendo pro chat GPT ou pro Gemini de forma informal mesmo, entendeu? Não tem nada de outro mundo. Eu eu só enchia com Muitos detalhes. Eu literalmente baixei o chatt, coloquei o áudio aqui e fiquei

descrevendo na maior paciência do mundo. Ele não tem limite de áudio mesmo. Depois ele que se vira lá, monta. E aí eu fiquei descrevendo com detalhes. Ah, eu quero renderização nível Blender, eu quero apresentação de um produto premium, entendeu? Então eu quero que você pegue o start frame e o end frame. Quer ver? Eu vou abrir aqui o cliente para vocês terem noção. Por exemplo, essa renderização aqui, ó. Vocês podem ver que, olha só, eu baseei ele em dois frames, tá vendo? Então, tem o vídeo de tem o frame de start do vídeo e o

frame final do vídeo. Eu só quero que ele conecte os dois, que ele faça um vídeo conectando esses dois. E aí o promptui descrevendo isso pro pro chat GPT, fal assim, ó, me gera o prompt disso. E olha só o nível de qualidade que ficou, tá? Tem como você configurar várias coisas no de como você quer o output, né? Você vem aqui, ó, 1080p 5 segundos, proporção 16x9. Eu prefiro sempre colocar o o length do Vídeo, né, a duração do vídeo de 3 a 5 segundos, porque quando a gente coloca muito tempo, a chance de

erro é maior da inteligência artificial. Isso que eu fui percebendo, tá? ou quando a descrição não fica muito boa, porque quando o frame ele tá próximo um do outro, eh, a inteligência artificial ela consegue adivinhar, ela consegue pegar ali que, poxa, é tipo um zoom in e um zoom out. Por exemplo, esses dois frames aqui, você concorda comigo que ele só tá deslocando o controle, entendeu? Então é um vídeo simples, ele só tá pegando e deslocando. Agora, quando é um vídeo mais complicado, onde eu tô com ele no meio que na parte da frente do

controle, a parte de trás do controle, ele tem que inventar muita coisa nesse meio tempo. E aí quanto mais descrição você colocar, melhor fica. Tá vendo, ó? Aqui ele ele saiu legal, mas teve um aqui, ó, que saiu erradíssimo. Isso foi esse aqui, ó. Deixa eu mostrar para vocês. Eu falei, ó, conecta esses dois frames aí. É como se fosse um prompt não tão detalhado. Olha só o que que ele fez. Então, ele inventou. Como falta descrição e os frames eles estão muito distantes entre si, entre aspas, ele inventou um um frame aí, ó, como

se tivesse um joystick também na parte de trás do controle, entendeu? Então ele sai da frente pra outra frente do controle e fez um negócio bem maluco. Mas esse aqui, ó, esses dois frames, ele está próximo. Você pode ver que essa parte aqui ele só tá dando um zoom in, né? só tá aproximando. Então, esse aqui sai perfeito. Esse aqui, ó, também tive que descrever. Legal, ó, assim, ó, ele só está transacion. Aí eu pegava o chat GPT e literalmente colocava, faça um vídeo onde ele está fazendo a transição de um joystick parará. Sempre movimentos

leves, sempre trazendo pra parte frontal do controle, pra parte do joystick. E aí eu fui enchendo ele e testando. Então essa parte aqui foi totalmente empírica. Sim, mas é bom o pessoal também saber que o resultado de primeira às vezes ele não sai. Então não sai. Vai precisar de teste, né? Mas aí eu vou Mostrar uma parada aqui que você não precisa ficar consumindo os créditos. Aí já fica de dica pro pessoal também. Aí, então ou você precisa do, então é sempre bom ter frames bons e uma descrição suficientemente boa, porque quando falta alguma coisa,

você pode ver que, olha, ele dá uma inventada, tá vendo, ó? Você pode ver que aqui dá uma distorcida, tá vendo, ó? Hum. Então, quanto, por isso que eu falei, eh, quanto menor o o tempo do vídeo, eu eu prefiro fazer vídeos curtos e emendar um no outro, que foi o que foi feito, do que falar para ele fazer um longo logo. Então, na maioria das vezes é 3 segundos, 5 segundos, coloco 1080p, 16x9 ou 9 por 16. Aí eu peguei cada videozinho desse, literalmente conectei com como o frame de um que que encerra é

o mesmo frame que eu coloquei no início do outro, ficou um vídeo contínuo. Mas você pode ver que ele dá uma paradinha, ó. Quando eu venho aqui, ó, ó, esse aqui é o start frame. Esse aqui É a foto de start. Aí ele deu um zoomin para essa parte. parou aqui. É um vídeo, um vídeo de de 5 segundos. Aí eu fiz outro vídeo no Cling AI, coloquei agora essa foto como start. Essa, ó, aí tem um momento que ele dá um uma quebradinha. Você você vê que isso aqui, ó, é a conexão entre os

vídeos. Então, esse aqui é o end frame. Fiz outro vídeo. Agora o start frame, quer dizer, o end frame do anterior é o start frame do próximo. Aí coloquei esse aqui como start frame, esse aqui como end frame. Fiz outro vídeo, esse aqui como start frame e aí eu coloquei o do início para poder ficar um vídeo em loop. Essa dica que ele falou aí é importantíssimo. Então, para você conectar um vídeo no outro, você pega o final do do vídeo que você gerou, que vai ser o start do próximo vídeo. O Lucas perguntou em

questões do Framer, transformar esse em frame, ele explicou, depois você volta na live, mas basicamente ele usa o premiere e no premiere ele exporta, tipo, de acordo com o FPS do vídeo. Então, seria 30 fps, vai ser 30 frames por segundo. Ó, para vocês terem noção, olha o tanto de vídeo que eu gerei. Foi muito teste. Uhum. Poder chegar num num denominador comum. Ó, isso aqui tudo foi vídeo gerado, ó. Vamos ver. Isso aqui tudo foi vídeo gerado, entendeu? E aí eu fui descobrindo, pô, ele ele tem um resultado melhor quando eu faço isso. E

eu fui achando até chegar nesse resultado aqui. E aí eu cheguei no Clean Ai, beleza? É a penúltima etapa, né? Então, peguei boas fotos, achei boas referências na internet, pedi pro chat GPT escrever, fui lá no Nando Banana Pro, fiquei modificando até ter os bons frames. Quando eu tive os bons frames, clingi. Quando eu tive os bons vídeos, aí eu fui no Topaz Vídeo. Esse aqui também já é pago, tá? Eu adquiri a versão eh vitalícia do Clean Ai, mas eles não tão mais com esse modelo de negócio. Então, se você for lá na Topaz

Vídeo, quer ver? Ó. Ai, gente, que estranho. Aqui, ó. Vou abrir aqui para vocês. Esse aqui é o Topaz Vídeo. Ele literalmente é uma inteligência artificial que pega um vídeo de baixa qualidade e faz Melhorias, entendeu? Ele faz um apremontamento geral. Então, se o meu vídeo tá com 1080p 30, ele transforma em 4K60. O o Lucas, o Lucas tá totalmente perdido. Ele tá no, ele tá vendo o vídeo lá atrás, não tá entendendo nada. Ô Lucas, qualquer coisa você acompanha daqui paraa frente, porque aí você tem oportunidade de fazer perguntas, tá? Façam perguntas aí. Ô,

Nácio, deixa eu só aproveitar que eu já te interrompi. Deixa eu mostrar aqui, ó. Não, tranquilo. Deixa eu voltar aí. Calma aí. Já a gente volta para você. Ó, fiz aqui sem gerar créditos, então, sem gastar créditos. E aí com free pick, com free pick. Então assim, essa é a dica até que eu te dou e a dica que eu dou também pro pessoal. Aí eu vou passar aqui rapidinho. O meu é 2 minutos, mas veja que eu até gerei o vídeo. Eu só só tenho essa questão do vídeo, né, que o end frame dele

aqui eu não tenho tanto controle, mas dessa forma aqui a gente não gasta nenhum crédito. E aí o resultado é esse daqui. Não, legal demais, cara. com N e o freepick ele é, eu suponho que ele seja pago o Então é isso que eu ia falar. Eh, tem um Lance que você vai no GPT, pede para ele, tipo, gerar um cupom para você, mas no ano ele vai sair uns R$ 1.000, ou seja, vai ser uns R$ 100 por mês, uns cento e pouco. Mas, cara, você tem tudo aqui numa única ferramenta. E esse aqui

é o Freepak Space, tem vídeo no meu canal, porque no Freepak Space eu posso, eu tenho um lance que é diferente ali um pouco. Isso fica como dica, porque isso mudou completamente o meu workflow. No Gemini ou até na forma antigamente que a gente gerava imagem, Naster, a gente podia teria que gerar uma única imagem por vez. Então eu posso escolher quantas imagens eu quisesse, se eu quiser gerar quatro, utilizar que infinitos modelos, mas o Nano Banana Pro é o melhor, obviamente, né? Hum. E aí eu vou gerar imagens em 2K, eu posso controlar o

aspecto dele também. Então aspecto aí, olha que massa, ele vai gerar o mesmo propt, né? Então o prompt ele bebe da referência. Na verdade eu pedi pro assistente também ele ele analisar essa imagem aqui para poder dar um pouco mais de precisão. E aí eu não tenho que ficar esperando ele gerar uma imagem para ver se vai ficar legal para depois gerar outra. Mas assim, né? Já ficou legal, cara. Um resultado bem legal, não é? vai melhorar o meu fluxo. É, eu fui na raça. Tem um canal, tem no meu canal, só que vou te

dar uma dica plus aí agora, que é tipo, eh, na questão do vídeo, assim, qualquer qualquer coisa você consegue verificar aqui, ó, imagem, por exemplo, vídeo, vídeo generator. Você entrando aqui, ó, em todos os modelos, você consegue ver quantidade de crédito que consome. Eu só trabalho com coisas que não consomem crédito nenhum. O meu foco é usar nada, é usar as coisas que não conse. Então, eu não entendi muito bem como é que funciona esse Cink 3.0 Motion Control. Eh, não sei se você sobe um vídeo e aí ele conecta uma coisa com a outra.

Acho que minha câmera ficou até um pouco ruim. Deixa eu parar na câmera. É, eu utilizei o 2.6. Eu não não cheguei a nem ver esse 3.0 aí. É, então, e aí eu usei esse 2.5, mas ele tem um pequeno problema que eu não tenho o start e o end, então eu só tenho o start, mas ok, talvez ali para alguma coisa vai funcionar, porque se eu tiver que usar aí eu vou só duplicar aqui só para você entender. Não vou ocupar seu espaço não, mas só para só porque esse esse conteúdo aqui é bem

importante e relevante também pro pessoal, porque não demais, poxa, a gente passa a centralizar as coisas tudo num único Num único lugar. Eu vou colocar esse aqui conectado, que é aqui que vai ser meu novo vídeo. Mas só para você entender, esse daqui é o Clean 2.5, onde eu não consumo nenhum crédito, como eu falei para vocês. Nossa, melhor. Trocar pelo menos uma câazinha. É que é meu processamento aqui tá um pouco ruim, mas se eu for, por exemplo, pro clink 3.0, que ele é mais avançado, aí ele aparece o start e o end. Aqui,

ó, start e o end. Então eu poderia já pedir para ele gerar a imagem aqui com outro ângulo ou a parte de trás ou algo assim nesse sentido e vai ficando tudo no mesmo lugar. Fica mais fácil de eu poder conectar as coisas também, né? [ __ ] minha câmera foi foi de base mesmo. Eh, fica mais fácil de conectar as coisas. E aí eu poderia utilizar aqui o Clink 3.0 com vídeo, com som que se eu quiser, que é o mais atual deles, porém ele vai gastar 150 créditos. Então aqui você tem a conta

de quantidade de crédito que você tem e tudo mais. Então assim, você tem essa opção de você quiser gerar um vídeo 720p, eh, como eu gerei aqui também, e sem ter necessariamente esse controle de start, de end, que dependendo do caso vai funcionar muito bem. E você tem essa opção aqui de a partir De uma imagem, eu tirei um print do que você mandou, não consegui exportar, aí depois eu fiz aqui o meu fluxo, pedi para mudar aqui para verde e gerou aqui essas outras imagens também. Aí é isso aí. O start frame, eu eu

eu também gerei vários com start frame, mas eu sempre peço para ele, tipo assim, fazer o movimento mais leve ou então um zoomin. Ele só pega ela, vai dando um zoomin, inim, entendeu? Só com start frame você também consegue um resultado massa demais. Sim, pessoal, tem tem alguma dúvida, Nas? Tem mais coisa para poder passar? Não é só a etapa final que eu utilizei o Topaz Vídeo, que ele é uma inteligência artificial para fazer aprimoramento de vídeo, onde tem vários parâmetros o peso, não aumenta o peso, ele literalmente pega o vídeo e o que originalmente

era 1080p30, ele transforma em um vídeo 4K60. Ah, tá, entendi. É, eu sei que aqui no no freep a gente tem os upscale também, mas de vídeo eu nunca fiz, não. É, é como se fosse um upscale de vídeo, onde você controla vários parâmetros, tanto de frame, como de detalhe, de ruído, de nitidez, enfim, tem muitos parâmetros aqui, muitos modelos até você conseguir a qualidade, tipo Assim, top master, entendeu? Mas o 1080p30 que o cling ele entrega já é suficiente, tá? Sim, total. É, na verdade até às vezes dependendo do, vamos supor que você não

tem que ocupar o full frame ali, né? Tipo assim, aquele espaço total da tela, é um vídeo menor, às vezes um 720 também vai funcionar. Aham. O o pessoal fez algumas perguntas aqui. Deixa eu ver se eu consigo puxar. Como transformar o Vum Frame. Já já passamos, né, questão do Premiere ali. Como você aprimorou 4K 60 frames por segundo FPS para depois voltar para 1080 30 fps. O handak handbreak. Ah, tá. É verdade. Você perdeu o começo. Então tem no começo da live tem um tem um macetezinho aí para poder otimizar. Mas então você otimiza

para depois você diminuir a quantidade de frames ali, mas sem perder tanta qualidade. Seria um macete também, né? Isso. Legal. Mas para eu eu sempre gosto de gerar na qualidade máxima assim, porque eu não faço só site, né? Eu produzo conteúdo também. Então sempre quero full para quando eu for exportar pro Instagram ou qualquer coisa do tipo, eh, eu tenho 4K para eu exportar para 1080. Então, como Tem conversões nesse processo, perde-se qualidade. Então, eu sempre faço numa resolução acima. Eh, mas para poder fazer pro website otimizar, eu eu fiz os vídeos em 4K60, mas

utilizei o handbreak para baixar para 1080p 30 novamente, só que naquela qualidade, né? Uma qualidade um pouco superior. Só isso, cara. Dá uma olhada no meu vídeo que tem no meu canal pessoal também, né, do do freepick ali, porque pode ser que te ajude nesse novo workflow e você ter tudo no lugar centralizado. Ao invés de você gerar a imagem lá no Gemin você exportar, depois você tem que importar numa outra ferramenta que no caso seu era o Clling. Então você vai ter todas as versões do cling e aí lá você também escolhe. Se você

quiser um vídeo 720 você não vai consumir crédito. Um vídeo 1080 você vai consumir crédito. Às vezes um vídeo para teste, né? Então, para um outro nível elite protótipo, não, com certeza. Eu vi aí o Freepick, já vou fçar e já vou ver aí já. É, o pessoal perguntou aqui, essa pergunta até interessante, ó. Entre saída do nano banana e a entrada do cling, tem que usar algum upscale na imagem? O que eu mostrei aqui agora, ele já gera para você a imagem 2K. Então, é 2000 pixels Ali. E dá para você gerar em 4K,

mas ele vai consumir alguns créditos. Exato. Dá para você usar também o o se Dream. Se Dream, eu não sei se é Sid ou se ou se Dream, mas dá para você usar também para poder gerar em 4K. Só que eu acho que a imagem desse dessa outra desse outro modelo, ele gera um pouco estourado, assim, ele fica como se fosse essa minha imagem que um pouquinho estourado. Na minha na minha visão ali, o Nando Banana, ele aproxima muito mais da realidade. O Sidream ele é um pouco mais assim surrealista, vamos dizer. Então, dá para

gerar para 2K e eu aí se for uma imagem quatro, uma um vídeo 4K de resolução, tecnicamente você tem que fazer ali o upscale para pra imagem. Eu não eu ultimamente não tenho feito tanto upscale não, porque eu talvez não tenha tanto esse preciosismo de 4K ali, porque impacta muito também da performance. Então, ficou impacta e gasta mais dinheiro. E gasta mais dinheiro também, né? Então, acho que dependendo da necessidade do modelo, só se for talvez uma coisa ultra cinemátic, né? Aí compensaria ali o eu só faço em 4K porque eu paguei o Topaz e

o Topaz é vitalício, então ferramenta tá aí, eu uso, entendeu? Mas na maioria das vezes 1080p até 720, Super satisfatório. Eu só faço no final que o Topaz eu eu paguei vitalício, então eu vou lá e uso, entendeu? Sim, mas para aplicar assim nos websites, tudo mais, o 1080p tá suficiente. Cara, última pergunta pra gente encerrar. De onde surgem as ideias para poder fazer um site nesse nesse porte aí? Ah, foi o o Fame Gerado, horas pesquisando vários sites de referências. Uhum. literalmente foi eh é o basicão de de que eu tenho alguns sites, né?

Deixa eu deixa eu ver se eu se eu mostro aqui alguns aqui a gente tem uma metodologia que a gente chama de método boost e aí tem essa parte de inspiração que a gente sempre reforça o quão importante é, não para que você chegue ao ponto de copiar alguma coisa, mas para que você use toda essa esse tempo seu de busca de inspiração para poder destravar ali as suas ideias. Até por isso que eu sou um adepto do caderno, né? Porque eu vou buscando inspirações e vou rabiscando as minhas não as minhas ideas. Exatamente. Essa

essa brincadeira aí literalmente é: "Eu tenho meu Instagram". Olha aí. Não é desse jeito. Nesse nesse Quesito aí, pessoal, a gente não precisa reinventar a roda. Como é que eu consegui? Tem várias referências no meu Instagram. Meu meu Instagram profissional, ele é recheado disso o tempo todo lá no explorar é pipocando referência, entendeu? Eu já pego, já mando pro já salvo, né? Dentro do Instagram tem uma partinha lá só para isso. Tem alguns específicos que eu bato o olho, falo assim: "Meu Deus, esse aqui encaixa demais no que no que que eu queria fazer." Salvo.

Tem eh o clássico pesquisar em vários sites, né? Sempre dou. É como se fosse tomar café, gente. Tomei café, vou vou tomar o meu café da manhã. Botei aqui meu cafezinho, eu sempre dou uma uma olhadinha no no website, nos melhores estúdios, né? No o o próprio Gilberto falou vários estúdios que ele que ele segue ali no próprio Dribble que poxa, tem a El Team, né? Lá no drible tem a coberto, tem a Clay. Então eu pego esses melhores aí e outros e nós vamos, entendeu, destrinchando até a gente construir o nosso Frankstin, entendeu? A

gente não tá copiando, a gente constrói o nosso Frankstin, pega Uma ideia de uma interface, pega ideia de outra, a gente vai montando. É, cara, por isso que eu defendo demais o meu workflow que eu ensino também ali pros alunos, porque é exatamente isso, é você alimentar-se ali de boas ideias e aí no meu caso sintetizar isso no papel para poder tipo ter ali um guia e depois você vai pro software. Hoje o que a gente tem feito com a IA é pular a etapa de wire frame porque eu consigo prototipar a baixa fidelidade usando

a de uma forma muito mais rápida para poder validar uma estrutura e aí assim a partir dali seguir. Exatamente. Eh, só pra gente encerrar aqui então com uma pergunta da nossa querida Raquel que tá destruindo aí inteligência artificial alinhado a design system, né? Eh, vocês preferem fazer upload ou embedar os vídeos? Essa pergunta é muito boa, hein, cara. Muito boa. Entendi. Raquel. Olha, né? Porque você tá buscando dentro da pasta que você mostrou lá. Isso no caso, eh, o bed do vídeo, ele tem alguns controles que para essa aplicação, eu acredito que ia atrapalhar, porque

ah, eu vou embedar o vídeo, por exemplo, do YouTube ou de uma outra Plataforma lá que eu esqueci. Eh, a Vimel, a Vimel ela permite, né, eu tirar alguns esquemas e tudo mais ou então bloquear e aí você consegue melhorar sim o desempenho, mas te falta um pouco de controle, sei o que eu posso dizer assim, entendeu? Falta um pouco de controle dentro do da manipulação ali do website. Então acho inicial a a performance, né, que tipo assim, um vai performar mais com o outro, por mais que um você tem mais controle do que o

outro, que é o do servidor, né? Exato. Vai, vai impactar performance. Mas aí foi uma decisão de projeto. Tem como fazer edado? Tem. Eu só não tentei, mas eu já cheguei a mexer algumas vezes. Ele só não te dá muito controle em questão de é, ele só não te dá muito controle quando você vai posicionar. Tem algumas coisas que ficam mais eh concretas mesmo, né? Não tem como modificar. Mas para esse meu eu fiz só a hero como vídeo de fato, né? Você pode ver que todo o resto foi frame. Eu só usei vídeo uma

parte do do do website e foi sempre otimizando ao máximo com essas n variáveis que a gente tem. É, não, mas eu acho que assim, ó, aqui a Gente embeda alguns vídeos também, mas a gente hospeda no Víel, por exemplo, mas aí é diferente do que você mostrou, você tem um controle ali de alterar de um vídeo pro outro. Então, talvez para sentido ele tá hospedado ali. Exado. O que talvez implica é a questão do servidor que você contratou. Então, se você contratou um AWS ali que tem um por super performance, então provavelmente seu vídeo

vai performar bem também, né? Então, acho que tem várias coisas, mas aí, por exemplo, assim, ó, o que eu vejo de interessante pro, então eu tenho ali um clique, normalmente a gente faz bastante isso, eu tenho um banner, então tipo assim, assista o vídeo institucional da empresa, tuf clicou, abre aquele lightbox bonitão e aí carrega um vídeo que tá embedado, pronto, não precisa nem preocupar ali de estar no seu servidor. É, e para para deixar claro, pessoal, com relação a ao meu website, o XIS Pro, eu não embedei ele em uma WS, que ele é

super cabuloso, não. O meu, ele tá hospedado num plano turbo da Hostgator que tem SSD, mas não é esses horrores de desempenho cabuloso, não. E aí, para poder mostrar para vocês, para poder mostrar para vocês por último, para poder encerrar essa parte, Ó, eu acabei de fazer aqui a pra turma jantar, né? Fui lá no Google Page Speed, no nosso fame gerado e querido Google, coloquei lá, olha aí, ó. Pera que vou ter que fazer um storado por A mais b, né? fazer um stories aqui. Não, mostra primeiro o site e depois você mostra aí

o desempenho. Cadê? Cadê? Cadê? Cadê? Cadê? Vaiar. Deixa eu subir. Deixa eu subir. Então, é possível otimizar um site. Você deixou 100%. Olha lá. Então é isso aqui é o website. Então é possível, tem muitas camadas de JavaScript ali fazendo as coisas, né, galera? Aqui tem 600 imagens para poder fazer esse vídeo. Viu a live, viu? Depois vai pra nossa plataforma. Beijos. Mas é isso, caramba, parabéns, hein? Sem mesmo. Então, deu bom. Muito bizarro mesmo, cara. É um processo, é um workflow diferente. Vocês viram ali o nível de detalhes, o nível De cuidado. Não é

qualquer projeto que cabe isso. E o que eu acho um pouco assim, sendo bem sincero contigo, até com a nossa comunidade também, que é é raro, né, aparecer um projeto onde você tem um produto físico e aí que você tem ali a oportunidade de transformar isso em 3D, em vídeo e fazer isso cotacionar, né? Então, a gente trabalha com muito banco, alguma parada um pouco mais institucional. Então, assim, esse é um caso extraordinário, mas é legal de mostrar pra gente que é possível e que mesmo mesmo usando vídeos e usando toda essa questão de exportar

os frames ali, ele ainda consegue ter uma boa performance. Então, parabéns aí pelo conteúdo, ficou ótimo. Só precisa melhorar o SEO, o cara chato, hein? Meu Deus. Tem que melhorar. Não, mas é só para só para concluir mesmo, ele fez isso como estudo e para algo ali do portfólio dele. Exatamente. É um é um projeto de estudo, pessoal. Você pode ver que eu desenvolvi diversas etapas ali, tanto com vídeo, executando vídeo, quanto executando frame, ver como é que isso fica na prática, o que que isso impacta, como é que a gente otimiza, entendeu? Então, foi

literalmente um estudo de casa onde Eu joguei o máximo de recurso possível para poder a gente lidar com aquilo ali numa situação atípica para quando você for realizar eh lidar com algo na realidade, ficar tranquilo, porque isso aqui é exagerado, entendeu? Então os caras tão falando que o site tá local, nada a ver, mano. Os cara é chato, hein? Tá, vamos jantar depois dessa aí, pelo amor de Deus. Mandei aí, ó, o link tá tá online. Bom, tá online, mas vai que não tá, né? Deixa eu até testar. Galera, deixa o like, então, aí no

conteúdo, depois a gente vai mandar isso lá pra nossa plataforma. Agradeço aí pela disponibilidade. Tem assim o que vocês, é bom vocês ficarem um pouco atentos, né, que tipo assim, o o Naser é o segundo convidado que eu trago aqui. Eu acho que esse ano, já tivemos outras lives aí. Então eu tô de olho, então a galera que tá ali produzindo alguma coisa legal, eu quero dar oportunidade também, quero trazer outras pessoas. Isso acho muito positivo. E o que ele fez, ele ele se dedicou para criar algo bom, para criar algo incrível. Então a gente

tá muito, isso sendo assim uma cutucada mesmo, né? A gente tá muito ali no cenário do da do Médio. Então assim, isso o que ele fez se destaca. Então assim, se você quiser se destacar, busca fazer algo legal mesmo, algo bom e usa a internet para poder expor ali o seu trabalho. Agora a gente tem uma grande oportunidade até em relação ao UI Challenge, que é um desafio que tá rodando aqui no no meu canal. Então você procura vídeo ali sobre isso. E aí já tem uma galera que tá participando, que tá criando seus cases

ali. Então o um dos nossos colaboradores aqui, ele usou ia de ponta a ponta para criar uma documentação, criou versão Life, versão dark, então tá ali estudando também essa essas oportunidades. Então de tudo a gente só tem a ganhar. E e obrigado mesmo por topar esse papo aí com a gente, por poder compartilhar esse conhecimento aí que é bem raro. O pessoal gostou bastante. Fechou. Eu que agradeço, pessoal, né? Obrigado aí pela oportunidade, Gil. Eh, literalmente eu tô tentando pegar essa inteligência artificial que tá mudando o nosso paradigma aí consideravelmente, eh, e ampliar a o

estudo, saber utilizar isso ao nosso favor, né, para poder a gente crescer, eh, profissionalmente com isso, otimizar tempo, né, otimizar trabalho, né, otimizar processos, otimizar workflow, adaptar essa essa nova realidade, né, e sei lá, eu gosto Sempre de contribuir com a com a comunidade, né, mostrar trabalho, a gente poder colaborar nesse sentido. Então, só agradecimentos aí. Obrigado a todos que ficaram até aqui. Qualquer coisa, chamar lá no Instagram também. E obrigado ao Gil pelo convite. É isso. Até caiu minha câmera aqui, pessoal. Obrigado. Então, tenham todos uma boa noite. Nos vemos na próxima live. Valeu,

gente. Falou, pessoal. Até mais.