Create Motion Graphics by Talking to AI: Claude + Remotion Tutorial

So, you know when it comes to motion graphics, my tool of choice is Apple's Motion, especially for making motion

graphics for Final Cut Pro, but really for any NLE. But, what if you could create motion

graphics just by talking to your computer and telling it what you want it to make?

That's what we're going to do today. All right, what I'm going to do first here is lay out the components of what

makes it possible to do this prompt-based motion graphics creation. And then, I'm going to do a little demo.

Uh I'll show you some examples of some other work I've done with it, and then I'm going to show you how you can set it

up yourself. So, what we're looking at right now is what's called Remotion Studio. We can see we're in Chrome. You

can see I'm in a local host. I'm just running a local server, and this is the Remotion interface. Remotion is the

piece of software that allows you to create these motion graphics that we're going to tie into. So, what is Remotion?

Well, let's play a little a little bit of this. What is Remotion?

And I'm playing this directly in Remotion. Remotion is an open-source framework

that lets you create videos programmatically using React and JavaScript. Now, you don't need to worry

about what is React and what is JavaScript. Uh the basic idea is we're in this player, I've created these

motion graphics with Remotion by prompting. You can use code. So, Remotion, if if you're a coder, if

you're a programmer, you can program Remotion to create motion graphics programmatically, but that's not what

we're trying to do here. So, um instead of writing code to program a motion, you can drive Remotion with

natural language prompts. Well, how do you do that? I'm using Claude code. You can use

multiple different platforms to do this, but there's a skill that works with Claude code that makes this really

useful, and I find Claude code to be a a great AI system for many things beyond this. So, those are the components, and

this is kind of how it all comes together here. So, this is the video workflow that I'm using. We start with

you or me, the creative director, and then we move down to the brain of the system.

>> [laughter] >> You're not the brain anymore, sorry. Claude code is the brain

that is driving things, and then it feeds into Remotion. So, it's using your text prompt, your natural

language prompt, to turn it into code to drive Remotion, which is the engine that creates this, and then it feeds back.

And I created this animation also all with text prompts

writing Claude code feeding Remotion. I just told it what to do, and I fed it a couple images that you see here that I

made happen to make with ChatGPT, but however you want to make those. All right. So, let's just try it out

first. I'm not going to explain everything, but I'm going to go to Claude code,

and this is in the Claude desktop app on macOS, and I will get how to set this stuff up, but right now I just wanted to

show you kind of what it does. And I'm in a I'm in the code section. We'll get to these tabs in a minute. And I'm just

going to speak in here. You can see the the folder is called my first video, and

we'll get to that as well, but that's where it's looking. And you can type into here, but I'm I'm using You can use

Mac Whisper, or I'm using a an app called Almond that allows me to talk and turn that into text in here. So, let's

just create a little animation. And the thing is, you can be very vague, and then you might need to revise it a lot,

but the more specific you are, the closer you'll get to what you want to actually produce. So, let's try this

out. Okay, I want you to create a new composition of a opening

title animation. I want the title to say "What can I do with Remotion?" with a question mark.

I want it to be uh almost black text, like dark gray text on a white background, a large font so that it

almost completely fills the screen horizontally, and use a nice modern sans-serif font.

And let's have the text come on say a word at a time, both scaling up and fading on from zero opacity.

And let's also, while the text is fading on, let's have a like a parallelogram-shaped box

slide in behind the text and also be offset from it, like maybe it's dropped down, I don't know, 100 pixels and to

the right maybe 100 pixels. And um it's going to be a black box, so where

the text overlaps that, that black text should be inverted and turned white. Okay, so I was just uh holding down the

function key to record that, and there's my description, which I can just do faster than typing. So we're going to go

ahead and send that off. This is also my model choice, by the way. And we'll talk about more about that

later. This is just a little cheaper than the Opus model. So um it's sending it off. It says it

gives you a bunch of uh feedback about what it's doing, and it's

going to ask for permission the first time through this. And I I recommend you you can turn these off so that it does

