Como Criei um Vídeo de Motion Graphics Profissional com Claude Code + Remotion (Sem Edição)

AAndy Lo
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology

Transcript

00:00:00Dê uma olhada neste vídeo explicativo que criamos.
00:00:02Marte, o planeta vermelho, um mundo que cativa a humanidade há séculos.
00:00:08É o quarto planeta a partir do Sol, situado logo depois da Terra em nosso sistema solar.
00:00:14Isso não foi editado no After Effects.
00:00:16Não mexemos em keyframes e não animamos nada à mão.
00:00:21O Claude, usando a nova habilidade Remotion Agent, construiu e renderizou tudo para nós.
00:00:26Movimento, timing, tudo foi feito apenas através de comandos.
00:00:30Mas antes, as habilidades do Claude.
00:00:33Se você tem acompanhado a IA ultimamente, as habilidades do Claude são o assunto do momento.
00:00:38Todo mundo está falando delas, mas aqui está o que elas realmente são.
00:00:43Manuais de instrução que ensinam o Claude a dominar ferramentas e fluxos de trabalho específicos.
00:00:49São pacotes de conhecimento especializado que transformam o Claude de um assistente geral
00:00:54em um especialista em áreas como produção de vídeo, análise de dados ou automação.
00:01:00E quando você combina habilidades com o Claude Code e a ferramenta de codificação da Anthropic,
00:01:05você desbloqueia algo poderoso.
00:01:07E agora, o Remotion.
00:01:09É um framework que permite criar vídeos usando código React,
00:01:13a mesma tecnologia por trás dos sites modernos.
00:01:15Mas aqui está o problema.
00:01:16O Remotion é incrivelmente poderoso, porém complexo.
00:01:20Você precisa entender de React, bibliotecas de animação, funções de timing e renderização de vídeo.
00:01:26É uma ferramenta de desenvolvedor que estava fora do alcance da maioria das pessoas.
00:01:30É por isso que esta habilidade do Remotion Agent muda tudo.
00:01:33Ela dá ao Claude um conhecimento profundo de todo o framework do Remotion,
00:01:37como estruturar composições, coreografar animações,
00:01:41gerenciar o tempo, manipular arquivos e tudo mais.
00:01:45Assim, em vez de o Claude tentar adivinhar o código do vídeo, ele agora entende o framework
00:01:50como um desenvolvedor especialista em Remotion.
00:01:53É a mesma configuração que desenvolvedores já usam para gerar vídeos automaticamente.
00:01:58E até o final deste vídeo,
00:02:00você será capaz de dirigir motion graphics profissionais apenas com prompts.
00:02:04Então, vamos começar.
00:02:05Primeiro, precisamos instalar a habilidade do Remotion no Claude.
00:02:08Para fazer isso, vamos digitar este comando aqui.
00:02:11Você pode encontrar este comando no site da ferramenta Remotion.
00:02:14Selecionaremos todos esses modelos na lista clicando em espaço e depois enter.
00:02:19Quando a habilidade estiver instalada no projeto,
00:02:22abriremos o terminal do Claude Code e pediremos para iniciar um novo projeto Remotion.
00:02:28Vamos aguardar a finalização da configuração.
00:02:30Ele terminou de configurar o projeto e o template.
00:02:38Agora, basta seguir estas direções aqui para abrir o Remotion Studio.
00:02:42E vamos ver como ficou. Ótimo.
00:02:45Então, este é o visual do Remotion.
00:02:46É como um app de edição de vídeo, mas você programa cada cena.
00:02:51Com o projeto instalado e sabendo como o Remotion funciona,
00:02:56vamos para o desenvolvimento.
00:02:59Nosso desenvolvimento tem nove fases.
00:03:02As fases 1 a 3 estabelecerão os sistemas onde o Claude opera.
00:03:07As fases 4 a 7 criam os ativos e definem componentes utilizáveis.
00:03:13E as fases 8 e 9 são a execução.
00:03:16Dito isso, vamos prosseguir.
00:03:19Primeiro, é claro, a Fase 1.
00:03:21Agora que já instalamos tudo, certo?
00:03:25Vamos abrir este guia de construção que fizemos especificamente para este vídeo.
00:03:29Embora este guia seja para desenvolver este vídeo específico, certo?
00:03:35Você também pode reaproveitá-lo para criar outros vídeos que desejar,
00:03:39assim que entender como esses prompts funcionam.
00:03:42Se você quiser uma cópia deste prompt,
00:03:44pode conferir nossa comunidade gratuita, onde postamos guias como este.
00:03:48Assim, você também poderá construir com IA.
00:03:51Vamos copiar o prompt da fase 1 e colá-lo no Claude Code.
00:03:56E então, apertamos enter.
00:03:57O que este prompt faz é estabelecer uma base técnica
00:04:02que o Claude deve seguir durante todo o desenvolvimento.
00:04:06Pense nisso como regras e padrões que ele deve obedecer.
00:04:09Isso é fundamental porque a maioria dos projetos falha
00:04:13não por falta de direção visual de quem o faz,
00:04:16mas porque a IA não recebe regras concretas e acaba fazendo o que quer.
00:04:23Quando a fase 1 terminar, será assim que vai parecer.
00:04:27E um arquivo markdown de desenvolvimento será criado.
00:04:31O Claude terminou de lançar as bases.
00:04:34Agora você pode prosseguir para a próxima fase, a Fase 2.
00:04:37Vamos estabelecer a direção de arte e o sistema visual para este vídeo.
00:04:42Este é um passo realmente muito importante no fluxo de trabalho.
00:04:46Até agora, configuramos o ambiente e garantimos que o Claude entenda o Remotion.
00:04:52O que estamos fazendo aqui é dizer ao Claude como pensar visualmente antes de escrever qualquer código.
00:05:00Vá em frente e abra o guia de construção novamente.
00:05:03Você verá uma seção chamada Fase 2.
00:05:05Pode copiar o prompt inteiro, exatamente como ele está.
00:05:10Depois, volte para o Claude Code no seu terminal.
00:05:15Cole o prompt e aperte enter.
00:05:17E deixe o Claude assumir o controle por um momento.
00:05:21Quero fazer uma pausa aqui e explicar por que esse prompt é tão importante.
00:05:25Porque é aqui que muita gente ou pula etapas ou tenta controlar as coisas demais.
00:05:30Este prompt não está pedindo ao Claude para montar o vídeo completo ainda.
00:05:35O que ele está fazendo é estabelecer um pensamento sistêmico.
00:05:39Estamos definindo as regras do mundo sobre o qual o Claude vai construir.
00:05:43Pense nisso como direção criativa, não apenas instruções.
00:05:46Estamos dizendo ao Claude coisas como o tom geral, as restrições visuais,
00:05:52como os movimentos devem parecer e como as decisões de design devem ser tomadas se algo não for definido.
00:06:00Isso é vital porque nunca vamos descrever cada pixel deste vídeo, certo?
00:06:07Isso seria impossível.
00:06:08Mas, ao mesmo tempo, não queremos que o Claude adivinhe aleatoriamente ou invente padrões nada a ver.
00:06:15Portanto, este prompt cria controle sem microgerenciamento.
00:06:19Ele dá ao Claude um framework para operar dentro.
00:06:22Em vez de ele adivinhar o que "limpo" ou "moderno" significa, ele passa a ter uma definição compartilhada conosco.
00:06:29Em vez de alucinar, ele agora tem tanto a habilidade técnica
00:06:33quanto as diretrizes criativas para trabalhar corretamente.
00:06:36Vamos dar enter e esperar o Claude processar.
00:06:39Tudo pronto. Como podem ver, ele criou um arquivo de direção de arte,
00:06:44esboçando como ele deve raciocinar e executar decisões futuras.
00:06:48Quando chegarmos ao desenvolvimento real, não tenham medo de ajustar as coisas nesta parte.
00:06:55Você quer que seu projeto tenha exatamente a direção de arte desejada.
00:06:58Então, talvez precise pedir ao Claude para mudar ou adicionar detalhes.
00:07:02E assim, desbloqueamos a próxima fase do fluxo de trabalho.
00:07:07Agora temos uma linguagem visual compartilhada entre você e a IA.
00:07:12O Claude sabe como pensar sobre o vídeo antes mesmo de escrever uma composição ou sequência.
00:07:18E isso é enorme.
00:07:19Neste ponto, estabelecemos com sucesso a direção de arte e o controle visual.
00:07:24Ainda não construímos o vídeo.
00:07:26Mas criamos a base que torna a construção real previsível e profissional.
00:07:31Com a direção de arte definida, o próximo passo é criar a história do vídeo.
00:07:37Este passo finaliza o sistema que precisamos.
00:07:40Estamos passando de "como o vídeo deve parecer" para "o que realmente acontece momento a momento".
00:07:47E o objetivo aqui é muito simples.
00:07:49Definir as cenas, o fluxo e o timing.
00:07:52Para que o vídeo faça sentido antes de animarmos qualquer coisa.
00:07:56Ok, vamos voltar ao guia de construção e encontrar o prompt da Fase 3.
00:08:02Podemos copiar tudo.
00:08:03Assim que tiver copiado, volte para o Claude Code.
00:08:08Cole o prompt e aperte enter.
00:08:10Agora esperamos o Claude processar.
00:08:13O Claude está pegando a direção de arte definida antes e usando-a para criar uma linha do tempo.
00:08:18Ele está decidindo quantas cenas precisamos, a função de cada cena,
00:08:23e quanto tempo cada momento deve durar na tela.
00:08:27É isso que nos permite construir um vídeo de 10 ou 60 segundos
00:08:32que pareça intencional, em vez de apressado ou aleatório.
00:08:36Quando o Claude terminar, você verá uma divisão do vídeo em cenas.
00:08:40Cada cena tem um papel claro.
00:08:43Geralmente há um gancho inicial, uma seção de mensagem principal, momentos de apoio e o encerramento, certo?
00:08:52Isso é efetivamente um storyboard, só que escrito.
00:08:56É como um storyboard, mas em texto em vez de visual.
00:09:02Neste ponto, você pode pedir ao Claude para ajustar as coisas.
00:09:05Se uma cena não parecer adequada ao que você quer criar, basta dizer.
00:09:10Se quiser reordenar seções ou remover uma, a hora é agora.
00:09:15Este é outro ponto onde as pessoas travam, ok?
00:09:17Achando que precisam aceitar o primeiro resultado.
00:09:20Na verdade, não precisam.
00:09:21Trate isso como um rascunho colaborativo, ok?
00:09:25E é isso.
00:09:27Neste caso, a estrutura parece sólida, certo?
00:09:30O ritmo faz sentido, as cenas fluem logicamente e se encaixam na duração que pretendemos.
00:09:37Então, em vez de iterar mais, vamos dar o sinal verde para o Claude.
00:09:41Tudo o que você precisa fazer é dizer ao Claude para prosseguir
00:09:45e criar o arquivo de storyboard com base nesta estrutura.
00:09:48Feito isso, o Claude vai gerar um arquivo dedicado
00:09:52que representa a linha do tempo completa do vídeo.
00:09:55E esse arquivo se torna a fonte única da verdade para o que estamos prestes a construir.
00:10:00E assim, temos a história do vídeo definida.
00:10:04Sabemos o que acontece, quando acontece e por que existe.
00:10:08Nada foi animado ainda, mas a decisão criativa mais difícil já foi tomada.
00:10:13Agora que o storyboard está pronto, vamos para a fase 4,
00:10:18que é definir nosso inventário de ativos.
00:10:20Este é um daqueles passos que podem parecer opcionais no início,
00:10:24mas é fundamental se você quiser resultados limpos e consistentes.
00:10:28O objetivo aqui é simples: definir quais ativos existem
00:10:33e como devem parecer antes de tentarmos criar, animar ou posicioná-los.
00:10:38Este passo é crucial, pois cria uma separação entre decisões de design e lógica de cena.
00:10:44E essa separação é o que impede que as coisas quebrem mais tarde.
00:10:48E aqui está o porquê de isso importar.
00:10:50Se você pedir ao Claude para projetar um ativo, decidir como ele deve parecer,
00:10:54e descobrir onde ele vai em uma cena, tudo ao mesmo tempo...
00:10:59Você está acumulando decisões demais em um só passo, e é aí que falha.
00:11:04Você acaba tendo resultados inconsistentes e ruins.
00:11:07Vamos voltar ao guia de construção e copiar o prompt da fase 4.
00:11:11Com ele em mãos, volte ao terminal do Claude, cole e aperte enter.
00:11:17Agora esperamos o Claude processar.
00:11:19Enquanto isso, deixe-me explicar o que esse prompt faz nos bastidores.
00:11:24Ele ainda não está criando visuais.
00:11:25Ele está definindo parâmetros de design para cada ativo que precisaremos.
00:11:29Coisas como os objetos, uso de cores, etc.
00:11:33Um erro comum aqui é pular isso e deixar que cada cena invente seus próprios ativos.
00:11:39É assim que se termina com um vídeo onde cada cena parece morta e sem coesão.
00:11:45Quando o Claude terminar, ele criará um arquivo de inventário de ativos bem organizado.
00:11:53Cada ativo terá um nome e um parâmetro definido.
00:11:57Neste ponto, você não precisa mudar muita coisa, a menos que algo falte ou seja desnecessário.
00:12:04Se quiser adicionar ou mudar algo, basta pedir ao Claude.
00:12:10E pronto, temos uma lista completa de ativos e um sistema de design que os governa.
00:12:17Isso significa que quando o Claude começar a gerar componentes de animação,
00:12:22ele não vai ficar adivinhando o visual das coisas.
00:12:25Ele vai puxar as informações diretamente deste inventário.
00:12:28Com as especificações dos ativos definidas, podemos ir para a fase 5,
00:12:33que é a geração propriamente dita dos ativos.
00:12:36Agora vamos produzir as peças concretas que serão usadas em todo o vídeo.
00:12:42Até este ponto, estivemos deliberadamente separando as responsabilidades.
00:12:48Primeiro definimos o sistema, a direção de arte, o storyboard e, por último, as especificações dos ativos.
00:12:56Este passo transforma essas definições em ativos reais e utilizáveis, sem misturar funções,
00:13:04o que prepara o Claude Code para desenvolver com instruções e contexto muito claros.
00:13:10É por isso que este método funciona de forma tão confiável.
00:13:13Vamos conferir.
00:13:15Vamos pegar o prompt da fase 5 no guia de construção e colá-lo no terminal do Claude.
00:13:20Mas antes de apertar enter, um detalhe importante.
00:13:23Ao trabalhar em projetos maiores, com muitos ativos de categorias diferentes,
00:13:29é uma ótima ideia gerá-los em lotes por categoria.
00:13:33O que quero dizer com isso é adicionar uma regra ao prompt dizendo ao Claude
00:13:37para gerar uma categoria de ativos de cada vez.
00:13:40Isso reduz as chances de a IA alucinar, o que diminui o risco
00:13:45de o Claude perder o estilo em ativos que não têm relação entre si.
00:13:49No nosso caso, este vídeo não tem um inventário de ativos gigante.
00:13:53Então, vamos gerar tudo de uma só vez.
00:13:57Apenas saiba que, conforme seus projetos crescem, o processamento em lotes se torna uma prática recomendada.
00:14:03Ok, esta parte geralmente leva algum tempo, então seja paciente.
00:14:08Assim que terminar, reserve um momento para analisar a saída e ver se todos os assets que você precisa estão lá.
00:14:15Normalmente, você encontrará tudo na pasta SRC.
00:14:20E assim, agora temos um conjunto completo de assets gerados e prontos para usar.
00:14:25E estes não são mais ideias abstratas.
00:14:28Eles são blocos de construção reais que serão reutilizados em várias cenas,
00:14:32que é o que dará ao vídeo a consistência que desejamos.
00:14:36Com todos os nossos assets prontos, o próximo passo é dar movimento a eles.
00:14:41Esta é a fase seis, e o objetivo aqui é definir como cada um dos nossos assets se comporta.
00:14:47Ainda não são as cenas finais, apenas os blocos de movimento que serão reutilizados em todos os lugares.
00:14:53Isso é o que você conhece como primitivas de movimento.
00:14:56Basicamente, estamos criando uma linguagem de movimento compartilhada que o vídeo inteiro pode usar.
00:15:01Então, no guia de construção, pegue o prompt da fase seis e cole-o no Claude Code.
00:15:07Agora, aqui está a mudança de mentalidade importante.
00:15:10Não precisamos ser muito técnicos aqui.
00:15:13Não estamos listando cada keyframe ou descrevendo cada animação em detalhes.
00:15:18E a razão pela qual podemos fazer isso é por causa do trabalho que fizemos antes.
00:15:23Pois nas primeiras fases deste projeto, estabelecemos como o Claude deve pensar.
00:15:28Definimos regras e padrões de desenvolvimento, princípios visuais, narrativa,
00:15:33e restrições de design usando todos aqueles arquivos markdown.
00:15:37E isso dá ao Claude uma compreensão profunda do estilo, do ritmo e do tom que buscamos.
00:15:44Portanto, neste ponto, podemos confiar que ele avaliará o projeto como um todo
00:15:48e proporá padrões de movimento sensatos.
00:15:50Assim que o prompt estiver colado, podemos seguir em frente e apertar enter.
00:15:55O Claude começará a analisar os assets e a gerar primitivas de movimento.
00:15:58Um erro comum aqui é tentar controlar demais esta etapa.
00:16:02Se você tentar microgerenciar o movimento nesta fase,
00:16:05acabará fixando movimentos específicos de uma cena em seu sistema de animação.
00:16:10E isso torna as coisas mais difíceis de reutilizar depois.
00:16:13Em vez disso, buscamos padrões de movimento flexíveis e de uso geral
00:16:17que pareçam consistentes em todo o vídeo.
00:16:21Isso não significa que o Claude fará tudo perfeito.
00:16:25Tudo bem.
00:16:26Nosso trabalho aqui não é esperar um movimento impecável na primeira tentativa, certo?
00:16:31Nosso trabalho é conseguir uma base sólida.
00:16:34Com certeza voltaremos para polir momentos específicos mais tarde, quando virmos os resultados das cenas.
00:16:39Após um pouco de processamento, o Claude termina.
00:16:42E assim, agora temos um conjunto de primitivas de movimento definidas para o projeto.
00:16:47Elas são reutilizáveis, consistentes e alinhadas com o sistema visual
00:16:52e narrativo que estabelecemos anteriormente.
00:16:54Este é um marco enorme.
00:16:57Agora temos assets e temos movimento.
00:17:00Estamos muito perto de transformar tudo isso em um vídeo.
00:17:04E agora as fases 7 e 8.
00:17:06Estas são as partes onde basicamente colamos tudo.
00:17:09Algumas das coisas que este prompt pedirá ao Claude para fazer
00:17:12provavelmente já foram consideradas durante as fases iniciais.
00:17:17Mas ainda assim, é importante executá-las para criar os componentes necessários
00:17:22e garantir que não existam lacunas.
00:17:25Portanto, basta executá-los no terminal do Claude Code
00:17:28pedindo ao Claude para pular o que ele já tiver feito.
00:17:31Tudo bem, agora que tudo isso foi concluído,
00:17:34finalmente temos o sinal verde para construir as cenas e montar o vídeo, ok?
00:17:40Esta é a fase 9.
00:17:42E, honestamente, esta é a parte mais fácil de todo o fluxo de trabalho
00:17:46porque todo o pensamento difícil já foi feito por nós, ok?
00:17:50Então, vamos manter o ritmo.
00:17:51Neste ponto, o Claude não está mais tentando adivinhar.
00:17:54Ele está executando dentro de um sistema que configuramos cuidadosamente.
00:17:57Nosso objetivo aqui é muito simples.
00:17:59Gerar o código para cada cena.
00:18:02Revisar como ficou.
00:18:05Depois, montar tudo em um único vídeo final polido.
00:18:10Primeiro, copie o prompt da fase 9 do guia de construção,
00:18:13cole-o no terminal do Claude e aperte enter.
00:18:17E o que este prompt faz é instruir o Claude
00:18:21a começar a construir as cenas de movimento reais
00:18:23usando tudo o que criamos até agora.
00:18:26Como a direção de arte, o storyboard, os assets,
00:18:29e as primitivas de movimento; tudo se une aqui.
00:18:32Agora, idealmente, especialmente para projetos maiores,
00:18:35você deve gerar as cenas uma por uma.
00:18:38E foi por isso que projetamos o prompt dessa maneira.
00:18:41E embora este seja apenas um vídeo de um minuto e trinta segundos,
00:18:45aprender esta prática recomendada cedo poupará muita dor de cabeça depois.
00:18:49Quando as cenas são geradas individualmente,
00:18:52é muito mais fácil depurar e iterar
00:18:55e fazer mudanças específicas sem quebrar o vídeo inteiro.
00:18:59Assim que a cena um estiver pronta, seguimos em frente e geramos o restante das cenas.
00:19:04E depois que terminar, queremos ver o que construímos de fato.
00:19:08Você pode pedir ao Claude para rodar o Remotion Studio para você
00:19:10e ele lhe dará a URL.
00:19:12Ou você pode simplesmente rodar "npm start" no terminal.
00:19:16Agora estamos dentro do Remotion Studio e vamos apertar o play.
00:19:21E logo de cara, você percebe que a direção de arte
00:19:24e o estilo visual parecem consistentes em todas as cenas.
00:19:28Isso é um sinal muito bom.
00:19:29Se o vídeo parecer um pouco simples, é totalmente esperado.
00:19:34Neste momento, apenas criamos as cenas, ainda não
00:19:38montamos totalmente o vídeo nem polimos as transições.
00:19:42Então, a partir daqui, voltaremos ao Claude Code
00:19:45para apontar os problemas que observamos e dizer ao Claude exatamente o que queremos melhorar.
00:19:50Como os parâmetros exatos de como achamos que as cenas devem se mover.
00:19:56E o prompt exato que usamos aqui não é tão importante.
00:19:58Seu resultado pode parecer diferente em cada seção, comparando o seu com o meu.
00:20:04O prompt exato que usamos aqui não é tão importante.
00:20:07Seu resultado pode parecer diferente em cada seção em relação ao meu.
00:20:10E isso também é bom, pois é aqui que você começa
00:20:14a desenvolver a habilidade de polir e depurar seu próprio trabalho.
00:20:17Você não está mais apenas seguindo prompts.
00:20:20Você está tomando decisões finais.
00:20:22E depois que isso for feito, verificamos o vídeo novamente.
00:20:25E assim, tudo parece mais ajustado.
00:20:28O movimento está mais limpo, as transições estão melhores,
00:20:31e o vídeo finalmente começa a parecer intencional em vez de mecânico.
00:20:35Tudo bem, mas não vamos parar por aqui.
00:20:37Ok, a última camada é a locução e a trilha sonora.
00:20:41Para isso, usaremos o SDK da ElevenLabs.
00:20:44Vamos fazer esta parte rápido.
00:20:46Basta ir até a documentação da ElevenLabs.
00:20:49Pegue o comando apropriado para a sua configuração.
00:20:52Como estamos usando Node.js, usaremos esse mesmo.
00:20:56Depois, peça ao Claude para executar o comando e configurar a integração da ElevenLabs para locução e música.
00:21:03O Claude criará um arquivo .env para você, onde poderá colar sua chave de API da ElevenLabs.
00:21:09Depois disso, você pode pedir ao Claude para gerar um roteiro de locução
00:21:13que combine com o vídeo que você construiu.
00:21:16E assim que estiver tudo conectado e pronto, vamos conferir o resultado final.
00:21:20Marte, o planeta vermelho, um mundo que cativa a humanidade há séculos.
00:21:27É o quarto planeta a partir do Sol, situado logo após a Terra em nosso sistema solar.
00:21:31Em sua proximidade máxima, Marte está a 225 milhões de quilômetros de distância da Terra.
00:21:37Isso equivale a uma jornada de sete meses em uma espaçonave.
00:21:41Prepare sua paciência.
00:21:42Marte tem cerca de metade do tamanho da Terra; um mundo menor, mas não menos fascinante.
00:21:48Um dia em Marte é quase igual ao da Terra: 24 horas e 37 minutos.
00:21:54Mas um ano? Isso leva 687 dias terrestres, quase dois dos nossos anos.
00:22:01A atmosfera é finíssima, apenas 1% da terrestre.
00:22:05Você definitivamente precisará de um traje espacial.
00:22:07Por que tão vermelho?
00:22:09Óxido de ferro, ferrugem, cobre a superfície, dando a Marte sua cor característica.
00:22:15Marte abriga o Monte Olimpo, o maior vulcão do sistema solar,
00:22:19três vezes mais alto que o Everest.
00:22:21E há água, congelada nos polos e possivelmente escondida no subsolo,
00:22:27a chave para a exploração futura.
00:22:29Já enviamos cinco rovers para explorar: Sojourner, Spirit, Opportunity, Curiosity e Perseverance.
00:22:37Um dia, humanos pisarão em Marte,
00:22:40construirão habitats, fincarão bandeiras e o chamarão de nosso segundo lar.
00:22:45Marte nos aguarda!
00:22:46Agora, é assim que ficou o nosso vídeo explicativo sobre Marte.
00:22:51Um vídeo explicativo totalmente construído, polido, limpo e profissional.
00:22:56Construído a partir de um sistema, não de suposições.
00:22:59A narrativa flui bem, o visual está ótimo e cada transição...
00:23:05A narrativa flui bem, o visual está ótimo e cada transição acontece de forma bem suave.
00:23:12Tudo bem, vamos recapitular por um segundo o que acabamos de fazer.
00:23:16Saímos de uma pasta vazia para um vídeo profissional totalmente renderizado.
00:23:22Sem After Effects, sem linha do tempo, sem keyframes.
00:23:26Usamos Claude Code, Remotion e Agent Skills como um único sistema.
00:23:32E nós dirigimos o resultado em vez de construir manualmente cada peça.
00:23:38Esse é um ativo real que você pode postar, entregar e plugar no seu fluxo de trabalho hoje mesmo.
00:23:44E essa é a lição principal aqui.
00:23:47O poder não é apenas que a IA é mais rápida, é que essas ferramentas trabalham juntas.
00:23:52Quando o Claude Code entende o Remotion e as Skills injetam o conhecimento certo na hora certa,
00:23:59você não está mais trabalhando como um criador solo, está trabalhando como uma pequena equipe.
00:24:05E essa é a mudança de apenas usar IA para realmente construir com IA.
00:24:09A partir daqui, você não está apenas fazendo vídeos, está construindo sistemas visuais.
00:24:14Pode ajustar o estilo, trocar dados, gerar novas versões e lançar sem depender de mais ninguém.
00:24:21E isso não substitui a criatividade; na verdade, ela a amplifica.
00:24:26Com este fluxo de trabalho, você pode aplicá-lo a demos de produtos,
00:24:30vídeos para redes sociais, trabalhos para clientes ou qualquer outra coisa que queira entregar.
00:24:34Se quiser se aprofundar ainda mais, é exatamente o que fazemos na comunidade premium AnyNoCode.
00:24:40Analisamos fluxos de trabalho reais como este, mostramos como ganhar dinheiro com IA,
00:24:46e você aprenderá ao lado de fundadores e construtores profissionais.
00:24:50Além disso, você terá acesso ao nosso curso de design de sites com IA para implementar as coisas mais rápido.
00:24:54Se você gostou deste vídeo, por favor, deixe o seu like e se inscreva
00:24:58para mais tutoriais como este no futuro.
00:25:01Vejo você no próximo!

