Claude cria um novo tipo de vídeo — tutorial completo
Autoria: Futurepedia · Assistir no YouTube
Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.
Idioma original: inglês
Vídeo original: Claude Makes a New Kind of Video - Full Tutorial · Canal: Futurepedia · 11:13 · Assistir no YouTube
Tópicos: Claude, Engenharia de software com IA, Geração de conteúdo com IA, Modelos multimodais
O vídeo apresenta uma forma de criar vídeos explicativos e motion graphics com Claude, usando código JavaScript em vez de um gerador de vídeo ou frameworks como Remotion e Hyperframes. O apresentador demonstra uma base gratuita com 86 estilos visuais, que podem ser personalizados a partir de prompts com o código dos exemplos. Também mostra como gerar um vídeo com narração sincronizada, usando uma transcrição com timestamps por palavra. Por fim, explica como adaptar os estilos e transformar uma versão personalizada em uma skill para reutilizá-la.
Pontos-chave
Seção intitulada “Pontos-chave”- Claude pode criar vídeos escrevendo JavaScript que desenha cada frame, sem recorrer a um modelo de text-to-video.
- O apresentador disponibiliza gratuitamente uma base com 86 estilos visuais e exemplos de vídeo.
- Os prompts dos estilos incluem o código usado nos exemplos, ajudando Claude a reproduzi-los de forma mais consistente.
- Os estilos podem ser personalizados por meio de instruções no prompt ou de alterações iterativas.
- É possível sincronizar o vídeo com uma narração usando uma transcrição SRT com timestamps por palavra.
- A narração pode ser gerada com diferentes ferramentas de text-to-speech ou gravada pelo próprio usuário.
- Uma versão personalizada de um estilo pode ser transformada em uma skill para reutilização.
Capítulos
Seção intitulada “Capítulos”| Início | Capítulo | Resumo |
|---|---|---|
| 00:00 | Vídeos criados com código e apresentação dos estilos | O apresentador explica a abordagem com JavaScript, compara-a com fluxos baseados em frameworks e apresenta a base gratuita de 86 estilos. |
| 02:17 | Escolha de estilo e geração de um vídeo | Ele explora estilos visuais, prepara um prompt para um vídeo sobre fones com cancelamento de ruído e mostra o storyboard e o resultado. |
| 05:32 | Personalização e consistência dos prompts | O apresentador comenta os resultados de diferentes modelos e explica como o código incluído nos prompts ajuda a manter a consistência e permite criar uma skill. |
| 07:37 | Geração de narração e transcrição | Ele gera uma narração, obtém uma transcrição SRT com timestamps por palavra e prepara o prompt para sincronizar o vídeo com a voz. |
| 10:12 | Resultado final e recomendações | O vídeo com narração sincronizada é apresentado, e o apresentador recomenda refinar os estilos para que combinem com a estética desejada. |
Citações
Seção intitulada “Citações”Claude não tem um gerador de vídeo, mas não precisa de um. Ele faz tudo por meio de código. — 00:00
Claude escreve JavaScript puro que desenha cada frame por conta própria. — 00:30
O mais importante é que ele inclui todo o código usado para criar o vídeo de exemplo. — 06:34
Funciona melhor com os tempos palavra por palavra. — 09:11
Conceitos e entidades
Seção intitulada “Conceitos e entidades”- Claude (modelo): É usado para gerar vídeos a partir de instruções e código JavaScript.
- JavaScript (conceito): Linguagem usada por Claude para desenhar os frames dos vídeos.
- Remotion (ferramenta): Framework citado como parte de fluxos anteriores para criar vídeos com Claude.
- HyperFrames (ferramenta): Toolkit citado como uma alternativa anterior para estruturar a criação de vídeos.
- Opus (modelo): Modelo usado pelo apresentador para gerar um dos vídeos demonstrados.
- Sonnet (modelo): Modelo que também foi testado e produziu, segundo o apresentador, um resultado igualmente bom.
- Gemini 3.8 Flash (modelo): Modelo de text-to-speech usado para gerar a narração da demonstração.
- Google AI Studio (ferramenta): Plataforma usada para selecionar uma voz e gerar a narração com Gemini 3.8 flash.
- skill (conceito): Pode guardar um estilo personalizado para que ele seja chamado novamente sem voltar à base de estilos.
Tradução completa (pt-BR)
Seção intitulada “Tradução completa (pt-BR)”00:00 Há uma nova maneira de criar vídeos com Claude, e eles são perfeitos para motion graphics, vídeos explicativos e, simplesmente, vídeos que não parecem ter sido feitos com IA. E Claude não tem um gerador de vídeo, mas não precisa de um. Ele faz tudo por meio de código. Vou mostrar como esses vídeos funcionam e exatamente como criá-los. Além disso, criei uma enorme base de dados gratuita com 86 estilos que você pode explorar e usar simplesmente copiando o prompt. Há estilos simples, outros mais elaborados e alguns realmente únicos. E todos são
00:30 personalizáveis e oferecem a opção de sincronizá-los com uma narração e ajustá-los perfeitamente ao tempo das palavras. Primeiro, quero explicar o que há de novo nisso, já que há algum tempo uso Claude para criar motion graphics, com frameworks como Remotion e Hyperframes, assim como muitas outras pessoas. São kits de ferramentas que você pode instalar e que dão a Claude uma estrutura para criar vídeos. Isso aqui não precisa de nada disso. Claude escreve JavaScript puro, que desenha cada quadro por conta própria.
01:00 JavaScript é a linguagem de programação integrada a todos os navegadores. Não é importante saber nada disso, mas queria explicar. E comecei a me interessar mais por isso do que pelos workflows anteriores por causa de uma série de publicações incríveis de outro criador chamado Kevin. Talvez você já tenha visto, mas vou mostrar uma bem rapidinho.
01:45 Essa foi a primeira que vi e que me deixou de queixo caído. É tão única e diferente de tudo que já vi a IA criar. Não é exatamente algo que faria sentido nos tipos de vídeo que eu… mas mostra as direções criativas que isso pode tomar. E, de novo, não envolve nenhum tipo de modelo de texto para vídeo. Tudo é criado usando código, inclusive todos os efeitos sonoros. Agora, eu queria adaptar isso mais para vídeos explicativos do YouTube. Então, pedi a Claude que gerasse um total de 86 estilos diferentes. Listei uns 20 a 30
02:17 que eu queria e depois deixei Claude inventar o restante. Também pedi que criasse seu próprio banco de efeitos sonoros para usar, igualmente usando apenas JavaScript. Tudo isso é totalmente gratuito no primeiro link da descrição. Cada estilo tem uma amostra de 15 segundos explicando como a IA funciona. Dá para ter uma boa ideia de como é assim. Este estilo é bastante útil.
02:48 E aqui está um estilo legal de pixel art de 16 bits. E que tal um estilo de quadro-negro? Esse é útil.
03:23 Ou que tal tentarmos um estilo mais diferente? Aqui está um diorama de papel recortado. Há uma enorme variedade, do simples ao realmente único. Então, vou usar este de glassmorphism, que está entre os mais simples, mas deve funcionar muito bem para um vídeo explicativo visual. E cada um deles tem esse exemplo explicativo
03:53 com os efeitos sonoros incluídos. Depois, você pode clicar para ver um clipe de estilo mais curto, que mostra como ele constrói uma cena. O vídeo explicativo é mais útil, mas, na verdade, gerei primeiro todos os clipes mais curtos e não queria simplesmente apagá-los, então deixei a opção de visualizá-los. E há algumas outras opções aqui. Você pode selecionar “com narração”, que vai pedir uma transcrição. Vou mostrar isso mais tarde, quando sincronizarmos tudo perfeitamente com uma narração. Já “sem narração” só pede o tópico ou a história que você quer criar. Você pode ser tão simples ou detalhado quanto quiser. Vou dizer como funcionam os fones com cancelamento de ruído.
04:24 Por padrão, o prompt também pede primeiro um storyboard visual, para você ter uma boa ideia de como vai ficar antes de iniciar a geração completa. Ele mostrará imagens de cada um dos principais momentos que serão usados. Os exemplos dão uma boa ideia de como vai ficar, então muitas vezes desativo essa opção. Depois, peço edições, se precisar. Mas vou deixá-la ativada para mostrar como é. Quando clico em “copiar prompt”, ele inclui o prompt completo para recriar o estilo, além das partes que acrescentei sobre o tópico. Então, quando vou para Claude, tudo o
04:55 que preciso fazer é colar e clicar em enviar. E aqui está o storyboard que recebi. Acho que ficou ótimo, então vou deixar que gere o vídeo inteiro. Mas você pode pedir as mudanças que quiser neste momento. E aqui está o resultado. >> [música]
05:32 [música] >> Ficou ótimo. O estilo ficou muito bom. Os efeitos sonoros combinaram perfeitamente. E, como tudo isso é código, se quiser fazer alguma mudança, na maioria dos casos é muito fácil pedir que ele corrija ou altere qualquer coisa com bastante precisão. É só pedir. Na verdade, acho que teria ficado melhor com uma narração, então vou mostrar isso em seguida. Mas quero mencionar que usei Opus para esse vídeo, embora não seja necessário. Também gerei este aqui com Sonnet e acho que ficou igualmente bom. E colei o mesmo prompt no ChatGPT, e Astra também me deu um bom resultado. Embora eu ache que ficou
06:04 um pouco pior que o do Claude. É muito fácil de usar, e há muitos estilos diferentes aqui. Muitos deles são muito, muito legais. Talvez eu tenha exagerado um pouco. Nunca gastei meu limite de uso tão rápido nem passei por tantos resets. Por isso pensei: preciso garantir que outras pessoas também possam usar isso, em vez de só eu. Assim, aqueles tokens que usei vão ser mais bem aproveitados. Então, sim, tudo é gratuito no link da descrição. >> [música] >> E talvez você tenha percebido que, quando colei o texto no Claude, apareceu como um pequeno anexo de texto colado.
06:34 Isso porque o prompt é muito longo. É assim que ele fica completo. Incluí algumas orientações, mas o mais importante é que ele contém todo o código usado para criar o vídeo de exemplo. É por isso que os resultados são tão consistentes e que Sonnet consegue resultados tão bons quanto Opus. Se você enviar apenas o vídeo como referência de estilo, Claude e ChatGPT não conseguem assisti-lo. O que fazem é tirar capturas de tela e analisá-las para tentar reconstruí-lo. Então, muita coisa se perde nesse processo. Como esses vídeos são feitos com código,
07:05 ele inclui todo o código. Assim, já tem essa base e só faz modificações, em vez de escrever tudo do zero. Isso deixa os resultados muito mais consistentes. E, ao copiar esses prompts, você pode modificar o que quiser. É só pedir para mudar a paleta de cores ou fazer as coisas se moverem mais devagar. Peça qualquer personalização que quiser. Basta explicar no prompt ou fazer ajustes iterativos depois de receber o resultado. Se acabar criando uma nova versão personalizada de que goste, peça a Claude que a transforme em uma skill, para não precisar voltar a esta base de dados toda vez. Você pode simplesmente chamar a skill.
07:37 Agora vou mostrar como usar isso com uma narração. Normalmente uso a minha própria voz, mas, nesta demonstração, vou usar a conversão de texto em fala Gemini 3.8 Flash. Você também pode usar 11 Labs ou qualquer método para fazer uma narração. Estou no Google AI Studio para usar esse recurso. À direita, há uma seleção de modelos. Clique em “áudio”, depois em “Gemini 3.8 Flash TTS” e, em seguida, em “criar novo diálogo”. Depois, aparece uma longa lista de vozes para escolher. Vou ouvir algumas. >> Observe como a metáfora se desenvolve ao longo do terceiro capítulo. >> Observe como a metáfora se desenvolve ao longo
08:08 do terceiro capítulo. >> Vamos resolver esta equação do segundo grau usando a fórmula quadrática. >> Entendo perfeitamente como esse problema de cobrança é frustrante. Vou abrir sua conta agora mesmo e ajustar a cobrança. >> Essa voz parece boa. Vou colar o roteiro. Depois, há mais algumas opções de personalização. Há algumas opções de estilo. Acho que narração vai funcionar bem neste caso. Também há todas estas opções de tags, para você adicionar respirações, risadas e outros sons ao longo do texto. A tag será inserida diretamente no roteiro, e elas costumam soar muito bem. Mas isso é mais para cenas de diálogo. Não preciso de nenhuma neste caso. Então
08:40 Vou clicar em executar. Aí, bem rápido, já posso ouvir. >> As estrelas começam como enormes nuvens frias de gás e poeira. >> Está ficando ótimo. Vou baixar. Daqui, ainda precisamos de uma transcrição com marcações de tempo. Algumas ferramentas, como a 11 labs, podem fornecer isso junto com a geração. Você também pode usar ferramentas de transcrição. Há opções gratuitas na internet ou opções locais, ou você pode pedir ao Claude para usar essas ferramentas de transcrição. Vou inserir o arquivo e dizer: “Me dê uma transcrição SRT deste áudio, com marcações de tempo por palavra, que
09:11 eu possa copiar e colar.” Funciona melhor com as marcações de tempo palavra por palavra. Se você pedir apenas uma transcrição SRT, ela vai trazer as marcações de tempo por linha, em vez de para cada palavra. Isso também funciona bem, e faço assim para vídeos mais longos, principalmente porque essas transcrições palavra por palavra ficam gigantescas. Mas, para vídeos mais curtos, é bom ter a marcação até o nível da palavra. Depois que tenho isso, tudo o que faço é escolher um estilo. Este estilo de ciência com vetores planos ficou incrível. Deve combinar com este tema. Então, ativo a opção de incluir narração. Depois, digito o tema: como as estrelas nascem. Aí, copio o
09:42 texto da transcrição do Claude e colo aqui. E vou desativar o storyboard desta vez. Clico em copiar prompt. Abro uma nova conversa no Claude. Colo e envio. Ei, terminou. E você verá a opção à direita para carregar a narração. Pode clicar nela e selecionar o arquivo, ou simplesmente arrastar o arquivo de narração para cá. Aí, está tudo pronto. Você poderia enviar o arquivo de narração ao mesmo tempo que envia o prompt, mas eu queria garantir que ainda funcionasse caso você esquecesse de fazer isso, porque esqueci na primeira vez que testei. Então, é mais fácil simplesmente inserir o arquivo agora. Vamos conferir
10:12 este. >> As estrelas começam como enormes nuvens frias de gás e poeira. A gravidade atrai lentamente a nuvem. E, à medida que ela colapsa, gira mais rápido e esquenta. Quando o centro chega a cerca de 10 milhões de graus, os átomos de hidrogênio começam a se fundir em hélio, liberando uma quantidade enorme de energia. É nesse momento que ela se acende. Uma nova estrela
10:43 nasce e pode brilhar por bilhões de anos. >> O resultado ficou incrível. Sinceramente, fico impressionado com como isso ficou fácil. Esse foi o processo inteiro. E, se você for usar isso em vídeos, provavelmente vai querer passar algum tempo refinando um estilo de que goste e que combine com a sua estética. Como o que eu uso, que criei com base neste fundo que tenho, com todos esses pontos azuis e âmbar e a iluminação. Mas há muitos estilos legais para começar aqui, ou você pode simplesmente usá-los como estão, dependendo dos tipos de vídeo de que precisa. De novo, aquele atlas de estilos é
11:13 totalmente gratuito no link da descrição. Espero que você aproveite bem, e nos vemos no próximo vídeo.
Transcrição original
[00:00] There’s a new way to make videos with Claude and they are perfect for motion graphics, explainer videos, and just videos that don’t look like they were made with AI. And Claude doesn’t have a video generator, but it doesn’t need one. It does it all through code. I’ll show you how these work and exactly how to make them. Plus, I actually created a huge free database of 86 styles you can explore and use just by copying the prompt. There’s simple ones, more elaborate ones, and some that are just really unique. And they are all
[00:30] customizable and have the option to sync them up to a voiceover and time them perfectly to the words. Now, first off, I want to explain what’s new about this since I’ve been using Claude to create motion graphics for a while already using frameworks like Remotion and Hyperframes as many other people have. Those are toolkits you can install that give Claude a structure to build videos. This doesn’t need any of that. Claude writes plain JavaScript that draws each frame by itself.
[01:00] JavaScript is the programming language built into every web browser. It doesn’t really matter to know any of that, but I wanted to cover it. And I got most interested in this over the previous workflows I had because of a series of amazing posts by another creator named Kevin. You may have already seen this, but I’ll show one really quick.
[01:45] That was the first one I saw that just blew me away. It’s so unique and different from anything I’ve seen AI make before. It’s not really something that would make sense in the types of videos that I I but it showcases the creative directions this can be taken in. And again, it doesn’t involve any sort of text-to-video model. It’s all created using code, including all of the sound effects. Now, I wanted to adapt this more towards YouTube explainer videos. So, I had Claude generate a total of 86 different styles. I listed out around 20 to 30
[02:17] that I wanted, then let Claude come up with the rest. I also had it create its own database of sound effects to draw from, also using only JavaScript. This whole thing is completely free at the first link in the description. These each have a 15-second sample generation explaining how AI works. You can get a good idea of it that way. This one is a pretty useful style.
[02:48] And here’s a cool 16-bit pixel style. And how about a chalkboard style? That’s a useful one.
[03:23] Or how about we try one that’s more unique? Here’s cut paper diorama. There’s that huge range from simple to really unique. So, I’m going to use this glassmorphism one, which is on the simpler side of these, but should be great for a visual explainer. And each of these have that explainer example
[03:53] with the sound effects included. Then you can click to see a shorter style clip which shows how it builds a scene. The explainer is more useful, but I generated all the shorter ones first actually and didn’t want to just delete them, so I left the option to view them. And there’s a couple other options here. You can select with voice over which will ask for a transcript. I’ll show that later where you can sync up the whole thing perfectly to a voice over. Then without voice over just asks for the topic or story you want it to create. You can be as simple or as detailed as you want. I’ll say how noise
[04:24] canceling headphones work. By default, the prompt does also include asking for a visual storyboard first, so you can get a good idea what it looks like before running the full generation. It will show images of each of the major beats that will be used. The examples give you a pretty good idea of how it will go, so I switch that off a lot of the time. Then just ask for edits afterwards if I need them. But I’ll leave it on to show what it looks like. Then when I click copy prompt, it includes the full prompt to recreate the style and also the parts I added in of the topic. So when I go to Claude, all I
[04:55] have to do is paste it in and hit send. Now, this is what the storyboard looks like when it comes back. I think this looks great, so I’ll let it generate the whole thing. But you could ask for any changes you want at this point. And here’s what came back. >> [music]
[05:32] [music] >> That looked great. The style was really good. The sound effects went along perfectly. And since this is all code, if you want any changes, with most of them, it’s really easy for it to fix or alter anything really precisely. Just ask. I do think it could have benefited from a voice over actually, so I’ll show that next. But I do want to mention I used Opus for that, but you don’t have to. I generated this one in Sonnet as well that I think looks just as good. And I also pasted that same prompt into Chat GPT and Astra gave me a good result, too. Although I think it is a
[06:04] little worse than Claude’s. That’s how easy this is to use and there are so many different styles in here. A lot of them are really, really cool. I may have gone a little overboard on this. It’s the fastest I have ever burned through my usage and resets. That’s why I was like, I need to make sure other people can use this instead of just me. So all those tokens I used get more use out of them. So yeah, it’s all free at the link in the description. >> [music] >> And you may have noticed when I pasted it into Claude, it was the little pasted
[06:34] text attachment. That’s because the prompt is really long. This is what the whole thing looks like. I do have some guidance built in, but the most important part is it includes all the actual code that was used to create the example video. That’s why these can be so consistent and why it gets just as good of results out of Sonnet as it does Opus. If you just send the video itself as a style reference, Claude and Chat GPT can’t watch it. All they do is take screenshots and analyze those to piece it together. So a lot gets lost in that process. Since these are made from code,
[07:05] it includes all the code. So it has that base and just makes modifications instead of writing it all from scratch. Much more consistent. And as you copy these prompts, you can modify anything you want. Just ask to change the color palette or things to move slower. Ask for any customizations to these. Just explain that in your prompt or through iteration after it comes back. Then if you end up with a new custom version you like, ask Claude to turn that into a skill so you don’t have to come back to this database every time. You can just call the skill instead.
[07:37] Now I’ll show how to use this if you have a voice over. I typically use my own voice, but I’ll use Gemini 3.8 flash text-to-speech for this demo. You can also use 11 labs or any method of making a voiceover. I’m in Google AI studio to use this. There’s a model selection on the right. Hit audio, then Gemini 3.8 flash TTS, then create new dialogue. Then there’s a big list of voices to choose from. I’ll listen to a couple. >> Observe how the metaphor develops across the third chapter. >> Observe how the metaphor develops across
[08:08] the third chapter. >> Let’s solve this quadratic equation using the quadratic formula. >> I completely understand how frustrating that billing issue is. Let me pull up your account right now and adjust the charge. >> That one sounds good. I’ll paste in the script. Then there’s some more customization options. Got a few style options. I think narration will be good for this one. Then there’s all these options for tags where you can add breaths and laughs and other sounds throughout. It will add the tag right into the script and they usually sound great. That’s more for dialogue scenes though. I don’t need any in this. So
[08:40] I’ll click run. Then pretty quick I can listen to that. >> Stars begin as huge, cold clouds of gas and dust. >> That’s sounding great. I’ll download it. From here we still need a transcript with timestamps. Some tools like 11 labs can give you that with your generation. You can also use transcription tools. There’s free ones online or local options or you can ask Claude to use those transcription tools itself. I will drop the file in and say, “Give me a word level SRT transcript for this that
[09:11] I can copy paste.” It works best with the word-by-word timings. If you only ask for an SRT transcript, it will give you the timing by line instead of for each word. That works well too and I do that for longer videos, mainly because these word-for-word ones will be gigantic for those. But for these shorter ones, having it down to the word is nice. Once I have that, all I do is pick a style. This flat vector science looks awesome. Should go go with this topic. Then I’ll toggle it to with voice over. Then, I’ll type in the topic, how stars are born. Then, I’ll copy the
[09:42] transcript from Claude and paste that in. And I’ll switch the storyboard off for this one. Click copy prompt. Open a new chat in Claude. Paste and send it off. Hey, that’s all finished. And you’ll see the option on the right to load voice over. You can click that and select the file or just drag the voice over in. Then, it’s all ready to go. You could upload the voice over file at the same time you send the prompt to, but I wanted to make sure it still worked if you forget to do that since I forgot the first time I tested it. So, it’s easier to just drop it in now. Let’s check this
[10:12] one out. >> Stars begin as huge, cold clouds of gas and dust. Gravity slowly pulls the cloud together. And as it collapses, it spins faster and heats up. When the center reaches about 10 million degrees, hydrogen atoms start fusing into helium, releasing enormous energy. That’s the moment it ignites. A new star
[10:43] is born, and it can shine for billions of years. >> That turned out amazing. It honestly blows my mind how easy this is now. That was the entire process. And if you’re using this for videos, you’ll probably want to spend some time refining a style that you like that fits with your aesthetic. Like the one I use, I based off of this background I have with all the blue and amber dots and lighting. But there’s so many cool styles to start from in here or just to use as is depending on what types of videos you need. Again, that style atlas is
[11:13] completely free at the link in the description. I hope you put it to good use, and I’ll see you in the next one.