Edit Anything with Codex, Here’s How

Added: 2026-05-12

[00:00:00]So, Codex can now edit videos, and that's thanks to Hyperframes, a tool that can use code to edit and create videos, allowing you to create amazing visuals like the one you're seeing right now. And all you have to do is talk to your AI agent in plain English. And just like that, your Codex or your Hermes agent became a world-class editor.

[00:00:19]Hyperframes can create product demos with just one prompt, animate custom motion graphics, build personalized brand assets like lower thirds, subscribe animations, and even Twitter posts. It can take screenshots by itself and use these in videos. It can build 3D device animations, phones, laptops, anything else. And you can even connect it to Eleven Labs to create voice-overs and sound effects. Yeah, Hyperframes is insane. And the best part is, it's very easy to set up within Codex, which is exactly what I'm going to show you. See, the bottleneck in video editing wasn't rendering the videos, it was the video editor himself, right? The human. And up to this point, that video editor was always a human. Softwares like Adobe Premiere, Final Cut, CapCut, these all require a human dragging clips on a timeline. Now, Hyperframes completely flips this because the timeline itself becomes code. And now, an AI agent like Codex, Hermes, Claude, they can produce, edit, and manipulate videos just by writing plain HTML code, which they're already extremely good at. So, in this video, I'll show you how to set up Hyperframes step-by-step. You don't have to be technical. You don't have to be a video editor. You don't have to be a developer. Like, all you have to do is speak English and have a computer. And that's it. Oh, and I also asked Hyperframes to sponsor this video, and they agreed. So, thank you to Hyperframes for being the sponsor. Now, personally, I've been editing for over 9 years now, ever since I was 15, and I'll explain why this change with Hyperframes and the HTML in canvas feature is going to completely change the realm of video editing. And I'll also show you how you, literally after watching this video, can edit anything with it. So, setting up Hyperframes is very easy. I'm just going to open the Codex app. You can also use Cloud Code or Hermes, but I think Codex is actually the best for here. If you don't have Codex app, just type in Codex app into Google, click on the first link from the official OpenAI documentation, and follow the steps.

[00:02:11]It's available on macOS and Windows, so there's no excuses. And inside of Codex, just open an empty folder. So, on the left, in projects, click on here, use existing folder. I just created a new one here. I'm going to name it testing.

[00:02:23]Boom, open up. And important thing is selection of the model, obviously. Use 5.5. Don't even think about using any other GPT model.

[00:02:33]Also, make sure to enable speed because creating thousands of lines of HTML can take some time. So, definitely use speed, and I think medium is enough. Obviously, if you want the best of the best results, go with extra high.

[00:02:45]However, it takes more time, right? This can run for 10, 15 minutes, sometimes even longer. So, I would recommend going medium and fast. Also, on the left here, with the mode, you probably will have it on default permissions. Change it to at least auto review. If you're feeling risky, go with full access, but I think auto review is a nice middle ground where you don't have to approve every every single command. Next, go to the top left and find the plugins button.

[00:03:10]Click here and simply type in Hyperframes. There we go. You can see that this is the official plugin. Click on plus.

[00:03:17]This includes a bunch of skills, including the HTML to canvas. We're going to touch on that in a second, though. Just click on install.

[00:03:24]And just like that, the plugin is installed. It literally took half a second or something. Now, before we make our first video, let me tell you about the new HTML update because this really took Hyperframes to the next level.

[00:03:35]Like, it was decent before, but now it's revolutionary. So, this feature is called HTML in canvas, and now it's coming in Hyperframes, literally released yesterday. So, if you want more of these cutting-edge updates with a super fast speed, make sure to subscribe. It's completely free, and it helps out a lot. So, a lot of you actually the majority of you watching this channel are not subscribed according to the official YouTube studio statistics. So, please go below the video, check you're subscribed, and if you're not, click the subscribe button, and you make my day. Now, just take a look at this because this is all built with HyperFrames.

[00:04:11]I mean, this is crazy. Look at this.

[00:04:13]Glass, liquid glass, different fonts, smooth animations, swipe 3D object rotations. Even couple months ago, you would have to pay professional designers and animators thousands of dollars to make stuff like this. And now, it's a couple of prompts away. Like, this is wild. Look at these effects.

[00:04:31]Man, what?

[00:04:34]Guys, I don't know.

