Claude Makes a New Kind of Video - Full Tutorial

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: English

Original video: Claude Makes a New Kind of Video - Full Tutorial · Channel: Futurepedia · 11:13 · Watch on YouTube

Topics: Claude, Software engineering with AI, AI content generation, Multimodal models

Summary

The video demonstrates a way to create motion graphics and explainer videos with Claude using plain JavaScript, rather than a video-generation model or frameworks such as Remotion. The creator presents a free database of 86 visual styles, with prompts based on the code used to make each example so Claude can adapt them consistently. The tutorial walks through generating a video from a topic, reviewing an optional storyboard, and making edits. It also shows how to create a voiceover, provide a word-level SRT transcript, and sync the video to the narration.

Key points

Claude creates the videos by writing JavaScript that draws each frame; it does not use a text-to-video model.
The creator’s free style database contains 86 options, ranging from simple looks to more unusual styles.
Each style includes examples and a prompt that incorporates the code used to create its sample video.
You can generate a video from a topic with or without a voiceover and optionally review a visual storyboard first.
Because the videos are code-based, Claude can make precise edits, such as changing colors or animation speed.
The prompts can be customized, and a preferred custom version can be turned into a Claude skill.
For narration, the tutorial demonstrates generating a voiceover with Gemini text-to-speech in Google AI Studio.
A word-level SRT transcript helps time the visuals to the narration, particularly for shorter videos.
After generating the video, load or drag in the voiceover file to sync it.

Chapters

Start	Chapter	Summary
00:00	How Claude creates videos with code	The creator introduces code-generated motion graphics and explains how this differs from using video models or frameworks.
01:45	Exploring the 86-style database	The creator shows examples from the free database and explains the style prompts, sample clips, and storyboard option.
04:55	Generating and customizing a video	The tutorial generates an explainer about noise-canceling headphones and discusses the consistency and editability of code-based prompts.
07:37	Creating and syncing a voiceover	The creator generates narration, obtains a word-level SRT transcript, and uses it to produce a video synced to the voiceover.
10:12	Reviewing the result and final tips	The finished star-formation video is played, followed by advice to refine a style to suit your videos.

Quotes

It does it all through code. — 00:00

Claude writes plain JavaScript that draws each frame by itself. — 00:30

This whole thing is completely free at the first link in the description. — 02:17

Much more consistent. — 07:05

It works best with the word-by-word timings. — 09:11

Concepts and entities

Claude, JavaScript, Remotion, HyperFrames, Opus, Sonnet, Gemini 3.8 Flash, Google AI Studio, skill

Full transcript (original language)

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.