How I Created a Professional Motion Graphics Video With Claude Code + Remotion Skills (No Editing)

Take a look at this explainer video we created.

>> Mars, the red planet, a world that has [music] captivated humanity for centuries.

It's the fourth planet from the sun sitting just beyond Earth in our solar system.

>> This was not edited in After Effects. We

did not touch key frames and we didn't animate anything by hand. Clot code

using a new remote agent skill built and rendered it for us. motion, timing,

everything, all done by just prompting.

But first, clot skills. So, if you have been following AI lately, clot skills are the hottest topic right now.

Everyone has talked about them. But

here's what they actually are.

Instruction manuals that teach Claude how to master specific tools and workflows. There are specialized

workflows. There are specialized knowledge packs that turn clot from a general assistant into an expert in domains like video production, data

analysis or automation. And when you combine skills with clot code and thorick's agent coding tool, you unlock something powerful. And now

something powerful. And now it's a framework that lets you create videos using React code, the same technology powering modern websites. But

here's the problem. Remotion is

incredibly powerful yet complex. You

need to understand React animation libraries, timing [music] functions, and video rendering. It's a developer tool

video rendering. It's a developer tool that has been out of reach for most people. That's why this remote agent

people. That's why this remote agent skill is a gamecher. It gives Claude deep knowledge of Remotion's entire framework like how to structure

compositions, choreograph animations, manage timing, handle assets, everything. So instead of cluing at

everything. So instead of cluing at video code, it now understands the framework like an expert remote developer. It's the same setup

developer. It's the same setup developers are already using to autogenerate videos. And by the end of

autogenerate videos. And by the end of this video, you will be able to direct professional motion graphics with prompts. So let's get started. And first

prompts. So let's get started. And first

we need to install the remote skill. To

do that, we are going to type this command here. You can find this command

command here. You can find this command in the remote website tool. And we will select all of the models in the list and by clicking the space and then enter. So

when the clot skill is installed in the project, we will now open the clot code terminal and ask it to start a new remote project. So let's wait for it to

remote project. So let's wait for it to finish setting up.

So it's now finished setting up the project and the template. So just simply follow this directions here to launch the Remotion Studio and let's check out how it looks. Great. So this is how

Remotion looks. It's like a theater

Remotion looks. It's like a theater editing app, but you program each scene.

So now that we have a project installed and you already know how Remotion looks, let's get to the development. So our

development has nine phrases. Phrases

one to three will establish the systems where Clot operates. And phases 4 to 7 creates the assess and defines usable

components. And phases 8 to 9 is

components. And phases 8 to 9 is execution. And with that said, let's

execution. And with that said, let's proceed. So first of force phase one.

proceed. So first of force phase one.

Now that we have already installed everything, right, let's open this build guide we made specifically for this video we create. And now, while this build guide is for developing the

specific video we want to make, right, you can also repurpose this guide and use it to create other videos that you want once you understand how this prompts work. So, if you want a copy of

prompts work. So, if you want a copy of this prompt, you can check out our free community where we upload guides like this. So, you too can also build web AI.

this. So, you too can also build web AI.

So, let's copy the phase one prompt and then paste it in CL code and then we can hit enter. So what this prompt does is

hit enter. So what this prompt does is that it establishes a technical foundation that plot has to follow through the course of development. You

can think about rules and patterns that it should follow. And this is very important because most project fails not because the people doing it lack visual

direction but because the AI is not given concrete rules. So it ends up doing its own things. So once phase one is done, this is how it will look like

and a development markdown file will be created. So clot is done laying the

created. So clot is done laying the foundation and so you can now proceed to the next phase phase two. So now we are going to establish the art direction and

facial system for this video and this is a really really important step in the workflow. Up until now, we have set up

workflow. Up until now, we have set up the environment and made sure Claude actually understands remote. What we're

doing here is telling Claude how to think officially before it writes any real code. So, go ahead and open the