[00:04:36]This is wild. Like, if you are not doing anything with AI, if you're not running your personal AI agent, building custom software, creating animations and designs and and videos, what are you doing? Like, we live in the best time possible. You can literally make anything. You can literally build anything. All you have to do is try.

[00:04:54]Now, to set this up, you do need to enable a Chrome flag, which is called canvas draw element. So, when you go to the official HTML in canvas documentation from HyperFrames, which I'm going to link below the video, they literally give you the set up set up right here. Just copy this into either Chrome or Brave, open a new tab, paste this in, and you need to have this enabled. As you can see, by default, it's disabled. So, let's enable it.

[00:05:17]And then, you need to relaunch the browser. Now, after this, let's go back into Codex, and let's create a new thread, aka new chat, in the HyperFrames folder we created earlier, and I'm going to paste in a pretty extensive prompt, which actually will allow us to understand HyperFrames by the animation, right? So, think how meta is this. We're using HyperFrames through Codex, obviously prompted in plain English, to understand HyperFrames more. So, we're using AI to create a visual, to create an animation, to help us understand hyperframes. So, let me just read the start. I said, "Create a motion graphic that visually explains why hyperframes is fundamentally different from traditional AI video editing tools." And then it explains more context about it.

[00:05:59]And now, as you can see, um it's using the skill. It's listing out the files when it probably realized that, "Hey, we're in an empty folder." If you do LS, there's nothing here. So, it's going to figure that out. So, now it's using NPX to install hyperframes here inside of this folder. And while this is running, I'm going to give you a pro tip, and that is to send this. Do not remove old compositions when making new ones. Save this as a memory into agents.md.

[00:06:22]This is something that's very annoying.

[00:06:24]Um sometimes Correct could remove the old composition, but hey, you want to see the previous videos and animations you've made. So, it can just create a new composition instead of rewriting the same one. And I would highly recommend all of you to send this prompt. All right, it says the scaffold is completed. I'm reading the generated files now.

[00:06:40]So, now if we do LS, hey, we have the scaffold. Very nice.

[00:06:44]Later in the video, I'll show you how you can literally give it your website and it will create an animated demo, like a product pitch that you could use for investors, you could use for marketing. It's really incredible what hyperframes can do. Okay, so Correct has finished running. It was running for quite a while. In fact, if we scroll up, we can see it was running for 10 minutes, even though I put it on medium, and even though I have the fast speed, right? So, be prepared for this to take time. However, the things you can do with this are crazy, okay? So, first we have the demo here. Preview video, let's look at this.

[00:07:14]Look at this this animation, right? How long would that take to do by hand?

[00:07:19]Couple hours?

[00:07:21]It was just a single prompt. So, by the way, this is the explainer of what hyperframes is, right? So, you can look at this and you can think, "Okay, this could be built to This could be used to build educational materials, to create courses, to create lessons, to create YouTube videos, presentations, slide decks." I mean, the opportunities are endless. Now, obviously, some things are slightly misaligned, but with the HyperFrames workspace, you can actually tweak these very easily. Look at this again. This is crazy.

[00:07:50]Like, you as a non-professional animator and visual effects person, you can do this. You can make this. And this is just a small taste of what's coming in this video. In fact, if you switch to the browser, you can see that localhost:3000 was opened. So, Codex opened this for me. I didn't open this. And this is the HyperFrames timeline.

[00:08:12]And we can see that we can tweak this around. We can see the assets, the compositions, and the code on the on the left-hand side.

[00:08:19]Let me zoom in slightly so you can see it better.

[00:08:22]In the bottom, we have the different clips that make up the timeline.

[00:08:27]You can change the speed at 2x. We can make it loop. You can see either frames or seconds and minutes. And um, you can see the renders. This is a rendered MP4 file right here. So, let's say now we want to make changes, right? Well, that's as easy as prompting Codex. So, let's jump back in and say, "Okay, but change the design to be kind of a red gradient vibe. Do not change anything else." And now, it's going to change the code. It doesn't have to rewrite everything. It just changes the parts that are about colors, right? So, probably the CSS where the color scheme is defined. And it will see it reflected inside of the HyperFrames workspace. In fact, while this is running, we can open the sidebar in Codex and create another thread. And because Codex has Git Worksheets built in, we can launch a second prompt running in parallel while this one is still cooking, and they will not interfere with one one another. So, the second prompt is, "3D liquid glass subscribe." Something way more advanced than up to this point was even possible, right? Create a liquid glass subscribe animation inside the HyperFace workspace. Build it as a single self-contained HTML file and open it using the HTML preview panel in HyperFrames. Okay, so this is, again, a little shorter than the previous prompt, but it's still a quite a long prompt. Because if you want something specific, you have to describe it well.