Key Takeaway

O vídeo demonstra como utilizar o Claude Code e o Remotion Agent para automatizar a criação de motion graphics profissionais, focando em um fluxo de trabalho sistêmico que prioriza a direção criativa sobre a execução manual de keyframes.

Highlights

Uso do Claude Code em conjunto com o framework Remotion para criar animações sem edição manual.

A importância das 'Claude Skills' como manuais especializados que transformam a IA em um expert em fluxos de trabalho.

Divisão do desenvolvimento em 9 fases estruturadas, separando regras técnicas de decisões criativas.

Criação de um inventário de ativos e primitivas de movimento para garantir consistência visual e reutilização.

Integração com a API da ElevenLabs para geração automatizada de locução e trilha sonora sincronizada.

Transição do papel de executor manual para o de diretor de sistemas visuais através de comandos e prompts.

Capacidade de gerar vídeos profissionais de motion graphics eliminando o uso de ferramentas tradicionais como After Effects.

Timeline

Introdução e Conceito de Claude Skills

O apresentador exibe um vídeo sobre Marte criado inteiramente sem edição manual ou o uso de After Effects. Ele introduz o conceito das novas habilidades do Claude, descrevendo-as como manuais de instrução que transformam a IA em um especialista em áreas específicas. Ao combinar essas habilidades com o Claude Code, desbloqueia-se o poder de realizar tarefas complexas apenas com comandos de texto. Este trecho é essencial para entender que a ferramenta não está apenas 'adivinhando' o código, mas operando com conhecimento especializado. O foco inicial é quebrar o mito de que animações de alta qualidade exigem obrigatoriamente manipulação manual de keyframes.