it automatically, but I'm just going to command return to accept that. Uh

and let it keep working. And now it's reading the rules in the folder that I pointed to to

understand uh what it needs to do, looking at the project structure. Now it says I have everything.

And uh it's looking at the directory. There's already uh what I can use motion for component because I I tried this out

before. Uh so, it's rewriting it. I I should have given in the composition a specific name, but that's okay. Let's

just let it do what it's going to do and see what it comes up with. I'm going to let this run in real time

so you can see how long it takes. Um

you'll also notice uh the studio server has disconnected. I've been having a little bit of a problem with that, but

it's easy to fix. So, the key is I know we're sitting here and

watching this right now, but you can be doing other things. Because I could create this thing in

motion uh pretty fast, but it's it's [laughter]

done. So, let's fix the fact that the the server's dropped out. So, I'm going to

say the studio server has disconnected. And let's see if it'll fix that. It

usually just takes a second to restart it. All right. So, uh

what can we remove remote motion for? So, let's see. I'll go back and play it. What can I do with remote motion?

And it did pretty much exactly what I asked it to do. It's not beautiful, but it's cool.

But uh very easy to modify. So, we can go back now and say that's great, but now let's have the

parallelogram box be large enough to completely encompass the text as it slides in. And then after everything

settles and stays on the screen for let's say 2 seconds, let's have it all go off the screen. And this time I want

the parallelogram box to scale up to fill the entire frame so everything goes to black while the text

animation scales down a word at a time and the opacity drops to zero. And we'll let that kick off.

And let's take a look at it. And again, you can be very very specific about fonts and sizes or you can just

kind of take a stab at it and see what it does. You can see what it's doing now. It's planning out what it's going

to do. Um it can be good idea also to do this in little pieces and you can start by

saying, "Hey, I want this whole composition to be say 30 seconds long and

let's just do the first 5 seconds." You can break it into little steps and that can help it figure out what's going on.

It's really a matter of just kind of working with it and going back and forth and seeing what you get.

You can see it's working out the math now to figure out exactly how to do this.

What I was saying before is you can be doing something else while this is working. That's kind of the key thing.

Even though uh sometimes it might need to think for a couple of minutes um

and you might be like, "Hey, I could build this in motion just as quickly." But you're building the whole time and

here you're giving it some direction. You're you're moving on. And allowing it to do its thing.

Okay, it says it's done. So, let's take a look and see if it's any better. So, it didn't quite understand what I

wanted to do there. But not a bad job there. And I could keep fooling with it, but I

think that gives you the general idea. So, I want to show you some other things that I did with it here.

>> [snorts] >> Uh the first thing I did is I just told Claude, "Hey, I'm interested in

exploring this." And Claude said back to me, "Okay. Hey, I'll make some things for you." I didn't give it any direction

at all. So, on its own it said, "Hey, I'll make you a lower third and a title card and some kinetic text and a logo

reveal with no input from me whatsoever. Although, it does know a little bit

about me, Claude does, because of my file that explains. So, it made this with zero input from me at all.

Same with this title card. MacBreak Studio. Again, I didn't even tell it

to say MacBreak Studio or motion graphics or give it colors or anything. It just made that based on what it knows

about me from some previous interaction. This one's not great, but it's kind of amazing it just kind of made it. And

then it did a little logo reveal, which is not a real logo, but considering I didn't tell it to do

anything and gave it no direction, I was kind of amazed by that. It then tried to do a what it called I

said, "Hey, make something a little more advanced." And it made this with a little floating particles in the

background. Again, I really didn't give any direction. And then this quote-unquote

pro lower third. Which is not bad. Okay. So, here's the thing. It's not

great at everything. It can't do things in motion like sophisticated particle effects, really sophisticated 3D text

animation, replicators, paint strokes. Although, it can do some of that stuff, but it can't do everything. But, there's

a couple of amazing things to me that you can't really do in motion. So, for example, one thing I did is I created a

little spreadsheet of some data. And uh just as a simple mock-up. So, I created 6 months of data called red