[00:09:36]But again, pure English, plain English, no animated like I don't know nothing about VFX or animations, guys.

[00:09:42]Yet, now I have the power to make them.

[00:09:44]And that's because I can set up Codex, I can set up the Hyperframes plugin, and I know how to use AI, and I know how to prompt in plain English. Okay, this one has changed the color. We can switch back. And look at this beautiful red gradient throughout the whole thing. And that was way faster. That was like only 2 and 1/2 minutes. It didn't have to rewrite the whole 10-minute thing, right? Yeah, guys, I really want you to set this up. Like, don't just be a watcher.

[00:10:05]This video has no value for you if you don't set it up. So, go ahead and set this up. It's super simple. You can use Codex with the built-in plugin.

[00:10:12]Literally type in Hyperframes, install plugin, and start creating something.

[00:10:15]Because this is what the future of video creation and video editing looks like.

[00:10:19]All right, so here we have a second composition on the left, which is the subscribe button.

[00:10:26]And in fact, this is uh it's not lying, okay, guys? Most of you, statistically, are not subscribed. Even if you think, sometimes YouTube unsubscribes uh you from random channels. So, go below the video and check this. But, the main point is that like how quickly we were able to cook this up with Hyperframes and Codex. And let's say you want to make this crazier, you know, more 3D, whatever.

[00:10:47]I'm going to say, update this animation so it's more visual, faster, and more 3D-like.

[00:10:55]Just make it crazier like a professional VFX designer would. And Codex will do just that. By the way, a pro tip while you're using Codex and Hyperframes, make sure to use {slash} compact a lot, okay?

[00:11:07]This is a built-in command into Codex that will compact the chat history to save you tokens because this can eat up your limits very fast. Now, obviously, Codex has much more generous limits than Claude Code. In fact, it's not even close. I would say the $100 plan in Codex is the best $100 you can spend in AI.

[00:11:27]The amount of things you get for that is crazy.

[00:11:29]But, still, with Hyperframes, it can eat up your context window quite a lot. It can fill it up. So, just use {slash} compact frequently.

[00:11:37]More often than you would in typical Kodak sessions. All right. So, here we are getting the updates to make this animation crazier. And in fact, I'm going to show you how it this can work with real assets in a second. I'm going to upload my logo to see how that works.

[00:11:51]Because hyperframes can do a lot. We're We're just scratching the surface. In fact, hyperframes released community playground where you can see what the community has designed with hyperframes to just get the some inspiration, you know, on what's possible. So, for example, here we can look at this VFX H&M combined, and it gives you the code.

[00:12:09]And you can mess around with it, and you can build on top of these.

[00:12:13]And design your own animations, videos, whatever you want. Let's look at this example from Notion.

[00:12:22]This crazy. Like, imagine animating this by hand.

[00:12:26]Obviously, it's possible, right? There's humans who can do this and who are better than this, but that's not about replacing the top 0.01% of animators. This is about giving everybody the option to be an animator. Just like last year or 2 years ago, you know, Code to the Cloud code gave the option to everybody to build production-level software. Everybody can build their own software now.

[00:12:49]Thanks to hyperframes, everybody can create their own videos and animations. And I think most people don't really realize the real weight of that.

[00:12:58]The implications of that statement. All right. Let's see. Kodak has finished making the changes. It took 3 minutes.

[00:13:03]So, if we Oh, we can already see it.

[00:13:05]Okay. So, back to the hyperframes workspace. Let's play it.

[00:13:10]Yeah, this is way more way more animated, you know.

[00:13:16]A little bit over the top, but hey, we're trying to push it to the limit.

[00:13:19]Okay. Now, let me give it my logo, and let's see what it can do. Going to drag in my logo and send in this prompt. Add a logo to existing liquid last animation.