O Framework Remotion e Configuração Inicial

Nesta seção, o narrador explica que o Remotion é um framework baseado em React que permite a criação de vídeos através de código. Ele destaca que, embora poderoso, o Remotion é complexo e exige conhecimentos profundos de bibliotecas de animação e timing. O diferencial apresentado é o 'Remotion Agent', que dá ao Claude a capacidade de gerenciar essa complexidade como um desenvolvedor experiente. O vídeo mostra o processo técnico de instalação da habilidade no terminal e a inicialização de um novo projeto. Ao final desta parte, o usuário aprende a abrir o Remotion Studio, que funciona como um ambiente de visualização em tempo real para o código gerado.

Fases 1 a 3: Base Técnica e Direção de Arte

O processo de desenvolvimento é dividido em nove fases, começando pela definição das regras técnicas e padrões de design. Na Fase 1, estabelece-se uma base técnica sólida para evitar que a IA tome decisões aleatórias que poderiam comprometer o projeto. A Fase 2 foca na direção de arte, definindo o tom visual e as restrições de movimento antes de qualquer linha de código ser escrita. O apresentador enfatiza que este passo cria controle sem a necessidade de microgerenciamento constante. É um momento crucial onde se estabelece uma 'linguagem visual compartilhada' entre o humano e a inteligência artificial.