units and blue units. And I told it to make an animated bar graph based on this. I a very short uh

prompt. I said, "Make an animated bar graph using this." And this is what it made

for me in a in a matter of a few seconds or you know, maybe a minute. All right, so I I think that's pretty

amazing that it could just do that right away by feeding it a little spreadsheet and creating an M graph. And that's

something you can't do natively in Motion. It can't work with the data in this way.

Another thing I did was I fed it a different little spreadsheet

where I created several different names and titles. So, sometimes you might need to make lower thirds for a documentary

and you've got 30 [snorts] of them or 50 of them or whatever it is. And instead of making them manually

you can feed a spreadsheet to remotion, actually to Claude code, which will then talk to remotion and do it for you. Now,

there's there's been importers for Motion over the years that have done this. I don't think there's anything

currently available, but check this out. Again, I just fed this into Claude code this little spreadsheet and I said,

"Hey, use remotion to do this and use the existing lower third I had made it." I pointed it to an existing lower third

I had made. And then it exported I said, "Hey, export these as ProRes 444 with alpha."

And in a matter of a couple of minutes I had each of these

lower thirds customized with the data from the spreadsheet

that I could then take those and drop them right into Final Cut Pro where I want to use them.

So, I thought those were a couple really interesting use cases that you can't necessarily do in Motion. I don't

consider it a replacement by any stretch of the imagination, but I think that it's an interesting complement to what

you can do with Motion. And uh you know, these things keep getting better. So, I think it's

very interesting. So, let's move on to set up. Okay, so if you want to play with remotion yourself, and use Claude

to prompt it, I'm going to show you how to set things up here. And I'm going to use Remotion to

go through that little three-step process on how to set up prompt-based Remotion.

Step one is to install node.js. This is just a runtime environment that

lets you run JavaScript locally. And it's safe, it's free, >> [snorts]

>> and I have it recommended because you will use it for many other things if you're building anything else with AI.

So, what you're going to do is go to nodejs.org. And you can see right here, free

open-source cross-platform JavaScript runtime environment that lets developers create servers. That's the key part that

we're doing here. Web apps, command-line tools. So, you click get node.js.

And then you click the download the installer, and then you run the installer. I've already done it, so I'm

not going to do it here, but fast and easy to do. That is step one. Step two

is to create the Remotion project. Now, in order to do this, we're going to use You could use Claude code to do this,

but we're going to use terminal because we haven't installed Claude code yet. If you haven't used terminal yet, don't

worry, I'll walk you through it. It's very easy. So, here I am in uh terminal. Terminal is an application that lives in

your applications folder, but inside the utilities folder in the applications folder, or just use spotlight to find

it. And when you launch terminal, it should look pretty much like this, where it's pointing at your home folder. So,

my home folder name is Mark Spencer, and uh my MacBook Pro's name is that right there, Mark's M1 MacBook Pro. The

terminal is kind of like everything you can do in the finder, you can do them in the terminal, and it's always looking at

a specific location where it's working, and by default, that is your home folder.

We're going to install a new folder that's going to contain our Remotion project. You can choose to

put it in your home folder or you could put it somewhere else. When I did this initially, I put it on my desktop, so I

type CD for change directory to desktop. And now you can see I'm on the desktop

and it's just easier to find that way. Right now, I'm not going to do that because I already have one on my

desktop, so I'm going to CD back to tilde, which is back to my home directory. I'm going to install it there

in my home directory. So, how do we install it? We're going to use a little command that's very simple.

I'm going to copy paste it so I type it correctly. And it is NPX space create-video@latest.

So, what does this mean? Because we installed node.js in step one,

we can now use that to access something called node package manager, which basically there are a bunch of existing

packages for JavaScript that exist that you can download and install now that you have node.js installed.

>> [snorts] >> And this will look for the one called create-video that's was created by

Remotion and put it and install it for you. So, I'm going to hit return. And it recognizes it and says, "Hey,

