Transcription
And what if I told you that all these animations, I didn't make them with software like Final Cut, After Effect, or anything like that, but directly with Clo from my videos just before giving it to Cloud Code, who will then cut the video, add animations, subtitles, and a progress bar. All of this is possible thanks to HyperFrame. HyperFrame is a tool that Hayen released a few days ago, and it allows you to create animations like you see here just by talking to it. So, I've started using it massively for my content creation on Instagram. It allows me to publish many more videos but with increasingly high-quality videos. And today, I'm going to show you how I use it. Obviously, this is just the beginning, so I think I'm only scratching the surface of HyperFrame, but I can feel that it will very quickly become my tool for all my video editing. I'll show you how it works. HyperFrame, well, it allows agents like Cloud Code, Codex, Cursor, or even Gemini to do video editing automatically. On their site, there's a catalog with all the animations it can do. There are really hyper hyper advanced things that we can achieve, which would normally take a lot, a lot of time with motion design. And here, we can do them in 2 seconds using HyperFrame. Today, what we're going to do is show you how it's used on Cloud Code, how to install this skill. Then, I'll show you how the video editor that comes with it works. And finally, we'll film a complete video from A to Z, edit it with HyperFrame, and publish it. I'll go into Cloud Code, I'll just ask it, "Make me a presentation video of what HyperFrame is, but explain it to my audience who are non-technical people, but in a vertical video format." So, it's currently creating all the animations, but for a vertical format so we can see everything it can do. And what it's going to do is create an HTML file. In fact, what actually happens is that first, it creates HTML files, which we could read in my browser, and then what they do behind the scenes is transform it into MP4. And so, it looks like video, but in reality, it's HTML. It's just HTML, CSS. But since we've mastered HTML and CSS, we can do a lot of animations now, especially with a great library called GSAP, which allows us to do these kinds of animations that are hyper hyper cool. If we go to the showcase tab, we realize we can do a lot of things. What you see here is HTML and CSS. So they thought, why work frame by frame on tools like After Effect for motion design, why not directly use 3D shapes and so on in HTML, and that's exactly what HyperFrame did by working on it. Now, there's something called Remotion. It works a bit like this, but honestly, having tested both, I find HyperFrame much more powerful. You can really go very far. So there are transitions, app showcase. Yes, it's it's it's hyper cal data chart. I just went to see a bit of what it did. It renders MP4. Now, this is what takes time. It will depend on the machine. And I see my computer starting to take off because the CPUs are running at full speed to render this for me. Okay, it's done. So, the MP4 video is available, and I can click here and watch everything. Okay. So, it didn't manage to do this well. It's not used to it, it's not used to using the screen for TikTok. So, the result was null. I think it doesn't know how to make vertical videos. I just want to say, it doesn't work, the images don't display well, and recreate it for me, please. Okay, it found the problem. It was a window size issue. So, it finished modifying what was needed. Now, it seems to be working a bit better. Okay. Yes. Now, now, that's cool. It made me tweets, it made me macOS redit stuff. Okay, that's really cool. Okay, it changed everything to Shouam. That's really cool. HyperFrame, now, I can add whatever I want. So, that means I can also add YouTube videos. I imagine I can ask it to create some kind of thing to display a YouTube video every time. Now, you might be wondering when to use HyperFrame, or at least where to use it. Well, it's great if you feel capable of going directly into your terminal and using it via the CLI tool, but honestly, it's really made to be used with agents like Cloud Code, Codex, etc. That's how it should be used, and primarily with the HyperFrame skill, which is provided and allows all these agents to understand how it works. And once they have the skill, they can interact with HyperFrame. And HyperFrame itself, well, there's the skill that connects HyperFrame to the different agents, and it basically does one thing: it takes HTML and turns it into MP4. And we have something that's really cool: it gives us a kind of video editor. Uh, it gives us a studio. So, once it's finished, we have access to the studio, which allows us to see a bit about where the video is, how the blocks fit together. It looks a lot like After Effects and any video software, really. Now, it's true that I showed you an interface without telling you a bit about what's inside. So, in this interface, we already have a left-hand section that shows us all the code that generated this. I told you it was HTML. Uh, that allowed us to create this. So, if we go into composition, well, we have all the HTML, everything that allowed us to create this composition. So, if I go, I switch to MacOS notification, the MacOS notification is this. All this HTML code, that's what creates the video. Then we have composition, where each element is in solo mode here. So, redit post, it's here solo. Spotify card, it's here solo. And actually, all of this, if I want, for example, on Spotify card, I can go here, Spotify card, and I can modify things within it. So, typically, it says HyperFrame Hayen. If I do Ctrl+F, Hayen, I see where it was. There it says Spotify here, Hayen there. If I type Shouam, well, it changes it live here. You see? So, it's not real video. So, unlike pixel-by-pixel editing, we're doing editing in HTML, and above all, it's an agent that allows us to do this. Then I have an assets section. Here, it's all the images, etc., that are here, and also the generated files. And the generated files are also here on the right. So, when we do an MP4 generation, and we want to export it, to go from HTML to MP4, our real video, the generations are displayed here. We can export it ourselves by clicking on export here. And at the bottom, we have the timeline. So, this is a timeline, I'd say a classic one, what we're used to seeing in any video editing tool. And actually, the timeline here allows us to see all the blocks there are, and we can move them, remove them, etc., and actually, it works like a real video editor, which is really great. So, that's a bit about how this interface looks. This interface simply allows us to display the HTML first before turning it into MP4. There's something I haven't shown you, which is that here, for example, if I want to make modifications, instead of going into Cloud Code in the frame at minute 7, this is what happens, I'd like you to display it like this, and actually, we can press Shift and give it the exact spot where it happens. So, for example, I can do this, and here it has correctly detected which scene it is. It has very well detected the timestamp, and I can just tell it, "Listen, I'd really like you to change the font of all these elements." And then, I do "copy prompt." What will happen is that I do this here. And here, actually, it has made this prompt that describes exactly on which timeline, what instruction I need to make the modification. This greatly facilitates all feedback. In fact, I realize that it's even more precise than when I have to give feedback to an editor for this kind of subject. Okay, now let's do a real example. I have a video here that I'm going to film for TikTok and Instagram, etc. It's five Cloud skills that few people know. So, this skill, this script, rather, I'm just going to put it in a new window, and we're going to record it live, and you'll see how from there I transform it into a complete edit with HyperFrame, and I'll try to do it without cuts. Here are five Cloud skills that few people know. Tell me in the comments, and I'll send it to you via DM. So, for example, I've finished in one shot. Okay. Now, I'm going to Tella, which is where I record all my videos. I have the video here, and we're going to try to edit it now with HyperFrame. I'll click download, and once it's finished downloading, I'll go to download, I'll put it here. And from that moment on, first thing, I want to ask it to install the skill. I'll copy this here and just tell it to install the skill. And so, this will give Cloud Code the ability to know how to use the HyperFrame skill. I'll just install it per project and not on my whole computer, because otherwise, every project will start with HyperFrame, and that's not necessarily what I want. Okay, it's done. I'm launching Cloud Code. Cloud Code T-dangerously skip permission to avoid having to say yes every time. And now I'll tell it: "This is a video I'm going to publish on Instagram. Your goal is to do video editing, branding, using the catalog as much as possible." There, I give it that, and then it will start working on my video. It will read it first. So, it will try to understand what's inside. It will try to extract all the information from this video. And precisely, I deliberately gave few instructions so that it would choose for itself how it would modify this video. Now, it's trying to really understand how the skill works, and we'll see the result it gives me. Just one thing, I have a train to catch, so I'll let it run and try to do a screencast on the train. You know what? I'll put it at the end of what it produced. I'll do it in one shot, and then I'll do a V2 when I've improved it. You'll see it on TikTok or Instagram, etc. If you don't follow me there yet, don't hesitate to subscribe. Anyway, bye-bye. I'll leave you with me on the train, where I won't be able to talk much. Okay. So, here I am on the train. So, I'm making some weird faces. So, I'll remove this face and try to comment as much as possible on what I've done. The first thing I want to ask it is how do I brand this video? I'll ask it for recommendations and to brainstorm a bit with me. The first thing it will do is analyze the video a bit. It sees that it's a talking head video, so me talking to the screen. It says the first thing that would be cool is to have animated subtitles. And so, that's what I'll start with. I'll ask it, "Okay, let's start with animated subtitles." Then it gives me other recommendations. So, let's go. "Start with the captions." So, here's what it's doing. It will first try to understand how HyperFrame works, as usual. Let's go. So, it will start transcribing the video little by little. It has the transcript, and then it will offer to add subtitles. So, it creates the caption.html, creates the HTML file. It's done and it has also detected the slightly complicated words in this transcription. So, let's go. "ST Cloud skills that few people know, and yet they will change your way of working." Honestly, it's very, very cool because I gave it no indication of font or anything, and it transcribed it very well directly from the video code, and I'm talking about the best. It makes it compatible, and there's a slight delay at the end, but I'll fix it later. Okay, now I'll ask it to add overlays, roughly some branding on top. I'll ask for its advice on how I can brand my video. So, it will propose three possibilities. We'll start. It tells me, "Listen, it would be cool if we could put some kind of counters, 1/5, 2/5, the name of the tool, or emojis." I'm not a fan of emojis, so I'll tell it, "1 and 2 are cool, but let's not do the rest." So, it will add these things on top that we just saw. "Here are five Cloud skills that few people know, and yet they will change your way of working. The first is H." Okay, so it's quite cool already that it arrives in a non-static way. So, in reality, this part is cool. There's just one problem: it said "pencil" instead of "impeccable." So, there, I want to say "pencil" is "impeccable." Then, the position is okay because it asked me about the position. It's maybe, I'll ask it, "I'd like to display it a bit lower and a bit bigger." And then, I'll ask it if it's possible to retrieve the web pages while scrolling because I find that here, I'm just giving the names, it doesn't give an idea of what it is. So, I'll try to take screenshots with what I call browser use to make it film me scrolling and then display that. And so, we'll see what happens. Okay, so it finished on "impeccable," so it changed it correctly, and then it found URLs for the first one but not for the rest. So, so "Impeccable," for example. So, I'll tell it, "Listen, okay for the link for 1, but for OG Browser, I won't have it." So, I tried to find if Agent Browser had a site. Let's say no. Anyway, it tells me that for skills without a landing page, the Gitup screenshot is useless. So, just leave it like that. However, as soon as there's a landing page, show it. So, that's what I'll do. I'll check if Impeccable has a site. Impeccable does have a site. So, I'll tell it, "Okay, here's the site for Impeccable." That way, it can use it. I'll give it that, and we'll see what happens and what it does in terms of results. I'll advance a bit in the video to see what it did. Ah, there. So, it came up with something quite nice. So, the first one, it took a screenshot that's quite cool. Uh, it's a screenshot of the HyperFrame page. So, "too good, no Remotion, I'm talking about HyperFrame, which is much more powerful. It's Hayen who launched it a few days ago, and I have a video on this topic that's really very interesting. I invite you to watch it. The second is Browser. It allows, it allows Cloud Code to navigate. Obviously, I didn't give it the link for Browser, so it didn't give me anything. If you do copywriting or advertising, it's a great way to Okay, this is Impeccable. Display it, it displayed it a bit off, but it did the scroll very, very cleanly. Honestly, that's great. Now, it's a bit small, huh. On a mobile, it might be better. But honestly, I didn't think it was possible when I did it. Then, it tells me that it managed to do it on only two tools, so that's very, very cool. I tell it, "Well, listen, that's great. Plus, it created a kind of window that's very cool, a macOS window with the three little dots to minimize and close the window." Then, I tell it, "Listen, the position is good, but can you lower it a bit more?" So, it asked me this question, I just replied here. I tell it, "Otherwise, there's a small problem with the subtitle timing that's a bit annoying. That is, at the end, I have no subtitles at all." So, that's quite annoying. That is, at the beginning, everything is fine, but then it gets out of sync. Uh, and so, we'll see if it can fix it. So, I tell it, "They finish well before the end of the video, and that's not great." For those who are wondering what this thing is. Basically, I've configured my Cloud Code so that it can display the context window. And so, at +4.5, 4.7, it only has 200K tokens available. And so, I prefer to display it because I know that after 40%, the model doesn't work very well. So, this will be the moment when, well, it won't be very good, this Opus 4.7 model, even though it's very powerful in itself, the fact that the context window is filled will make it dumber and dumber. So, it will do what's necessary. It will re-analyze the entire video and then offer me things. So, for example, here, it has recalibrated everything a bit, it has changed the moments when the subtitles appear, and it has also changed a bit the moments when the different pages I asked it to display appeared. The code, and I'm not talking about Remotion, I'm talking about HyperFrame, which is much more powerful. It's Hayen who launched it a few days ago, and I have So, you see, it's much more synchronized now. Let's move on. Well, now the problem is that my model is completely dumb. Uh, and so, I'll do something that Cloud Code does automatically, or I'll ask it to do it. It's to compact the conversation. That is, it will try to take as much as possible from this conversation so that I can start with a smaller context window. That way, I'll be much, much more efficient in my use of it. So, there. Anyway, I'll ask it how I can add more overlays now. That is, I'd like to display even more things because one of the things on Insta is that as soon as the eye gets bored, it swipes quickly, and well, it moves on to something else. So, it's proposing floating keyword cards. So, basically, display words like MCP, psychology, iOS 18, plus, little tiles, a progress bar at the top, I hadn't thought of that, and I think it's a great idea, and the fact of having punching zoom on the video with five transitions, but it told me that, be careful, you have to dose it a bit. So, here, I'll tell it, "Go for 1 and 2, and then launch a sub-agent to fix the subtitles." Because, in fact, I noticed that instead of saying "skill," it was saying something else, that is, it was saying "ski." And so, by telling it that, it will correct 1 and 2 and launch a sub-agent. Why a sub-agent? Well, simply, again, a question of context. Well, it will just save me from losing a lot of context with useless tokens. Whereas if I had done it sequentially, it would have been less efficient. Anyway, now let's see what it gave us. Well, you see now, landing page, copywriting, these things now appear automatically, and it adds a bit more dynamism to the video. Okay, now I'll do one last thing. On Instagram Reels, there's a part of the screen that's completely hidden. It's hidden by the username. So, you'll see what's called the dead zone, it's this. So, this means that when you're on Instagram, well, there's this part and this part and this part where you shouldn't put anything. However, it, well, it puts elements right there, in fact. That is, these are things that will be hidden because of Instagram. So, what I'll do is give it the image and tell it, "Be careful of Instagram's dead space, you can propose modifications." Hop, so I ask it the question, and then it will launch this. So, it's done. It lowered all of this to make sure it's not in the dead zone. Well, however, it's on my head. On the other hand, you've seen, it also displayed this kind of bar above that shows that we're reading different chapters, and that's very, very cool. However, it did something that's not great: the things that appear here, the screenshots, etc., they appear right in the middle. So, I'll take a screenshot. I'll tell it, "Listen, I'd like it to appear here." I'll copy this, I'll give it to Cloud, and I'll say, "Here are the cards, can't we make them appear here instead?" And well, it will simply shift everything. So, these are things that before, I had to tell the editor every time, and now, well, Cloud does it automatically for me. It's quite crazy. Okay, it told me "cards to the right selected," it's done. So, if I relaunch, you see now the cards appear here instead. So, it works. It works very, very well. Okay, well, I think we have the first version of this video. What I'll ask it to do now is to render it, meaning to turn it into MP4, because remember, it's only in HTML for now. So, I'm starting the rendering. This is where the CPU will start to run at full speed. That is, if I go here and look at my CPU, you'll see down here the processor load, and well, it's using all four cores. And so, depending on your computer's power, you can either do a lot or not much. So, in this case, I think I'm on an M4, so it's okay. But still, I could feel my computer taking off. Okay, last thing I did, uh, I didn't have time to record this part, unfortunately, is that I asked it to create an intro. I'll show you the result directly, it will be much simpler. There, you see this little thing. So, it downloaded Cloud's design system to have the right colors, etc. Few people know, and yet they will change your way of working. The first is Hyper, and you see sometimes it displays subtitles with Cloud's colors, and above, similarly, for the lines, it used Cloud's design system to be on brand and to make it a real video, especially with a visual hook that we have at the very beginning of the video. And now I'm asking it to relaunch the render. I can launch it from the interface or launch it from here. And then, it will start working. You see, it's using multiple workers because I have multiple CPUs on my computer. And then, at the end, once I have this version and the render is okay, I have the final version. And here I am on YouTube. And here, I'll show you a bit of the result this video achieved. I'll go here on YouTube, it got 50k views and 200 subscribers. On Insta, it got 28,000 views. On TikTok, we're at 41,000. I think the result is honestly really great. So, I'll be putting more and more videos into this. If you liked this kind of video where I build as I go, don't hesitate to let me know in the comments. Now, if you're interested in how to create cleaner and cleaner designs using AI, I invite you to watch this video where I do a complete guide on Cloud Design. And I just realized something: I'm telling you it's a voiceover. I'll spend my time commenting on what I did because it's not the same day, and I don't know why I bothered to wear the same shirt to try to match my brain.