Free App Hidden Gem: Remotion Video / Motion Graphics Generator!

Hey everybody, it's Lon Cy and it is time for another free app hidden gem video. I found another really useful tool that is making my life a lot easier and I wanted to share it with you. So by way of background I'm on my local school board and every year I have to do a budget presentation to the town as to what our schools are going to cost for the year. And I like to make charts and I make charts in Apple's Keynote and that usually looks okay. But there's often times things that I want to do as an animation that I can't easily execute in Keynote or in PowerPoint. And I found this great tool called Remotion the other day. It is free. And when you connect it up with Claude or Gemini or Chat GPT, you can prompt it to create some pretty compelling charts like this one here without a lot of effort. You just give it the data, you tell it what you're looking for, and then it generates it. And then, of course, you can iterate on what it generated afterward. And although this might not look all that interesting to you, in the presentation that I did the other night, people found it to be a very good way to visualize some of the concepts that I was talking about in so far as how cost share is shifting between the three towns that share this school. And in this video, what I thought I would do is show you the workflow for Remotion because not only can it do charts for your presentations, it can also generate videos like looping backgrounds and other types of motion graphics that you might want to do. It is very powerful and it works with Claude, with Gemini, and with Open AI's Codeex application, which is what we're going to demo here. I've tested all three platforms. They all work in a very similar fashion. They all have different ways they connect to Remotion, and I found that codecs from OpenAI is the easiest of the three at the moment to connect it up to Remotion and generate what you just saw here. So, we're going to generate this again using OpenAI's codeex and we'll also do another example as we get a little bit further into the video here. Now, I do want to let you know in the interest of full disclosure that OpenAI did reach out to me the other day and provided me with some credits to try out Codeex because I had done some stuff with co with Claude and Gemini over the last couple of weeks and they wanted to have me try out Codeex. So, we're going to use those credits here. However, no other compensation was received. All of the opinions you're about to hear are my own and I don't have a course or anything else to sell you. I'm just finding tools that work for me and I like to share how I am using them with you. So, let's get into it now and see what this Remotion thing is all about.

Now, you can find Remotion over at remotion. dev if you want to learn more about it. In every case that I've used it, I just have the AI agent install it for me. And what you're doing here is creating videos programmatically. So, of course, you could handcode these animations if you wanted to. Uh, this is using React and it can output MP4 videos or generate just animations that you might use on a website. They've got a whole bunch of use cases here that you can explore on their website. As I mentioned, it is free if you are an individual or a company with less than three people. If you are using it in a company, they do have some licensing terms that you have to use if you plan on making content for publication. But if you are a single operator like me or working for a nonprofit, you can work on the free license. Now, the way you get it to work will depend on what tool that you're using. So, what I'm going to do again is pull up Codeex, which is the Open AI coding application. And what I'm going to do first here is just set up a new project. I'm going to click on add new project here. I'm going to use an existing folder and I set up a folder in my downloads here called remotion test. In that folder, I have a CSV file that has some data very similar to what we just looked at in my example file. And that's it at the moment. Now, what I'm also going to do inside of codeex is go over to plugins. And this is where this gets super easy. If I search for plugins here and just type in remotion, you can see they have a plugin already. So, I'm going to install that. And what will happen now is Remotion will be available for all of these different projects that I am working on. So, that is pretty much it from an installation standpoint. You just point Codex at the plugin and it's ready to go. It's going to bring in all of the necessary dependencies once it gets working. Also of note, this works on Windows just as well as it does on the Mac here along with Linux. So, the process here is identical across platforms using codecs. So, now that we've got that going, what we're going to do is go over to our Remotion project. I'm going to start a new chat. You will notice that I am selecting the highest end model that I have access to, which is GPT 5. 5 extra high for its intelligence level. And the reason why I'm doing this is because in my experience with Remotion, typically the lower-end models don't do as well getting what you're looking for on the first shot. The more intelligent models seem to work much better to get you a very good output on the first goaround and also the higherend models tend to make things look nicer too. So although you'll burn your credits a lot faster, I think you're going to get to what you're looking for faster as well. So now we

need to get this thing going. So, I'm going to say in my prompt here, create an animated pie chart uh using and then I'm going to hit the at symbol and then select reotion here to point it at the plugin. And that is how you can get these plugins activated inside of your project. Just point the prompt at it and you're good to go. Next, we're going to say and grab data from. And then I've got a file in the directory that we're starting from here called ADM average percentages. So, just like the plugin, if I put the at sign up here and type in the first part of that file, it will find it in the folder. And now we've got ourselves a plugin and the source data to get started with. I'm going to bang out the rest of this prompt here. I'll show you what it looks like and then we'll see what gets generated. All

right, so here is my final prompt. We'll see how well this does. I am not a master prompt engineer, but I described what I'm looking for. I really want that animation to depict the share of cost changing and moving over time. So let's hope that it can come up with that. And I also told it I want to keep a running tally of the net cost share shift over time. So why don't we go ahead and execute this now and it will get started. Now, one thing that I forgot to do before I started this thing off uh was turn off the safety controls because what it will do is prompt me now every time it needs to write to the folder that it's going to be operating in. So, what you're going to see as this executes are files and things getting downloaded into this folder. It will largely stay in this folder for uh what it's doing here. But, as you can see right now, it's setting itself up to get everything operating. And this will likely take a while, especially if you're using one of the higher intelligence models. So, I'm going to let this run its course here, and I'll show you what it looks like when we get close to our first output. All right, it is still going here. And what's interesting is that what it will do is generate some preview frames so it can see its work because obviously it's generating this programmatically, but Codeex is then generating a frame, looking at it, and determining how well this will work or not. So, I'm sure it'll continue iterating here as it is doing its thing, but it's just fun to watch this thing do its work. Again, it will take a while, uh, especially on the first run, but the output is usually pretty good when it finishes up. So, let's let this keep going, and I'll show you what it looks like when it's done.