there's a bunch of default templates you can install in here."

I'm just going to choose the default, which is blank, a blank empty template. And hit return.

It asks for the name of the directory that we're installing it. This isn't where because we're already in the place

we want to be, in my case, in my home folder, but it's the name of this folder created in there. By default, it's

called my video. You can accept that or change it to something else. I'm just going to call it my-remotion

-projects. Good to not have any spaces in these names.

Then uh it asks if we want to install Tailwind CSS, which is the style sheets which will allow us to format things.

So, I just say yes. Agent skills, absolutely. This is the thing that your agent, in our case Cloud Code, is going

to use to teach itself how to use Remotion. So, it found the skill. The skill is

called Remotion Best Practices. And it also detected a bunch of agents that I have. So, I can install for all

agents or specific agents. I'm just going to go ahead and say install for all agents.

And I'm also going to install in the current directory, which is where we're working.

And then I'll say yes to that, too. And yes to that, too. I'm just hitting return for everything, basically.

Now, it's already copied it. And it's giving me some resources. Uh we

can look at those later. These are useful to look through. But, I don't want to open in VS Code. VS

Code is an IDE, a integrated development environment for coders, basically. We don't need to use that. So, I'm going to

say no to that. And now we're back to our initial prompt. That's done. So, in fact, if we

now go to the finder, go to our home folder, we can see I've got a new my Remotion Projects folder.

And if I look in it, these are all the components of this application. All set up in here. You don't really

need to deal with any of these. You could always read the read me that explains a little bit about it.

But, we're going to use Cloud Code to do everything else. This public folder is super useful. It's empty by default, but

if you have any graphics that you want included, or USDZ files, or video, you can put them in the public folder and

then tell Cloud Code to include them in your composition. So, just good to know about.

All right. Now that that's done, we will go to step three,

which is to install Claude desktop. Now again, you could use Gemini, you could use

Open [snorts] AI, different platforms to do this. I like uh Anthropic's Claude, and I like to use the desktop

application instead of controlling it through terminal. You could actually launch Claude directly in a separate

terminal window and use it there. But I think it's a little easier, especially for folks that are new to this, to use

the desktop app. So, what we're going to do is go to claude.com/download. And here's where you can download it for

Mac OS. And by the way, this is talking about co-work. Don't worry about that. I'm going to explain that in just a

minute. This is what just gets you the application that you can run on your desktop. So, you click for Mac OS, uh

and then it would download it, and it's downloading it here, but I don't really need it cuz I already have it. So, you

download that DMG and install it, and what you're going to get when you install it

looks like this. Let's actually create a new session. It'll look like this. And it probably it'll look like this when

you first launch it. It'll be over in a chat window. And you won't have any chats. I've got a bunch of chats here.

The desktop app has these three modes: chat, which you probably recognize from anything else like ChatGPT, where you

can just chat interactively with it. Co-work is a super cool mode for accessing Claude code. It lets you do

all kind of things in terms of organizing files and things. We're not doing that right now. And then there's

code. Now, you do need to sign up for a subscription to use Claude code. And if all you want to do is you use

your motion, you might not want to do that. I'm using the $20 a month basic subscription, but I'm using Claude code

to do a lot of other things, and I highly recommend that you play with it and learn other things you can do,

especially starting co-work. So, this is only something to do if you find there's broader value to you to using

Cloud Code beyond using Remotion. Unless like, "Hey, for $20 a month, I can make all these motion graphics. I don't need

to learn motion [laughter] anymore." You know, go for it. So, the key thing here is that we're in the code section.

We have We're in a new session. And I'm going to change this folder to be the folder that we just

created, okay? So, Mark Spencer, my Remotion Projects open. So, that's important because we're

working inside a specific folder. Now, we should pretty much be done. Let's see how it goes. I had set this up

earlier in my folder. I know it works. I had to install dependencies, but I think Claude should be able to do it for

us. So, what we're going to just say is, "Can you create for me a simple Remotion composition called my first test that