Fase 3: Storyboard e Estrutura Narrativa

A Fase 3 foca na transformação da direção de arte em uma narrativa concreta, definindo o que acontece momento a momento no vídeo. O Claude utiliza as diretrizes anteriores para criar uma linha do tempo dividida em cenas, funcionando como um storyboard em formato de texto. O narrador explica a importância de definir ganchos iniciais, mensagens principais e encerramentos para garantir que o vídeo tenha um fluxo lógico. Ele encoraja o usuário a tratar este documento como um rascunho colaborativo, ajustando cenas antes da animação real começar. Este arquivo se torna a "fonte única da verdade" para o restante do processo de construção.

Fases 4 e 5: Inventário e Geração de Ativos

Nestas fases, o foco muda para a criação dos componentes visuais que comporão o vídeo, chamados de ativos (assets). O apresentador explica que definir os parâmetros de design de cada objeto separadamente da lógica da cena evita inconsistências e erros futuros. Ele sugere a prática de gerar ativos em lotes para projetos maiores, reduzindo as chances de alucinação da IA. Ao final da Fase 5, todos os blocos de construção reais estão prontos e organizados na pasta de código do projeto. Essa separação de responsabilidades é apresentada como o segredo para a confiabilidade deste método de automação.

Fases 6 a 8: Primitivas de Movimento e Integração

