One of the reasons why I think Codex is better than Cloud Code is because of their built in plugins.
And one of the coolest built in plugins that they have, in my opinion, is the Remotion
plugin.
Directly inside Codex, OpenAI's new super app, you can generate motion graphic videos.
Not only this, but you can actually use their new image model to create assets
and then put them in your videos that you can create
simply by typing. In this video, I'm gonna show you exactly how to create motion graphic videos with Remotion
inside Codecs, and I'm gonna show you how to set up your project so that you can create high quality brand assets. I'm gonna show you how to create images and SVGs that you can place into your videos, and if have you a ChatGPT subscription,
you have access to Codecs,
and you can get started right away. And if you like videos like these, I make them multiple times per week, so make sure to hit that like and subscribe button. Let's not waste any more time. Let's dive into the video.
Okay. So this right here is codecs,
and this right here is Remotion.
This is where I typed my prompt, and this is where the video showed up. This was a result of a couple of prompts.
So
let's first talk about what is Codex. And so all Codex is is OpenAI's
super app. And in my opinion, it is the best way, especially if you're not fully technical,
to control Codex 5.4,
the best general agent in the world, in my opinion, especially at really hard complex tasks,
which I'm doing more and more frequently, and I think it is the best interface for AI agents.
It is OpenAI's
version of ClaudeCode's
desktop app. ClaudeCode's
desktop app has Claude Code in it now. In my opinion, it is much worse than OpenAI Codecs.
Claude Code also decided to have a distinction between code and co work. In codex,
they're combined together. So if you ask for a work based task like a spreadsheet document or a presentation, you have to do that in co work for it to create the right artifact, but code is specifically for coding. In codex, you can just ask codex
for a presentation. Right? You can just ask Codecs for a doc. It'll give it to you and you can open it up here on the side. The same way you can also open a
video here on the side and you can create websites here on the side and you can basically do anything or create anything that you might wanna create on a computer inside Codecs.
And so that brings us to the question, what is Remotion? And so Remotion is simply a way to create motion graphic videos
with code. And I don't know if you've heard,
but AI writes code pretty well. So all you have to do is type words in English, AI writes the code, and the video will
render. Remotion is a plugin. Right? You can see all the plugins up here. I type whatever I want in the video here, which is into codecs using the model g b t 5.4
extra high.
It generates some code and then it renders right here. And I can click this to export my video. So why would you use Remotion instead of just using After Effects or Premiere or some other template software?
Well, it's just a difference of preference. One is a prompt interface, one is a manual interface that takes a long time to learn.
And it depends on what you're working on. And also AI is getting better over time. Right? As AI gets better, it'll get a lot easier to do a prompt interface. Right now, if you're an expert, I still recommend using After Effects or other animation software.
But one really good example of when it is super useful to use Remotion
is when Claude
actually used Remotion to create like 20 launch videos in the span of one month. And so Claude has been releasing these videos right here. When they first launching these types of videos, these were all created with Remotion. You can create these little animations here with Remotion,
and they got over 300,000,000
views over the course of a month just releasing these Remotion videos for all of their feature launches,
and they literally were releasing one every single day. So Remotion just allows you to create videos really quickly, and you can do this in Claude Code or you can do it in Codecs like we're doing today. Okay. So earlier I mentioned that you can very easily download the Remotion skill or the Remotion plugin.
How do you set this up? Well, I'll show you right now. And if you get confused by any of this at all, I created a codex video. This is a one hour and forty minute video that covers everything,
uh, inside codex,
but I think you'll pick it up pretty quickly in this video. So what we're gonna do here is we're gonna go up to create a new project inside Codecs,
and this is because we might create a ton of videos and we want this organized in a folder.
And we wanna be able to create many chats within this folder, and that's why you create projects. So we're gonna go ahead and create a new project, and we're actually gonna create this in the desktop folder.
We're create new folder, and now we're gonna say Remotion
project,
and then we're just gonna press open. And then you'll see your project start over here. So what we can do is we can press this create a new chat, and you can literally go to Google, type in download codecs, and you can download it directly to your computer. You what you can do here is you can go up to plugins and then you're just gonna go to plugins
and what you're gonna do is you're gonna type in Remotion.
And then you're gonna download this and you're gonna be good to go. It's gonna say, you sure you wanna download? You're gonna hit yes and you're ready to use Remotion. Now once you create a new chat, let's go ahead and test this with something very,
very simple.
I want you to create
a, and then you can press at Remotion
video,
And this should just say
hello
world
in black text
on a white background. Right? Let's get this up and running and then we can start, uh, making really complex videos. Boom. And so just like Claude Code, the AI agent is going to work, and once it's done, it'll run it locally and then you'll be able to open it up here in this side browser.
Before anything gets run, this kind of opens up in this summary and you can see the prod the progress, you can see the artifacts,
and you can see the sources. So this worked for about two minutes and we got this response here. And what you're looking for is this local host link. This is running it locally on your computer.
And if you click on this, boom.
The Remotion plugin automatically opens up, and you can almost think of this Remotion plugin as like a mini app that's running on your computer, and whatever you type here gets updated here. All we ask for is a hello world,
and this is what we got. We can hit play and nothing happens. Literally just loops saying hello world. We can say, please
make the hello
world
jiggle and make it say
hello
comma from Riley. I promise we're gonna do more exciting stuff. I think it's important to be boring at the beginning just to give you a little taste. Okay. Hello, world. There's a reason why when you start coding that you start with a hello, world project. You just gotta make something exist, and then you can make the things better. You can let your imagination go after you understand the fundamentals. And while that was loading, uh, for fifty one seconds, I closed the sidebar just to show you that if you the sidebar ever gets closed and you can just click on this. There you go. We have the change. It says, hello from Riley, and it now jiggles.
Okay. Now what I wanna do is I wanna do
some basic vocabulary.
And what I wanna talk about right here is I wanna talk about this right here. So this right here is a composition.
We have now created one composition,
which is this hello world composition,
and we can ask for it, uh, another composition.
And so what I'm gonna do, I'm going to say, please create
another composition
that has the Codex
logo and the Remotion
logo. And what I'm gonna do is I'm actually going to find
the logos on the Internet. Okay. So I just downloaded them off Google images. This is the Remotion logo. This is the Codex logo. Now what I'm going to do is I'm gonna go to our Remotion project and we can just hit open in finder.
So now we see that the project folder is open. It is at desktop Remotion project which matches Remotion project.
And you can see here that the agent has created this folder called hello world video. So So now what we wanna do is we just wanna drag those two images into this folder and they are called codex dot png and remotion dot png. So now we can at mention
remotion.
And you can see here remotion png shows up at codex PNG.
There we go.
Please put these on the screen,
dark gray
background
with text
in instrument
sans,
instrument serif
font,
uh, with text that says
AI powered
video motion graphics.
Then add a little animation
beam
that connects
them. So we can run this. And what it should do is it should add a new composition that'll show up right here,
and then the timeline
will be different. And I'll show you how to create more scenes in the timeline in just a second. Okay. So it is still thinking and still working, but you can see here it added AI motion graphics. Check this out. Watch what happens when I click. Boom. Now we see some stuff show up here. I'll explain this once it's done generating.
Okay. So it is done, and let's take a look at this. Look at this. This is pretty cool.
Right? We have these two logos sending a beam to each other, and so this is kind of like there you're kind of connecting them. Now let me show you how we can quickly make changes. But the first thing that I wanna do is I can see that it actually rendered the video. If I click on this, it actually shows the full rendered video,
but we don't need to do this every time. I'll say, I'll tell you
when to render,
uh, from here on out. We don't need to
we are gonna be making a lot of different changes. So we can run that prompt. Don't do anything for now. So now what I wanna do is I wanna talk about vocab for a little bit. I will take a screenshot of this.
So this right here is the timeline
and this is a scene
inside your timeline.
And, of course, you can hit play
and do all of the normal things, and here's where you render. Notice here that the AI can just decide when to render it and send me an m p four, but you can also render it yourself by pressing this button right here. And you can actually decide the settings on how you want to render it. If it's the same as if you were exporting it on Premiere Pro or CapCut.
Additionally,
we have something up here called assets.
And so I'm gonna click on this assets folder, and I believe that the two assets are gonna be one and two. Right? These are PNGs,
which are assets, which are different than code. Everything else is code. Right? This laser beam is code, this text is code, and the background is code. The assets are gonna be the little assets that you add to your app. And in this case, we added these PNGs with no background, which the AI added to the scene. And so we can verify this if we click on assets. There you go. We see codecs
and motion. If we go back to compositions
and click on this, we are back. Now what we can say is,
please,
can you get rid of this line?
I don't like it. Now notice how it's like, okay, what line, like, am I talking about? In in this case, it would probably get it, but I love to be overly prescriptive. It just saves me a lot time in the long run. And this is also because I use CleanShot Pro. It's super easy to just, like, take a screenshot, open this up, and I can very easily just, like, label the line. And I can just paste it in, and the AI will see that I'm literally pointing at this line right here. Please make the scene last two seconds
longer.
Then when it's done,
please have
the logos
animate off the screen to their, uh, respective side. So the Codex logo should disappear left, the Remotion logo should disappear right, and then I want the text to slide down to the center of the screen and then animate into
full guide.
And so I'm gonna add quotes here after full guide,
and now we're gonna run this prompt. So this one's a little bit longer of a prompt. And again, we're running this. We're using codecs. We're using GPT 5.4.
Reasoning effort extra high. It is the best right now in my opinion. Okay. It's done. It worked for about a minute and two seconds. And by the way, this is going a little bit slower or faster because I'm using the fast mode. It is twice as expensive, but I spend a lot on AI and this is something I'm perfectly willing to spend money on. So what I can do is I can test this. Let's take a look. So here the beam is gone.
Okay. So here, this is a good guide. This came down,
and then full guide came on here.
And so you'll notice here there's
actually 30 frames per second. So right now we're at four seconds exactly.
And these are not, you know, decimal points. These are frames,
this part right here. And so we can actually reference a specific frame. So this is like at four seventeen.
I can I can say four seventeen?
At this frame when AI powered motion graphics turns to full guide, was hoping the text would literally change
from AI powered motion graphics
to full guide as if it was being like backspaced and then retyped,
not like having it fade out and then the other one fade in. Find a way to like maybe reorder the letters into it and use your best judgment and find the best animation for this. Also, just wanted the line
between the two logos to disappear. I like the little ball that was being shot from the Codex logo to the Remotion logo, so please re add that.
And remember, if you hit command enter,
this will steer it into the conversation. This does not mean queue it up for once it's done with this. It steers it, so it basically adds this to the current session.
And so now it's gonna do both of these things in one swoop or, you know, one edit. Alright. After two minutes, it is done. Let's give it a look here. Let's see. So now we have a little ball going across.
Dude, let's go. And now we can say hold
the
full guide
for another
two
seconds.
Gonna run that. I want it to hold this at the end for two seconds longer. It ends too early. Okay. So it's done. Let's just skip right here to the end. Let's see. So it goes from here
to here, backspace,
full guide. Bang. So we just created that. In a couple of prompts, we created this motion graphics video.
And, yeah, so you're starting to get the hang of it. Let's dive into some other cool stuff here. Okay. So I wanna talk a little bit about organization
and how to create consistent assets. So I wanna show you here that you can see here that this shot right here. So this I have this, like, cool animation in the background that you can actually see by going up to brand assets, and we can actually find it right here. So we have this background
cool animation. Remember, this is just code. This is called the Lysogis figure, fun fact, and we're using this for a brand asset and we're also I also created
this background gradient.
And so I created this composition called brand assets,
and here we have all the logos that we might want to use. We have, uh, a dark gray gradient, a blue gradient, a gray figure, a blue figure, a red figure, a green figure,
and then we have some other cool, uh, types of things that I might want to use. And what this allows me to do is just ask the agent for specific things. And you can see here that this is called a red figure.
Right? So if we go to red figure right here, we can very easily just ask the agent for a red figure. I can say, hey, there's a red figure in brand assets. Just use that. And so then we can create new videos that all have the same background.
And so since we have an iPhone mock up, I was able to ask the agent, hey, can you create another iPhone mock up for this part?
And one thing we'll get to later, you notice here there's this green thing, you can ask the agent to add music. And so here, you can see that there's music,
and we'll talk about that in just a second. One thing that you can also do is you can actually open up this full screen mode, which I actually do really like. And you can even close this side panel so it's literally full screen.
And so now we can actually really we can start to add more scenes to this.
So we have full guide.
And now,
um, I'm gonna outline the steps really quick. Okay. So I just typed out my prompt, and I wanna break it down real quick. Firstly, I included one screenshot, which is just the Codex user interface, and this is just a reference to the agent. I'm gonna screenshot this because I'm gonna do an in-depth analysis of this prompt real quick. So what I'm doing here is I'm basically saying I want to create
new scenes after this. So I wanna create new scenes, and here I put scene one, scene two,
and scene three. And then I also said maintain the background throughout. And then I said, uh, type in a codecs input. So we're gonna type into the codecs input. And then I said, it's in the image. Don't use the image I gave you. Simply use it as reference. Right? This image is referenced in this part of the prompt.
And then I said, this text
should be typed in. Right? Create a launch video for Remotion and Codex integration.
So we're basically creating the video that we're creating now. So it's kind of meta.
And then show the Codex logo in scene two and then a loading animation. And then in scene three, it should show
the video rendered
of what we created so far. And so basically, it's going to take the video that we're making, put it on a TV in the final scene, and show that it's rendered, if that makes sense. So I'm gonna go ahead and enter this prompt here. Okay. So I entered the prompt, and you can see here, we can actually toggle this on and we can see what the AI is saying. And again, we can always toggle back and we can see the exact prompt that we used right here.
And in this full screen view, we can only see what the AI is responding, but this allows us to kind of fully immerse ourselves
into whatever it is that we're creating. And while that's loading, I'm actually gonna go to suno.ai.
And what I can do here is I'm just going to type in relaxing
funk launch
video
instrumental
and we can hit create
and we can actually, yeah, change this to instrumental.
Alright. That's not bad.
I like this one.
Okay. So we can just click on download. We'll download the m p three file.
Now I'm gonna go back to Codecs.
And what I can do here, I'm gonna open up this project folder. And so here we see this song
slow funk lift. I can drag this into
this folder right here. And now what I can do is I can say at
slow
funk lift,
please
add this song
at 75%
volume
throughout
the whole
thing. And now it's gonna add that really quickly. And then we can see how it did. And you can see here it added one, two, and three sequences.
Sorry. These aren't scenes. These right here are called sequences,
and we'll take a look at this. This actually doesn't look too bad. You can see here that it added this, like, green line right here. So we can see that the, uh, slow funk song is actually in our app or or in our video. We'll take a look at it right when it's done. Okay. So everything's done. Let's take a look at this. I'm gonna go full screen for this. Let's take a look here. We can lower this. Let's see.
Oh,
let's go.
Oh, there you go.
So literally, it put the video that we made, it exported it, and then put it in here.
This is actually awesome. Let's add a few more scenes. I'm gonna add four more scenes real quick. I'm gonna type in my prompt. I'm gonna take a few minutes to think about it. Okay. Remember, keep the, uh, background consistent throughout the rest. Remove the glows,
like the the background, like, glowing behind the, uh,
TV. I actually don't like that. Or, like, reduce it to barely
anything, and then keep the background the same throughout the rest. The first thing I wanna show is a scene that shows social media platforms.
Maybe show three different social media platforms
and then show that we're getting a ton of likes,
like hearts. Oh, and then, uh, yeah. Show that, and then show quick pan to another scene where it shows revenue increasing, then switch to another scene where it shows views going from zero to 1,000,000,
And then say the last scene, scene four that I want you to add is like show the Remotion and Codex logo again
and then have the text on it say, uh, launch your video today.
And then what I want is for the final scene, scene five, for the logos to fly out again and then put OpenAI
Codecs.
Just those that text at the center of the screen to finalize it. That's the final sit part. It's a long prompt. We'll go ahead and enter that in. Okay. It's done. Let's give this a try.
So let's see.
Let's see.
Okay. This is pretty good. Pretty good so far. Remove the background gradient that looked kinda ugly. I like it. Let's
go.
This is a fire shot here.
Look at this.
There we go. We don't have the the, uh, the correct icons for TikTok,
and YouTube. We need to get that, but I'll add that in just a second. Okay.
Not bad. We can change this. So I'm just gonna start
going like this. I'm just gonna literally,
uh, circle this right here.
Um, I'm just gonna say please
get rid of this little
arrow
as shown
here.
Just make it the line,
make the line green.
And then I'm gonna say also
I want the actual
icons
used.
And so I just grabbed the logos off the internet. We're gonna drag them into the Remotion project once again.
And, um, I can put YouTube.
YouTube.
There we go. And at. Okay.
Uh, please use
these logos.
Okay. While that's running, it looks like this was fixed. This looks a lot better. So the logos should be replaced here. Let's check out the rest.
Nice.
Launch your video today.
Okay. So here, I wanna combine these.
So right now on the second to last sequence, it says launch your video today, and then it switches to a new sequence.
Right? Switches to a new sequence that like has them stop jiggling.
So in this new sequence, it like changes
the icon like the icon stay the same, but it, has them reappear
and then they are not jiggling. Instead, I want it to just be the second to last scene, should be the last scene.
And then they should be jiggling, and then they should fly off the screen.
And then the text that says launch your video today should fly off the screen at the same time. And then the OpenAI Codex text should appear exactly as it does. So then it will be a lot smoother. Okay. We'll fling that one in there as well and it's still working but look at this. Here we go. We can see Twitter. I know Twitter is no longer in existence. It's, uh, x now but we're just doing this for fun. I mean this is coming together pretty well. I mean we're creating this video pretty quickly.
Okay. It's done. Let's check out this last part. So it's right after this scene right here.
Oh.
I mean, come on. Let's go. And then now to export the video, we just hit render.
Um, uh, I just do it the h dot two six four. And, yeah, let's just render this video.
And we can see here that this is rendering the video right here. And this means actually turning into a video that you can export and you can upload onto
Twitter or something. And what we can do here is we can see this right here. And now once we're done, we could very easily just drag this up into Twitter and we could launch our launch video. And look at that. We have our launch video just like that.
Anyway, we covered a lot in this video. We dove into Codex. We covered adding images and different assets to our video. We generated a song, added it to the video, and I think it came out really well for, you know, seven to eight prompts.
If we spent another, like, three hours on this, I'm sure we could have made it just absolutely
insanely good. But I think this is pretty solid for the sake of this video. I hope you learned how to create engaging content for social media, and these really do well on Twitter. But thank you guys for watching. I'll see you here in the next video. Peace.
Hi.