real code. So, go ahead and open the build guide again. You'll see a section labeled phase two. So, you can just copy

the entire prompt exactly as at this and then jump back into CL code in your terminal. You can paste the prompt in

terminal. You can paste the prompt in and hit enter and then let CL take over for a moment. And now I want to pause here and explain why this prompt matters

so much because this is where a lot of people either skip ahead or try to over control things. So this prompt is not

control things. So this prompt is not asking Claude to build the full video yet. What it's doing is establishing

yet. What it's doing is establishing systems thinking like we are defining the rules of the world Claude is about to build on. So you can think of it like

creative direction not instructions. We

are telling plot things like the overall tone, the visual constraints, how motion should fill and how design decisions should be made when something is not

explicitly defined. And this is very

explicitly defined. And this is very important because we are never going to describe every single pixel of this video, right? And that would be

video, right? And that would be impossible. But at the same time, we

impossible. But at the same time, we don't want Claude guessing randomly or inventing patterns that do not match our style at all. So this prompt creates control without micromanagement and it

gives Clot a framework to operate inside. So instead of guessing what

inside. So instead of guessing what clean or modern means, it has a shared definition with us and instead of hallucinating, it now has both the

technical skill and the creative guard rails to work correctly. So let's hit enter and wait for CLA to process it.

All right. Once Claude is finished, you'll see here that it created an art direction file outlining how it should reason and execute future decisions.

When we get to the actual development and do not be afraid to go back and forth in this part, you want your project to have the art direction you

want. So you might have to ask C to

want. So you might have to ask C to change or add things. And just like that, we have unlocked the next phase of the workflow. We now have a shared

the workflow. We now have a shared visual language between you and the AI.

So Claude knows how to think about this video before it ever writes a composition or a sequence. And that's

huge. So at this point, we have successfully established art direction and fisher control. We have not built the video yet, but we have set the foundation that makes the actual build

predictable and professional. With the

art direction locked in, the next thing we need to do is craft the story of the video. [music] And this step finalizes

video. [music] And this step finalizes the system we need. We are moving from how the video should feel to what actually happens moment by moment. And

the goal here is very simple. Define the

scenes, the flow, and the timing. So the

video makes sense before we animate anything. Okay. So let's go back to the

anything. Okay. So let's go back to the build guide and find the phase 3 prompt.

We can copy the entire thing and once you have got it jump back into clot code and then you can paste the prompt in and hit enter. And now we wait for clot to

hit enter. And now we wait for clot to process it. So clot is taking the art

process it. So clot is taking the art direction we defined earlier and using it to create a timeline. It's deciding

how many scenes we need, what each scene is responsible for, and how long each moment should live on screen. So this is what allows us to build a 10-second or

60second video that actually feels intentional instead of rushed or random.

And once Cl finishes, you will see a breakdown of the video into scenes. Each

scene has a clear row. There's usually

uh an opening hook, a main message section, supporting moments, and a close, right? And this is effectively a

close, right? And this is effectively a storyboard [music] just written out. And

this is kind of like a story board just written out in text instead of visuals.

So at this point you can ask cla to tweak things. So if a scene does not

tweak things. So if a scene does not feel [music] fit to what you want to create, you can just say that. If you

want to reorder sections or remove one entirely, this is a time to do it. This

is another place people get stuck, okay?

Um thinking they need to accept the first output. You don't actually treat

first output. You don't actually treat it like a collaborative draft. Okay. And

that's said in this case the structure looks solid, right? The pacing makes sense. The scenes flow logically and it

sense. The scenes flow logically and it the length we are aiming for. So instead

of iterating further, we are going to give Clot the goal signal. So all you need to do is tell Clot to proceed and create the storyboard file based on this

structure. Once you do that, clot will

structure. Once you do that, clot will generate a dedicated file that represents the full timeline of the video. And this file becomes a single