All right, so it is now done, at least with the first iteration of what we're looking for here. As you can see, a lot of files ended up in its folder that it generated. And one of those files is an MP4 file that gives us the completed animation. And for a first shot here, I think it did a pretty nice job. So, it looks a little different than the one that Gemini made for me earlier, but of course, that was the result of a number of iterations. And now we've got this thing running. One thing I'm noticing with it is that it is pausing after each fiscal year. And I really want to show this thing moving more dynamically and not stopping. So, what I'm going to do is go back to codeex here and give it some feedback on its first iteration. One other thing that it does because this is a web-based platform, Remotion, is it spins up the application that will run inside of your browser. So, I can actually watch it uh running here on uh the code that it generated. And now that this is spun up, when we make future changes, you'll be able to see those changes reflected on here. So, for example, I'm going to ask it first, um, please change the PP in the totals to percent. And I'm going to hit enter. And what you'll see here, it should be able to make this change pretty quickly is that these PPS will change here in real time as we work on it. And that's one of the cool things about this is that you can let this thing loop and as the code is changed programmatically, uh, the video will update at the same time in real time here. So I can let it run. And what you'll see here is as it's thinking it will go ahead and change those PPS to percentages. So it looks like it's about to edit that. And there it goes. So it's already been implemented. Now once the first round of this finishes executing here, we're going to ask it to make this much more smoother. So it looks like it got that change done for us. It's confirming that it did that. Again, it rendered a frame to confirm because it can't actually see what we see right here. Um, so now that that's done, I'm going to let this thing finish thinking and then we'll have it smooth out the animation next. So, in between takes, I also asked it to stop the pauses after every iteration here and have it run over 25 seconds. And that seemed to have fixed things, but I'm noticing it's not as impactful as I would like because it is taking a while to get from one end to the other. So, I'm gonna say let's shorten it to 15 seconds and knock 10 seconds off of the runtime here. And now it will start thinking about that. And what you'll see is the project shorten in length right before our eyes here once it starts executing that. And that way the animation will run faster and I think you'll be able to see the changes uh better here. So there you can see it already reassigning the time frame here and uh now it is moving that chart in a way that I think is more visible. So these are the sorts of iterative changes you can make and again you can watch the results here in real time as it goes. Pretty cool stuff. So now that I have

this kind of where I want it to be, let's have it spin up a different iteration of it maybe in dark mode. So I'm going to ask it to make a new version that runs in dark mode with some glow on the chart. spin up a new project file for this request. I'm going to implement that. And what it should do here is create now a second project file. And that second project file will be in dark mode. So it'll copy over what it coded for this and then change the coloring scheme. So here it goes. It's starting to read the skills to figure out what it needs to do for creating a new project file uh within the same installation here. And as it chews on it, we should see that second file pop up and presumably we'll see a dark mode version. I'm going to maybe skip ahead here as it is thinking and come back when it's moving further along. All right, it took it a little bit of time, but it did figure it out. And now you can see that we have a second file here. And if we jump over, you can see what it looks like. Now, the glow is a bit on the glowy side at the moment, but I think what'll happen here is that now that it's taken its screenshot, it'll see that the bloom on that ADM is a little too much. And so, hopefully it'll tone that down a bit, but of course, we can always instruct it to do so. So, there you go. You've got your dark mode version. It still needs a little bit of tweaking, which we can do later with some more commands. Here is the light mode version that is also running. And that is how it's done. Now, one thing

that I love about Remotion is that you have a lot of options for rendering out video. So, if we go over to file and render here, just in its web interface, we have a lot of options for different video codecs that we can output. This uses FFmpeg to make its videos. In fact, you can even output it as ProRes. And what you can do is create graphics for video production with transparent backgrounds. You can output the ProRes with the backgrounds removed and get yourself lower thirds and other graphics that you can generate programmatically using Remotion. I've got a great video that I'll put in the video description from Ripple Training where he demos some of the use cases that you can do with Final Cut Pro, for example. But it's really cool just to see all of the stuff that you can do. You can set the bit rate on the video. You've got a lot of options here for generating what you need when you're done with your project. Why don't we take a look at one more

thing and then we'll close this out. All right, this next project I had it do involved making a looping background for my YouTube channel. Now, this still needs a little bit of work, but I thought it did a pretty nice job in a relatively short period of time. So, if I zoom back out here, you can see we've got my Lawn TV logo here that I had it generate from a PNG file that I gave it. It tiled it and it's put it on this looping background that as it loops here, as you can see, stays perfect. So, this is the kind of stuff you can do. This needs more work, but it takes a lot less work to generate it this way than it would be for me to go into Apple's motion, for example, and generate it on

my own. So, there is a lot of depth to this whole setup here. And what's been really fun about this is that when I've got an idea for some kind of animation that I need, I can just get my data together, put it into Remotion, tweak it a little bit, and within 20 or 30 minutes get something that is incredibly usable. So again, Remotion, it works with most of the popular AI development tools and I think you might enjoy playing with it quite a bit because I certainly have. That will do it for this one. Until next time, this is Lon Sidman. Thanks for watching.