[00:13:27]I'll import my logo asset. I had it above the glass card center horizontally. Just a basic information what it should do and how I want it to look like. Now while this is running, let's create another thread and let's create yet another Hyperframes composition. This one using a 3D iPhone animation and it's going to build this 3D animation based on my channel. So it needs to read about my channel first and realize what it's about, how it looks like, what videos are on there and then create a 3D iPhone animation. Another insane thing which I'm going to start in a new chat is to turn any website into a product label.

[00:14:02]Just paste in the link of your website.

[00:14:03]I used vector.ai and have it turn into real product label.

[00:14:09]Literally just like that, a single sentence and you're going to be surprised by how good the result is.

[00:14:14]Now we should have the logo finished here. That was pretty fast, less than 2 minutes.

[00:14:19]Let's check how it looks with the logo, okay.

[00:14:22]Nice. This is way more custom. You can see the glow animation.

[00:14:26]Very nice. Cycling glow animation. And there's also an insane arbitrage right now to selling this to clients who still are like 6 months, 12 months behind, who don't even know this exists.

[00:14:36]Or like, you know, selling this to other content creators who are not in the AI space, who don't know how to use this. I mean, yeah, there's anytime there's a new technology, there's so many ways to make money. You just got to be a little creative and know how to use it. And obviously, if you actually watch this video all the way through, you will know how to use this. Okay, but this has to be my favorite use case and that is building an audio waveform visualizer. But you can just do any MP3 file and it'll show you perfectly animated waveform. This is something that I've wasted so many hours before just editing, trying to find the visuals for this.

[00:15:09]Now this is a single prompt. Let me show you. Okay, so I attached this 10-second MP3, which I guess we can play it.

[00:15:17]>> [music] >> Yeah, so very like wavy beat that'll nicely showcase the waveform. All right.

[00:15:23]So, now we're going to launch Codex.

[00:15:26]Just build it, you know, just create this.

[00:15:29]And again, these are reusable assets.

[00:15:30]So, like once you build this, you can use it in future videos. You don't have to wait 10 minutes every time. Next time to change it is a minute, one to one to minutes to change it to something else.

[00:15:40]And this is the similar idea of like My Grown Files prompts and skills. Like whoever builds the best library to the best assets will just win. You know, whoever is the has the best taste and the best judgment to know how to make a great hyperframe animation or which hyperframes animation is the best, that person will just win.

[00:15:58]Because, you know, the cost of this creating hundred of these is very low.

[00:16:02]But the real advantage, the real alpha is knowing what's good, knowing which content will work, knowing which of these are nice.

[00:16:12]That's why people like Rick Rubin are paid top dollar even though he doesn't play any musical instruments. All right, we have the iPhone. You can As you can see, Codex just opens this. I didn't even do anything, guys. I didn't even alt-tab. Codex just opened it. It It just opened my browser. It's like, "Yo, just look at this, okay? These agents are getting scary good, guys." All right, let's play this.

[00:16:30]Um Okay, this is the Vectal one, actually.

[00:16:33]Oh, both are finished. So, I gave it the Vectal.ai login and it just analyzed our landing page and created this animation. That's crazy.

[00:16:43]Like I know how much time this would take me to make this.

[00:16:47]And I know how much startup founders value this.

[00:16:51]And this is wild. A single prompt.

[00:16:54]Man, that's that's unheard of.

[00:16:59]And that was the shortest prompt, by the way. Look at that. Look at that. That was If you remember, this was literally a single line, a single sentence.

[00:17:07]And the result is is magnificent. I mean, I don't even Okay, here it's overlaying a bit.

[00:17:15]You know, there could be like a drop shadow, whatever, whatever. But again, this is one shot.

[00:17:19]And this is really, really good.

[00:17:22]Let's look at the iPhone 3D animation. I mean, this one could be even crazier.

[00:17:28]All right, so we have 3D iPhone. Okay, we can see that these boxes are a miss bit misaligned.

[00:17:34]But again, what what you can do is just screenshot this. Or you can just use play right and screenshot it itself.

[00:17:39]Crazy, but you know, I can paste it in and say like fix these little boxes that are a bit weird on the edges of the iPhone, so it actually looks good.

[00:17:47]Boom. And it will just fix itself. As you can see in in the Codex app, you can just work on multiple projects in parallel, switching no problem.

[00:17:54]Uh let's see how this one is doing.

[00:17:56]Okay, almost 400 lines of code. Yeah, this is still going. Why is this still going? I thought this is finished. It's still testing it.