A Fase 6 introduz as 'primitivas de movimento', que definem como os ativos se comportam e interagem de forma padronizada. Em vez de descrever cada keyframe, o usuário fornece princípios de animação que o Claude aplica de forma consistente em todo o vídeo. O narrador alerta sobre o erro comum de tentar microgerenciar o movimento nesta etapa, o que prejudica a reutilização dos componentes. As fases 7 e 8 servem para consolidar os componentes restantes e garantir que não existam lacunas no sistema. O objetivo aqui é criar uma base sólida de animação que possa ser polida posteriormente nas cenas finais.

Fase 9: Construção de Cenas e Polimento Final

Com todo o sistema configurado, o Claude começa a gerar o código para as cenas de movimento reais na Fase 9. O apresentador recomenda a geração individual de cada cena para facilitar a depuração e permitir iterações rápidas sem quebrar o projeto inteiro. Ele demonstra o uso do Remotion Studio para revisar o progresso e identificar áreas que precisam de mais fluidez ou ajustes visuais. É nesta etapa que o usuário assume o papel de diretor, apontando problemas específicos para a IA corrigir com novos prompts. O resultado é uma transição de um vídeo mecânico para uma peça de motion graphics intencional e profissional.

Finalização com Locução e Conclusão

A camada final do vídeo é adicionada através da integração com o SDK da ElevenLabs para fornecer locução e trilha sonora de alta qualidade. O Claude ajuda a configurar a chave de API e a gerar um roteiro que sincroniza perfeitamente com o timing das cenas construídas. O vídeo final sobre Marte é apresentado, exibindo transições suaves, visual coeso e uma narrativa envolvente, tudo criado sem ferramentas de edição tradicionais. O narrador conclui reforçando que o poder da IA reside na colaboração entre ferramentas e na criação de sistemas visuais replicáveis. Ele finaliza convidando os espectadores para sua comunidade premium onde ensina a monetizar esses fluxos de trabalho.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video