Remotion Skill — Everything You Need to Know

So, there is this super cool tool that allows me to take this static Figma design and turn it into an animated video. This is a video that I can export and put it on social media, use it for whatever use case I I have. This is for general motion design use cases. And you do all of this with just prompting with AI. And this is where we will get into the depth of it. So before we go too much into the depth, I want to show also what you have done. So show us what you have. This is also super cool. I really like the design. And the important note here is you did all of this without having a design to start with without any Figma just from scratch. Cool. So all of this is done with Remotion. Do you want to take us through Remotion? Yeah. So, Remotion is a application, let's call it, that you run in your your browser and it enables you to take code and animate it and export it to a video. So, as an example, the one the uh the thing that you see on the screen right now, this is just a website. It's all just HTML. I wanted to I want to add this to one of my videos on YouTube. I want to add this little motion graphic and and I was able to animate it in Remotion. It turns your React website into animation. You can animate different components. You can move it and all the rest of it. Create real MP4 videos with React. Basically takes layers and then these layers can be animated and as as we showed it. And as you see here on the screen, we have a timeline. So all of this is happening inside of my browser. And we have a timeline. And by the way, as I mentioned here, we have I had this initial design. The final design is not exactly that I can play around with it and that's the whole point of it. I could do it manually but now we can do it with skills. This is what how I have done it and you too right. Mhm. Yeah. Yeah. So I I mean you can ask claude code to animate this. You can you can add this into you you add your project into the reotion. However, what we're here to what's getting a lot of buzz right now is that Remotion have released a skill that you can install in Clawude Code or you can install it in cursor, whatever whatever tool you're using that gives the AI guidance on how it should use Remotion. So you get a much more consistent um result because the skill is a set of best practices of how to animate in remotion, which is really cool. So you're going to get a better result if you use the skill. This is what I also did. So I saw I saw it on Twitter and then I um I asked Claude, "How can I add this essentially because I don't I didn't even know how to where to start it." Um, and then I mentioned this before the show that I gave it a screenshot from Figma and then the code like the entire CSS which I knew it's not the best way but I didn't know a better way of doing it. But you mentioned I could just use the the MCP from Figma. I completely forgot about it. I did it didn't even cross my mind. So I think that would have been much better. I don't know how to do this yet. Uh I will do it afterwards because I played like 20 minutes with this less actually. Just a few prompts. I want to add the actual images because these are not this is not loading the images from Figma or anything. I don't know if I have to do it manually or if it can get them from the Figma MCP, but anyway, I have to find a way to export these images and put them there. For the initial animation, I didn't tell it what to animate or how to animate it. I just said this frame animate it. That that's it. Like a very generic dumb prompt. Um, and then it it animated these from bottom to top and then I said, "No, I don't like that. Animate them from like left to right and right to left," which which it did. So, yeah. Yeah. Mine mine was a much more specific prompt. I knew exactly what I wanted to do. So, I told it how I wanted to animate it. And then once again with that skill it applies what I've asked of it and use the skill to understand some nuances that remotion requires to get the best out of it. Right. So yeah my my so to improve your thing here I would take the JPEG I would put it in because here's the thing remotion um you you you have it running on your machine and you create all of your projects. You could actually this is just one workflow. create all your scenes that you want to animate in that one project. So, let's say, for example, this is your portfolio. You could have a portfolio project and you create all your scenes and then you can hit that render button down the bottom right there uh and it'll export it as an MP4. Really, really cool. Really cool. Yeah. So, you could you could take one of those images that you've got in Figma now, put it into the into the folder structure. So, actually, maybe we can do it right now, right? Uh where is that by the I don't I can't I'm not sure where where you installed this. So this this is where you need to know where you installed it. So you need to find where that folder is. You put that image in the folder and in Claude code you'd say put this image in the first cell of the squares and Claude code will figure it out. Probably won't even use the skill. Probably won't even use the skill. It just read the code. It'll know to import the the image into that React component because it's all React. It's all done with React. And then you'll have that image in there. So it's all done through React. Um again just to just to exemplify the skill is the thing that just gives it guidance and helps it in using remotion. So I hope that's clear for everyone. I think there was I think we were careful to not to to introduce you to the varying different layers of this um tool without overwhelming you. The output inevitably is just an MP4. So, if you have any use for an MP4, I'm going to be using this for my YouTube videos. I wish this was out last week because I needed a well, you'll see in one of my videos that I had an explanation or I have an explanation of what plugins are in Clawude Code and I wanted to show that you could have multiple plugins within a marketplace and then plugins can have skills and blah blah blah. I could have just made it in Figma and told Remotion to do it and then export it as an MP4. Bring the MP4 into to to Final Cut. Jobs are good. So, um, so yeah, that's Remotion. Really exciting, really cool. Um, but this comes off the back of the next article we're going to go through or next topic we're going to talk about, which is something from Versel. This is part of a larger conversation on my show, Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web.