includes an animated title?" Something like that just to make sure the thing works. Oh, and by the way, you

can choose what model to use. And Opus is the the strongest, most powerful model.

But if you're using it a lot, you might find that you you run out of your daily limit. Cuz even though you're paying $20

a month, there's a certain limit to how many tokens you can use. Sonnet 4.6 which was just introduced is

super efficient and useful and I find it works just fine for this and you get more.

So, it's going to ask to trust the workspace. I'm going to say yes. And then it's probably going to think

now. It needs to read that skill. I don't know if you just saw that. It It showed If we scroll back up, it's Let me

read the relevant rules. And it's going through and looking at all these markdown files.

And it's going to ask for permission to read those markdown files. These are all part of the Remotion best practice as

you can see right there, the skill. So, I'm going to press command return to accept all those.

And now it's looking at the project structure, trying to figure out what's going on. You can see it's creating a

component. Composition complete. And it says it's done.

Great. So, it says you can preview it with this command. This basically means run this command in

the terminal, but let's see if it'll run it for me. Can you start Remotion Studio for me?

Because Claude can also run your terminal. And now it's asking permission to do so. I'll say allow once.

And I've got to allow it again. And allow. It would have been faster just to type this into terminal

ourselves, but I wanted to see if it could do it because once it's set up and knows it can access terminal, it'll be

generally do this faster than you could yourself and it'll also figure out if something's not working right, it'll

figure out what to do about it. And it looks like the project dependencies haven't been installed yet.

Okay. So, this is what I mentioned earlier about installing the dependencies.

And you could do it through a quick terminal command, just run NP NPM install, but we're just going to let

Claude code do it for us. Allow again. Dependencies are additional programs that it needs in order to run.

So, there, it switched by itself. I didn't do that. It switched by itself over to Remotion.

And let's play my first test. There we go. All right, we're in

business. Fantastic. So, now You just I'm command tabbing, switching between Claude and

Remotion, and now we can create a new composition, adjust this composition. If we want to add graphics, we can drop

them in the folder, etc. So, it created this new localhost to run this, and you can see we have a brand new set of

projects here. If I go back to my own that happens to be running in Chrome, you can see my list of projects. And

just to show you again, when I made this animation, this is what was very exciting to me is I literally just went

to chat GPT and said, "Make me these three icons." I dropped them in that public folder,

and I described what I wanted in a short paragraph, just talking to it. And it pretty much got the whole thing out the

gate. I needed to adjust the scale a little bit, move things up and down a little bit. And it's not interactive. In

other words, I can't just drag on things like you can in Motion to quickly reposition and rescale things. You need

to talk to to do that. However, if we look at, say, this lower third, maybe, you can set up

this schema. If it's empty by default, you can just say to create it. And here, I can change the text here to be

um John Doe or whatever, and change the other text. So, actually, I do have

basically like an inspector here where I can change the text and change the color without needing to go to Claude Code and

say, "Hey, just change this little thing." So, you do have the ability basically to publish parameters and then

change them. I wanted to come back and make sure I told you about these couple of resources that I mentioned that

showed up in terminal when we installed the Remotion project. So, if you go to remotion.dev

uh in docs AI Claude Code, this particular URL will talk to you specifically about prompting videos with

Claude Code, and basically explains the install process that we went through. However, this install process just stays

within the terminal the whole time, and uses Claude Code within the terminal. So, it's a little bit different process,

but I wanted to point that out. And also, if you go under resources, there's a ton of great stuff here for learning

how to use Remotion, uh different things, different projects you can play with to get going. And uh a

showcase of different projects. We've really just I hate to say scratch the surface. I think we did scratch the

surface, but you can do much, much more. And if you look at the showcase, you'll get some ideas about some other types of

projects that you can make with Remotion. So, make sure to check those out. So, that's my

quick explanation of where I am with using Remotion as an alternative way to create motion graphics versus Motion.

And I think it's an interesting compliment. A little bit of setup, a little bit quirky, but

man, pretty amazing. Let me know what you think in the comments below.