video. And this file becomes a single source of truth for what we are about to build. And just like that, we now have

build. And just like that, we now have the story of the video locked in. We

know what happens, when it happens, and why it exists. Nothing is animated yet, but the hardest creative section is already done. Now that the storyboard is

already done. Now that the storyboard is done, we're going to move into phase four, which is defining our SS infantry.

This is one of those steps that might feel optional at first, but is actually critical if you want clean, consistent results. And the goal here is very

results. And the goal here is very simple. Define what assets exist and how

simple. Define what assets exist and how they should look before we try to create and animate or place them anywhere. So

this step is crucial as it creates separation between design distinctions and scene logic. And that separation is what keeps things from breaking later.

And here's why this matters. If you ask court to design an assess, decide how it should look and figure out where it goes in a scene or at the same time, you are

stacking too many decisions into one step. And that's where it fails. You get

step. And that's where it fails. You get

inconsistent and bad results. So let's

go back to the build guide again and copy the phase 4 prompt. Once you have got it, jump back into the CL terminal.

Paste it in and hit enter. And now we can wait for CLA to process. While

that's running, let me explain what this prompt is doing behind the scenes. It's

not creating facials yet. It's defining

design parameters for each SSL needs like the objects, color usage, etc. So, a really common mistake here is skipping this and letting each scene infect its

own assets. That's how you end up with a

own assets. That's how you end up with a video where every scene looks dead and does not feel cohesive. And once Clot

finishes, it will create an SS inventory file that is laid out clearly. And each

assess has a name and a defined parameter. And at this point, you do not

parameter. And at this point, you do not need to change much unless something is missing or clearly unnecessary. If you

do want to add or change anything, just ask CL to do it. And just like that, we now have a complete list of assets and a

design system that governs them. And

that means when CL starts generating motion components, it will not be guessing how things should look. it will

be pulled from this infantry directly.

Now that we have the SS bags locked in, we can move into phase five which is actually generating the SS themselves.

We'll now produce the concrete pieces that will be used across the entire fetal. All right. So up to this point we

fetal. All right. So up to this point we have been deliberately separating concerns and first the development system then art direction then story

board then previously the assess specs.

And this step now turns those definitions into actual usable assets without mixing responsibilities which

sets up clot code to develop with very clear instructions and context which is why this works so reliably. So let's

walk through it. Let's grab the phase 5 prompt in the build guide again and then paste it in the CL terminal. But before

we hit enter, here's an important tip.

When you are working with larger projects with lots of assets across different categories is a really good idea to generate them in batches by category. What I mean by that is adding

category. What I mean by that is adding a rule to the prompt that tells Claude to generate one assess category at a time and this reduces the chances that

the AI hallucinates which lowers the chance of CLA missing styles across unrelated assets. So in our case this

unrelated assets. So in our case this video does not have a huge assess inventory. So we just go ahead and

inventory. So we just go ahead and generate everything in one single pass.

Just know that as your projects get bigger, batching becomes a best practice. Okay, this part usually takes

practice. Okay, this part usually takes some time. So just be patient. Once it

some time. So just be patient. Once it

finishes, take a quick moment to scan the output and see if all the assets you need are there. Normally you will find everything in the SRC folder. And just

like that, we now have a full set of generated assets ready to use. And these

are not abstract ideas anymore. They are

real building blocks that will be reused across scenes, which is what we will give the video consistency we want. With

all our assets complete, um the next step is to give them motion. This is

phase six. And the goal here is to define how each of our assets behaves.

not the final scenes yet, just the motion building blocks we'll reuse [music] everywhere. These are what you

[music] everywhere. These are what you think of as motion primitives and basically we are creating a shared motion language that the entire video can use. So in the build guide, just

can use. So in the build guide, just grab the phase 6 prompt and then paste it into CL code. Now here's the important mindset shift. We do not need

to be very technical here. We're not

listing every key frame or describing every animation in detail. And the

