Claude + Remotion Video Tutorial — Full Transcript
Source: Chronixel YouTube tutorial
Topic: Using Claude + Remotion for programmatic motion graphics video editing
Format: Full VTT caption transcript, cleaned and formatted for reading
Introduction
I, manually, never have to create motion graphics like this ever again. Claude came into the picture. I installed this incredible tool into it and just watched days of my life come back to me as it edits my videos for me and creates these beautiful motion graphics using Remotion. Editing videos with motion graphics used to take me ages.
Manually creating things like this or like this or like this would be the longest, most time-consuming part of my entire process. And now I can say I have retired from that part of my workflow and it feels good. The quality of videos goes up, the speed of when I get an idea to when I’m able to upload it on YouTube increases, more videos equals more value, more value equals more growth. Incredible.
And if you look around with what’s going on, this topic is by high demand. So, I’ve completed the Claude plus Remotion workflow in a way that can be easily replicated. And in this video, I just want to give it to you all and set you running. And for real, pay attention to the video chapters because one aspect may intrigue you more than the others.
Part 1: Setting Up Claude Desktop
Anyways, let’s get into it. So, first of all, we need to make sure that Claude is set up properly, right? So, in this video, I just kind of want to summarize what that means. You need to install four things, all right?
You need to install Claude’s desktop app. You need to install Git Bash to make Claude Code work. You need to install Node.js to make the skill we are installing work. That skill will be Remotion.
And finally, you need Claude’s Chrome extension, all right? If you’re having trouble with any of these, for example, you install Git Bash but Claude still says you need to install Git Bash, I have super specific videos addressing just those things. And believe me, these types of problems are more common than you might think. Like, look at the engagement on this video here. A lot of people share the same issues, so you are not alone. Don’t worry.
So, anyways, moving on, assuming you have the four things working well, we can test it very simply by installing the skill, which leads us to step two of this video.
Part 2: Installing Remotion in Claude Code
Installing Remotion in Claude Code, okay? The installation of the skill is arguably the easiest part of this whole video. You simply just go to Remotion, this site right here, and copy this little section on the homepage by clicking it a bunch, then going back into Claude and saying, “Install this skill.” Paste it, and then I like to say something like, “Let me know when it’s done.”
Now, Claude likes to respond different sometimes after it installs. It may say something like, “I’ve successfully installed Remotion, blah blah blah.” It may say something like, “Select a folder in which we want to operate out of.” Or something similar. It may also say something like, “Pick a template for me to operate out of.” Right?
If you got any of these three responses or something similar that basically indicates that Remotion is successfully installed, great. You’re in a really, really good spot. This means you did step one correctly, allowing you to install and use Remotion, okay? But, I actually want to start a new chat for part three of this video because in part three, we need to enhance Claude, okay?
Part 3: Enhancing Claude — Work Better, Work Longer
Now, what does this mean? Well, we want to give it a set of instructions, right? One, to work better, meaning it sticks to a set of rules for certain things and unlocks its creativity and freedom for other things. And two, to work longer, meaning if you know anything about Claude, you know there are usage limits.
It spends a limited amount of tokens, unfortunately, very fast, too fast. So, we’re going to teach it first how to be wiser in token utilization. And trust me, this is actually really, really important because you can go from generating 10 scenes before the limit is reached to about 30 to 40 scenes, depending on the situation. And this can go from taking three to four sessions with big breaks in between to finish a video to finishing a video in just one session.
So, work better, work longer. Let’s get into enhancing Claude, all right? So, for this, let’s just create a project folder and call it whatever you want. I’ll call it learn V1 for this video.
Then, create two folders, one called resources and another one called skill. Now, inside the resources folder, I want to drop a few things. Textile, scene composition, scene revision and versioning behavior, and this creative unlock doc, all right? We are also dropping our three fonts that we choose.
And this little document is meant for just us. You’ll understand why later. So, let’s move on. And by the way, every asset I share in this video, like the ones right here, will be very easily downloadable all at once in a very clearly outlined folder in the description below.
So, go ahead and get that whenever you want. But to quickly get into these specifically, first we got the textiles. It’s super short and sweet, just outlining how our heading should look and how to utilize the fonts we chose. You could see how easy it is to swap out the words here, for example, a different font or a different word for these over here.
Now, to summarize the scene composition doc, it basically gives a rule to translate the meaning of a script into visuals. Not verbatim copying the words of the script, right, and turning those into motion graphics, but converting the words into a visual representation. I hope that makes sense. It will once we actually get into it.
Next, we have scene revision and versioning behavior doc, okay? This is a personal preference of mine. I think you’ll like it, too. Basically, when we suggest to change a scene, let’s say it did something we don’t like, it won’t edit that original scene, it will duplicate it first and create a version two of that one scene. Kind of like how it shows here. Sometimes you may not like an edit and it’s a hassle to sometimes revert a change when the original may have been better, right? So, this document kind of prevents that. Now, for the first example in this video, we want this rule applied.
Creative unlock, okay? Basically giving it freedom to think outside of the box and use what it feels is best to compose scenes. I’ll get into this little document down here a bit later. But, now let’s go back and go into the skills folder this time.
So, we could make Claude work longer. Let’s drop this anti-gravity skill, which will teach Claude how to use tokens in a more efficient way. It’s a beautiful GitHub repository made by KingstarOmega. You’ll find it in the asset download or you could actually visit the GitHub page here and download it there to support the creator of it.
And now we’re pretty much done. Claude is officially ready to be enhanced. So, let’s move on to the next step.
Part 4: Installing the Anti-Gravity Skill and Setting Rules
So, we are officially ready to start generating video scenes, which moves us on to part four, where we need to install the anti-gravity skill and set the rules first.
So, we have our resources folder ready. We have our skills folder ready. So, pay close attention now, follow along if you like, or just sit back and watch the workflow and download the step-by-step guide for later, okay? I start off every new Claude session by setting the folders first, which is our main folder that holds the resources and skills folder that we created at the beginning.
Next, let’s start by focusing on installing the skill to make the token usage more efficient. I say this: “First, install and activate the anti-gravity protocol skill. Let me know when it’s complete and how you are enhanced.”
After a few seconds, I get this response: “Anti-gravity protocol installed and active. What you enhance me with, no preambles, no summaries, three strict modes automatically selected per task. Tool priority enforced, no guessing.”
You may get a slightly different response, don’t worry about that. If it indicates that it’s installed, then you’re in a good place. Now, let’s make sure it understands those parameters we set in the four documents that we added to that resources folder. “Read the content in the resources folder.”
Then I paste the location here just to be safe. “Learn it and tell me when you are done.” Here’s how it responded to me: “Done reading all four files. Let me save this to memory now. Here’s what I learned. One, textile. Two, scene composition. Three, scene versioning. Four, creative unlock rule.”
Part 5: Opening and Using Remotion
Now, we are ready to install and open Remotion. So, I like to open Remotion in Google Chrome. That is why earlier I said we need Claude Chrome extension. I like to switch between numerous tabs in my workflow and I like Remotion to be one of those tabs. So, if we go to the Remotion site again, click this a ton or just one time to copy it. Come back into Claude. I’ll say, “Next, install Remotion skill.” Paste the skill here. “Let me know when you are done.”
Now, you can see one variety of the three responses I said you might get if Claude has everything it needs to install correctly. Remember, I’ve got quick one to three-minute videos on the subject if it doesn’t work for you. It’s kind of like the prerequisite requirements for first-timers.
Anyways, if we go back into Remotion over here, there is a button that takes us to the templates page. You can read through some of these and select. The thing with vibe coding is the context really matters, right? Like what you said at the beginning kind of dictates the long run. It’s like expecting a pizza at the front door, but then getting a burrito. It’s not necessarily a bad thing, it’s just not what you expected, right?
Honestly, for beginners, I recommend just starting with hello world. It’s a good overall base. And other times, just say choose what’s best to be adaptive to my requirements and script. But for this case, just to experiment a little bit, I’ll say 3D.
After some time, it says done. Remotion is installed with React 3 Fiber template. Now, I say “open Remotion” with Chrome open here on the side, and moments later it automatically opens up. And if it doesn’t, it might give you a link or some sort of instructions. You can press this link here, and it does the same thing and opens up.
And now we are officially ready to use a video script to generate scenes that perfectly flow with what’s being said.
Part 6: Generating Motion Graphics from a Video Script
So, part six, we’re going to generate motion graphics based on a video script. Well, we’re going to need a video to work with, right?
So, we drafted up this super simple script here for a video called “Three Reasons Mr. Beast Has Mastered the Art of Retention.” We even recorded it, so we can show you how everything pieces together later, okay?
Now, this document file that holds the script is dropped inside our Claude Code project folder, okay? Now, we go back into our Claude session and say this: “I added a script to the folder,” then I paste the folder path again. “It’s called three reasons Mr. Beast has mastered the art of retention. Read it, then draft out scenes for a script.”
Now, after a quick moment, you can see it drafted up 20 scenes that go along with the script.
Now for the fun part. We go back into Remotion. Remember, to get this, all you have to do is say “open Remotion” and make sure you have Chrome open as well, and it will create a tab for you. Then go back into Claude and save this exact prompt because it is my favorite to have a lot of fun with Remotion, okay: “Build the first five scenes. Use your creative unlock. State your creative direction as such.”
Then paste this part below here. Now, we can see it shows “editorial investigation” as a style and locked it in, right? Think The New Yorker meets a forensic autopsy of Mr. Beast’s tactics. Then just over here, we can see the five scenes that it generated. Scene one. And scene five.
Okay, pause. I’ll show you how to revise and how to work with these in a bit, but we got more scenes to generate, right? So, I want to show you different styles before we continue and really show you what creative unlock really does. So, here’s what we do. In Claude, we say, “Now, for the next five scenes, change your creative direction lock. Showcase your choice again, then generate the next five scenes.”
This time it shows “mission control.” Think NASA flight ops meets ESPN broadcast bug meets cinematic war room HUD. That’s crazy.
Now, I went ahead and changed the creative direction every five scenes just to show you what’s up and save you the time, okay? These five scenes are “for you page algorithmic capture.” Think TikTok for you page meets Spotify wrapped for a Gen Z brain. These five scenes are called “architect manifesto.” Think Tadao Ando concrete cathedral combined with Massimo Vignelli typography combined with Kubrick monolith. That one was a tough one to say.
These five scenes are called “sketchbook — a closer’s notebook.” Drop the polish, the final stretch feels like flipping over the back cover of all four previous chapters and finding the creator’s actual working notebook. And finally, these five scenes are called “boardroom whiteboard: the founder’s drop.” Think glass walled startup meeting room at 11:00 p.m.
Pretty cool so far, right?
Part 7: Rendering Out the Scenes
Now, where do we go next from here? So, we’ve got a lot more to show you such as how to revise clips, how to make them transparent, how to make them work around your face cam, right? Generate images for your graphics to use a lot more, but how about we save that for a bit later and first let’s just show you how to render out the 30 scenes we already have and start putting them into our edit, okay?
So, this is super simple. In Claude, all we have to say is “create the out folder with all the scenes. Make them 1080p.” You can also say 4K, which is awesome, but for this video, I’m just going to say 1080p.
Now, after you give it time to render, go into your Claude session project folder. Remember this one right here that we made? We called it learn V1. Now, you’ll see there’s literally a folder called “out” with all our 1080p MP4 files.
Part 8: Adding Motion Graphics to the Video in DaVinci Resolve
Now, moving on, let’s add motion graphics to the video, okay? But first, let’s show you our little Mr. Beast example video. We’d like to edit here in DaVinci Resolve, but all the principles that we use in this video work on the other platforms like Adobe Premiere as well.
So, let me just show you the first few seconds of this video here:
Three reasons why Mr. Beast has mastered the art of retention. He doesn’t just make videos, he builds traps for your attention.
So, yes, I did change my voice to Drake for fun and I did add captions. I knew for the tutorial my head would be up here in this corner and I’d be talking, so I wanted to know what part of the script was being said without actually hearing it and I wanted to change the voice from mine, so you could tell the difference between tutorial speaking me and example video me.
So, I want to show you my process here. We have our example video clip together here and we have our generated scenes right here on the right. Okay? But, you can see the first scene up there says “attention trap,” right?
And so, I’d like to scroll down here to the playhead where we can find the word “attention” or “trap” and then we can mark it by pressing M twice and labeling it scene one. Okay? Now, we could do the exact same thing for scene two and find the word “engineering.” Right? So, it is right here, somewhere around there. And we can mark it the same way with scene two. You could see I did this for the whole video. I marked every scene on the timeline. It was super super easy.
Now, starting with scene one, let’s bring the playhead right over to scene one over here, okay? Let’s drag that right up to it. And now, let’s go all the way up to the top right and grab scene one and then drag it slowly over to the playhead. Okay? Now, let’s go to scene two and let’s bring the playhead there. And let’s do the exact same thing by dragging scene two over here and bringing it back down to the playhead. Just like this. Super simple.
Now, I don’t like that there’s just a super mini gap right in between these. So, let’s just close that gap and bring them together. Just like that.
Now, let’s go up to the effects tab up here in the top left and let’s search “push in” video transitions. And let’s bring that to the beginning. Oops, I got to probably zoom in just a little bit. Yeah, let’s bring that to the beginning. There we go. And let’s make it a little bit shorter to make the transition faster. And let’s do the exact same thing on the end. Perfect.
And now let’s just go to the beginning and watch it together:
Three reasons why Mr. Beast has mastered the art of retention. He doesn’t just make videos, he builds traps for your attention. Every second is engineered so you don’t click away. And once you understand these three retention tricks, you’ll never watch his videos the same way again.
Okay, so you can see I do this across the board for all the scenes and then I add these little whoosh sound effects at the beginning and end of all these little sections here. Just to kind of go along with the transitions. Then here I’m simply adding a chill music beat in the background. And just like that we’re done. That was so fast to complete this video.
Now, let’s turn this entire thing into a compound clip so we can speed it up for the video and watch it together:
Three reasons why Mr. Beast has mastered the art of retention. He doesn’t just make videos, he builds traps for your attention. Every second is engineered so you don’t click away. And once you understand these three retention tricks, you’ll never watch his videos the same way again.
Reason number one, the promise is instantly clear. Most creators waste the first 10 seconds explaining. Mr. Beast doesn’t. He tells you exactly what’s at stake immediately. “I gave 100 people
10,000. I survived 50 hours underground. Last to leave wins500,000.” No confusion, no warm-up, no dead air. Your brain instantly knows the game and when the game is clear, curiosity kicks in.Reason number two, every video has a countdown feeling. Even when there isn’t a literal timer, his videos feel like they’re counting down. There’s always pressure. Someone might lose, someone might win, something might go wrong. The viewer isn’t just watching events happen, they’re waiting for the next consequence. That’s why his pacing feels addictive because every scene creates a question. What happens next?
Reason number three, he resets attention constantly. Here’s the secret most people miss: Mr. Beast doesn’t rely on the hook. He re-hooks you every 20 to 40 seconds. New challenge, new twist, new rule, new elimination, new reward, new problem. Right when your brain starts to settle, he changes the pattern. That’s retention. Not just grabbing attention once, but earning it again and again.
So, Mr. Beast retention isn’t magic, it’s structure. It’s a clear promise, causing tension, repeated hooks, escalating stakes, and zero confusion. That’s why his videos don’t just get clicks, they hold attention. And in modern content, attention is the whole game. Don’t just make people start watching, build a video where people feel forced to finish.
Now, I did this as fast as possible for the purpose of this video and I completed it so fast. Like you guys don’t even understand. I don’t even know how long it took, maybe like an hour max to record, generate the scenes, put it all together. It would have taken me days to complete all these motion graphics and edits and putting it all together, especially while working a day job. It’s just insane how fast this was completed.
Part 9: Scene Revision — Resizing and Repositioning Graphics
Now, you’re starting to be in a really, really good place to take over, but I’ve got some more for you. This next section is all about revision.
If looking at just this one scene, this one scene right here, one of my scenes that it generated, what if we want it to only take up half of the screen, just like this? And then reorient itself to fit on whatever half you want, leaving the space for the webcam. So, this is how we’re going to do that.
Remember in our resources folder, I give you a doc that’s just for us, not meant for the AI. I said that we’re going to come back to it later. So, this is that part of the video that we’re coming back to. This doc right here is called “revision prompts.” Inside it, we have two prompts.
So, let’s start with this first one here. Look how easy this is. Copy this and then paste it into our Claude session. All you have to do is say what scene you want to adjust and where you want your graphics to be adjusted to. So, in the prompt, I’ll say “scene 13 and left 35% of the screen.”
Now, let’s look at what it generated. So, first of all, we know that this new generation will be here on the left side, right? So, we’re going to have to reposition our talking head just a little bit. So, over here, let’s just push that over and zoom a bit to clear the black space.
Now, remember the rule we made in the resources folder, that any revision will not adjust the original scene. We’ll actually just create a version two. Like we see right here. This just protects us just in case we actually prefer the original more than the revised version. But, in this case, we like our revised version. So, let’s drag that over top of the original.
It’s important that it’s over the webcam, just like you see here. And now, simply go to the inspect menu or wherever your crop tool is and bring the right side in to go up to this line right here. Now, if we play it back, you can see the specific prompt that we used is great because it’s not only just on the left side, right? It needed a bit of logic to reorient itself in a way that makes sense, and it will fit in this tiny little space here without overlapping. It’s honestly great.
You could do the same exact thing for vertical videos. You could just say something like “top 50% of screen” or “bottom 50% of screen.”
Part 10: Background Removal with Green Screen
Now, what if we actually want to take this a step further and remove this background entirely? Now, here’s a process on how I completely remove the background.
So, let’s go back to the revision prompt doc. This time, let’s use the background removal prompt. This prompt is really, really awesome because first, it green screens your clip, but more importantly, it uses logic to convert the elements in the scene to fully solid colors that are far from green and create really easy separation from the background. This is super important because it makes it really easy for us to then remove the background in our editing software.
So, copy this to Claude, add your scene right here, and then just wait for the generation.
Now, we are back in DaVinci Resolve, and you see we have our new generation right over here to the right where we have the green screen. Drag it over the last revision. Now, just look how much these elements stand out from the green screen. This is what makes it so easy.
Go to the effects tab over here and search “3D keyer” under Resolve effects, and drag that onto our new clip. Now, close the effects tab, and right over here, set this little thing to open effects overlay. Then, just over here in the green space with that thing selected, draw a little line just like this. Now, you’ll see that the background is gone, and all we have to do is increase the D spill over here in the inspector tab. Switch between flat or tight, and pick whichever one looks best. In this case, it’s flat.
And now we see that there is no background, and it looks great.
New challenge, new twist, new rule, new elimination, new reward, new trouble. That’s awesome.
Part 11: Using Real Images in Motion Graphics
We’re making a lot of progress in this video, and now I think I just got one final thing to show you guys. So, Claude plus Remotion alone will go ahead and create images for you. So, what if we want this scene right here to go from this to this? A phone with a legit image on it, right? Not just a motion graphic. It’s actually pretty simple.
So, first of all, we have to actually go ahead and gather and create the images. In this case, I used ChatGPT to generate 10 vertical Mr. Beast-style thumbnails. Now, returning to our Claude project session folder, we’re going to create another folder inside that called PNGs. And drop all the thumbnails or images you want to use in your motion graphic in there, just like this.
Now, when returning to our Claude session, we skip past the part of removing our background and all that stuff, since we already showed it in the previous example. But, let’s show you this additional prompt here: “Now, remove the text on the phone and select one image to be on the phone for each slide.” You’ll obviously have to be descriptive depending on your exact scene and what you envision. “The images are in this folder.” Paste the folder path as you see here. We have the PNG folder at the very end, and now you just press enter and wait for your generation.
Now, let’s drag this final version here onto the original. Do the same thing as last time. Apply the 3D keyer here. Remove the background. And now, if we have a look at the final playback:
Here’s the secret most people miss. Mr. Beast doesn’t rely on the hook. He re-hooks you.
We can see we got exactly what we wanted.
Conclusion
But that concludes our Claude masterclass — or should I say Claude Remotion masterclass — that helps you retire a part of your editing process that takes a lot of time and ultimately helps you evolve as a creator. This video in particular though did take a lot of time. I was waking up at 4:30 before work to, you know, start chipping away at it and make progress and get it out to you guys. So I really hope you guys learned a thing or two.
I have a lot more tutorials coming out in this space. We have a whole playlist going out. And finally, please like, comment, and subscribe. I truly, truly appreciate you and cheers.