[00:18:04]Damn, it's still testing it and improving it. Okay. Okay, it's kind of funny that agent got blocked by YouTube.

[00:18:09]It's like, before you continue, you have to accept the terms and conditions or something.

[00:18:13]That's pretty hilarious. Okay, so this has finished. 7 minutes 46 seconds.

[00:18:16]Let's look at it.

[00:18:18]Oh, this is really Spotify vibes. Okay.

[00:18:21]But colors are spot on. The music isn't playing. Hmm. Let's give it this feedback. The waveform is not moving.

[00:18:30]Actual MP3 visualize audio waveform.

[00:18:35]Okay, wait, it's still cooking. I don't know why it's still cooking up the localhost 3025. Damn.

[00:18:43]It keeps creating new localhost servers.

[00:18:46]Let's do a cleanup.

[00:18:47]List out all 3,000 servers that are running on localhost.

[00:18:54]iPhone one is has been improved. Let's see if it fixed those edges.

[00:19:00]Okay, it kind of did fix them. It's still the before you continue, that's annoying, but hey.

[00:19:05]Agent's getting blocked.

[00:19:07]Mhm. Okay, only these two lines, not that much.

[00:19:11]I do want to finish the waveform though.

[00:19:18]The audio waveform stays um flat.

[00:19:22]It doesn't really move around based on the MP3 file.

[00:19:27]Get to work and fix that. This was running for so long, 40 minutes. It was usable even after like 5 minutes. I don't know what other changes it did.

[00:19:35]Let me watch it. Must have improved a lot then.

[00:19:38]Maybe it removed some of the overlapping.

[00:19:41]No, I think Okay, the background zooming in is nice.

[00:19:43]The overall it's pretty much the same.

[00:19:46]I don't know why Codex is overthinking so much.

[00:19:48]It's got to be this medium. Like extra high, you would know how much effort would Codex put in. Let's close this one. You need to stay here.

[00:19:56]Maybe it it didn't create a new composition for this.

[00:19:59]Also, make sure to create a new hyperframes composition for this. All right, we now see the waveform here as a new composition. Let's see if it works.

[00:20:08]It does work, but we need to have it rendered with the with the video I mean with the audio as well. So, I want an MP4 video where we have this included.

[00:20:21]Also, it probably is reaching the top too soon. It could be like more managed.

[00:20:27]So, actually I can screenshot that.

[00:20:30]And I can set it as a feedback. In Codex you can pre-send messages. So, I can say the waveform is hitting the top too soon.

[00:20:37]Um I think you should you could make it look nicer so that it's more dynamic and more different rather than you know, hitting the top so quickly and so easily. And I sent it and it's going to Once it finishes the previous it's going to auto-send the next prompt.

[00:20:54]So, when you get an idea while Codex is building, you don't have to like wait to send it.

[00:20:59]You can just send it right away. If it's unrelated to this feature, just start a new thread and run it in parallel. But if it's related to something that's happening and you want it to be implemented after that's finished, you can just pre-send it. Amazing feature inside of CodeX. It will save you a lot of time if you start using this. Find the composition for the waveform visualizer, and do the MP4 render using the HyperFrames skills from the plugin. We Okay, so it says we already have the order. Yeah, let's see it.

[00:21:27]We should have a update here.

[00:21:30]New HyperFace composition. Let's see how that looks.

[00:21:34]Looks much better.

[00:21:36]We don't have the audio overlay here.

[00:21:39]I still want to see the final Okay, we have the final render. Let's play this.

[00:21:43]Okay, nice.

[00:21:45]This is nice.

[00:21:47]And obviously, I already pre-sent the prompt to make it uh you know, to make it more dynamic, so it's not hitting the top so frequently.

[00:21:57]But guys, you have to have You need to like realize this is crazy.

[00:22:02]You need to admit that this is amazing.

[00:22:04]And the things that are possible with this are just endless. And that whoever has the best imagination and work ethic is going to crush.

[00:22:12]Those are the people who are who are going to absolutely destroy in the future. So again, don't just be a watcher. You've watched until the end, so go and implement it. Watch this video again, and actually set up HyperFrames for yourself. And again, shoutout to HyperFrames for sponsoring this video.

[00:22:25]It's an incredible tool, and especially with the HTML in canvas feature, it is going to completely revolutionize video editing and animation as we know it.