reason we can do that is because of the work we did earlier. Because in the first phases of this project, we established how Claude should think. We

defined development rules and pattern, facial principles, storytelling, and design constraints using all of those markdown files. And this gives Claude a

markdown files. And this gives Claude a heart understanding of the style, the pacing and the tone we are aiming for.

So at this point we can trust it to evaluate the project as a whole and propose sensible motion patterns. So

once the prompt is pasted in we can go ahead and hit enter. CLA will start analyzing the SS and generating motion primitives. A common mistake here is

primitives. A common mistake here is trying to over control this step. If you

attempt to micromanage motion at this stage, you will end up baking s specific moisture into your motion system and that makes things harder to reuse later.

So instead, we are aiming for flexible general purpose motion patterns that feel consistent across the entire video.

And now that does not mean Claude will get everything perfect. That's okay. Our

job here is not to expect flawless motion on the first pass, right? Our job

is to get a strong baseline. We'll

absolutely come back and polish specific moments later when we see the scene outputs. So after a bit of processing,

outputs. So after a bit of processing, clot finishes. And just like that, we

clot finishes. And just like that, we now have a set of motion primitives defined for the project. These are

reusable, consistent, and aligned with the visual and narrative system we established earlier. This is a huge

established earlier. This is a huge milestone. We now have S's and we have

milestone. We now have S's and we have motion and we are really close turning all this into a video. And now for phases seven and eight. These are the parts where we basically glue everything

together. Some of the things that this

together. Some of the things that this prompt will be asking Claude to do are likely things that have already been factored during the early phases, but still it's important to run them to

create necessary components and [music] to make sure that we don't have gaps. So

just run them in the clot code terminal while asking clot to skip things that it has already done. All right. Now that

all that is done, we finally have the green light to build the scenes and assemble the video. Okay. And this is phase nine. And honestly, this is the

phase nine. And honestly, this is the easiest part of the whole workflow because all the hard thinking has already been done for us. Okay. So let's

keep it up. At this point, clot is not guessing anymore. is executing inside a

guessing anymore. is executing inside a system. We carefully set up. Our goal

system. We carefully set up. Our goal

here is very simple. Generate the code for each scene. Review how it looks, then assemble everything into one single

polished final video. First, copy the phase 9 prompt from the build guide and paste it into the CL terminal and then hit enter. And what this prompt does is

hit enter. And what this prompt does is instruct code to start building the actual remote scenes using everything we have created so far like the art direction, the storyboard, the assets

and the motion primitives all come together here. So now ideally especially

together here. So now ideally especially for larger projects you want to generate scenes one by one and that's why we decide the prompt that way and even

though this is only a 1 minute and 30 seconds video learning this best practice early will save you a lot of pain later. So when scenes are generated

pain later. So when scenes are generated individually it's much easier to debug iterate and make targeted changes without breaking the entire video. So

once scene one is done, we move on and generate the rest of the scenes. And

after that's finished, we want to actually see what we have built. You can

ask claude to run the remote studio for you and it will give you the URL or you can just run npm start in the terminal.

Now we are inside the remote studio and let's go ahead and press play. And right

away you can see that the art direction and visual style look consistent across every single scene. And that's a really good sign. If the video feels a little

good sign. If the video feels a little flat, [music] that's completely expected. Right now, we have only

expected. Right now, we have only created the scenes. We have not fully assembled the video or polished the transactions yet. So, from here, we'll

transactions yet. So, from here, we'll just go back to clot code and raise issues that we observed and tell clot exactly what we want to improve like the

exact parameters on how we think the scenes should move. And the exact prom we used here is not that important. Your

output might look different from each section like yours to mine. The exact

prom we use here is not that important.

Your output might look different from each section compared to mine. Okay? And

that's also a good thing because this is where you start developing the skill of polishing and debugging your own work.

Okay? You're no longer just following prompts. You're making final judgment

prompts. You're making final judgment calls. And after that's done, we check

calls. And after that's done, we check the feeder again. And just like that, everything feels tighter. The motion is cleaner. The transitions are better. And

cleaner. The transitions are better. And

the feeder finally starts to feel intentional instead of mechanical. All

right, but we're not stopping here.

Okay, the last layer is voice over and background music. So, for this, we'll

background music. So, for this, we'll use the 11 Labs SDK. Uh, we keep this part fast. So just head over to the

part fast. So just head over to the 11laps documentation, grab the appropriate command for your setup. And

since we are using NodeJS, we will just use that one. And then just ask Claude to run the command and set up the 11laps integration for voice over

and music. So Claude will create an ENV

and music. So Claude will create an ENV file for you where you can just paste in your 11laps API key. So for that you can ask CLA to generate a voice over script

that matches the video you have built.

And once that's wed up and done, let's check out the output again.

>> Mars, the red planet, a world that [music] has captivated humanity for centuries.

It's the fourth planet from the sun, sitting just beyond Earth in our solar system. At its closest, Mars is 225

system. At its closest, Mars is 225 [music] million km away from Earth. That's a

7-month [music] journey by spacecraft.

Pack your patience.

Mars is about half the size of Earth. A

smaller world, but no less fascinating.

[music] A day on Mars is almost the same as Earth, 24 hours and [music] 37 minutes.

But a year, that takes 687 [music] Earth days, almost two of our years. The

atmosphere is paper thin, just 1% [music] of Earth's. You definitely need a space suit.

Why so red? Iron oxide, rust, [music] covers the surface, giving Mars its signature color. Mars is home to [music]

signature color. Mars is home to [music] Olympus Mons, the largest volcano in the solar system, three times taller than Everest. [music]

Everest. [music] And there's water frozen at the poles and possibly hidden underground. The key

to future exploration. [music]

We've already sent five rovers to explore. Sojourer, Spirit, Opportunity,

explore. Sojourer, Spirit, Opportunity, Curiosity, and Perseverance.

One day, humans [music] will set foot on Mars. We'll build habitats, plant flags,

Mars. We'll build habitats, plant flags, and call it our second home. Mars

awaits.

>> Now, this is what our Mars explainer video looks like. A fully built, polished, clean, and professional explainer video built from a system, not

guesswork. And the storytelling feels

guesswork. And the storytelling feels nice. The visuals look great. And each

nice. The visuals look great. And each

[music] transactions and the storytelling feels nice. The visuals

look great. And each transition plays really smoothly. All right, so let's

really smoothly. All right, so let's zoom up for a second and look at what we just did. We went from an empty folder

just did. We went from an empty folder to a fully rendered professional video.

No After Effects, no timeline, no key frames. We used CL code remotion and

frames. We used CL code remotion and agent skills as one single system. And

we directed the result instead of manually building every piece. That's a

real assets you can post, ship, and plug into your workflow today. And that's the bigger takeaway here. The power is not

just that AI is faster. Is that these tools work together to enclive, you're working like a small team. And

that is the shift from using AI to actually building with AI. So from here, you're not just making videos, you are building facial systems. You can tweak

the vibe, swap data, generate new versions, and launch without waiting on anyone else. And this does not replace

anyone else. And this does not replace creativity. It actually amplifies it.

creativity. It actually amplifies it.

And once you have this workflow, you can apply it to product demos, social clips, client work, or anything else you want to ship. So, if you want to go even

to ship. So, if you want to go even deeper, and that's exactly what we do inside the Any No Code Premium community. We break down real world

community. We break down real world workflows like these, show you how to make money with AI, and you'll be learning alongside professional founders and builders. Plus, you can get our AI

and builders. Plus, you can get our AI website design course there to help you implement things faster. So, if you like this video, please hit the like button and subscribe for more tutorial like

this in future. I'll see you in our next one.