Transcription
This video, which you are currently watching, I made without opening a single editing program. No After Effects, no Premiere, no CapCut. Nevertheless, it is cleanly edited with nice subtitles, a name overlay of myself, diagrams, references to previous videos, and even this effect where I am moved into the corner, disappear from the screen, and also return to full view. And all of this because Cloud looks at my transcript, cuts out all the stutters and pauses, generates matching animations for what I'm saying, and also takes care of my branding. I actually wanted to find an editor to cut my videos, but that has now been taken care of, because Mrs. Nunan will have Claud cut my videos for me. Whether you create content for your website, your product, your training, or anything else, this system changes the complete workflow of how videos and animations will be created in the future. A possible project by Hayen, called Hyperframes, which was specifically built for agency systems like Cloud Code, Codex, OpenCla, or Hermis. With it, you can edit complete videos without ever opening an editing program or writing a line of code. You simply tell Cloud Code, for example, what you want, and it builds it for you, and it also keeps your branding in mind, and you are not limited to a video like mine here. You can also do something like this with it, or even something like this. In this video, I will show you how it all works. And so that you don't spend hours setting it up yourself, I have even prepared a ready-made setup file for you, which you just give to Cloud Code. It will then set everything up for you, so that you have the system up and running in a few minutes. But so that you also understand how to work with it, let me briefly explain how it all works. Basically, there are three different tools behind this system, all of which mesh perfectly. Each has its own clear task, and I will show you exactly what the three do and why they work so well together. The first tool is Videouse. Videouse is an open-source project from the people behind Browser, and it handles the editing of videos for us. This is also a tool specifically for things like Cloud Code. And what makes Videouse special is the way it edits videos and when it should be cut. Because instead of watching the video itself, which would be too computationally intensive for an AI, Videouse simply listens to the audio. It transcribes your video word for word via 11 Labs and gets very precise timestamps. This means that every single word has its own timestamp. And based on this data, Cloud Code can then precisely identify when pauses, stutters, false starts, and retakes occur, and can then automatically cut them out. And it is even cut so cleanly that these audio transitions do not produce any crackling, for example. This means we edit our video with this. And the second tool is then Hyperframes. This generates the animations. Hyperframes is also open source and, as I said, from Hayen, the AI avatar platform, where you can generate AI videos. Hyperframes is also inspired by Remotion, which some of you may know, and they have adopted a lot from it and, in my opinion, have added even more to create even better videos. And Hyperframes is essentially based only on HTML, CSS, and a bit of JavaScript for movement, and that makes it so good in combination with Cloud Code, because Cloud Code can understand HTML very well, or rather, the language models behind Cloud Code have been trained on vast amounts of HTML content. This means it doesn't have to struggle with any foreign software syntax first, but can simply generate native HTML code. Hyperframes can then render the whole thing into a finished MP4 file, and that too up to 4K resolution. In addition, Hyperframes has really good documentation with ready-made content in a catalog that you can use directly. So here, for example, is a 3D showcase of an iPhone MacBook or also follow buttons for social media. This means you can also get a lot of inspiration here. The third tool in this system is Cloud Design. This is Anthropic's design tool. With Cloud Design, you can generate animations and designs directly in the browser without writing a line of code. And we use it in our system for two specific reasons. Firstly, because in Cloud Design we can create our own design system with our branding. This means you enter your colors, fonts, sample images, or logos there, and Cloud Design builds a complete design system from them. You can then export this and place it in your project folder so that Cloud can also work with it and generate videos with Hyperframes, always maintaining your branding. Secondly, Cloud Design is really extremely good at generating beautiful HTML animations and motion graphics. You simply describe what you want to see, and you get really high-quality effects back. Currently, I find these even better than with Hyperframes. However, you cannot cut or render videos yourself in Cloud Design. That's precisely why we combine it with Hyperframes. This means that if we are not satisfied with Hyperframes alone, we can generate our animations in Cloud Design, while also taking care of our branding, and then simply export them and render them into a finished video with Hyperframes. And because both Hyperframes and Cloud Design rely on HTML, you can incorporate any HTML component you find anywhere on the web, for example, on a site like 21st Death, into your video. This means that if I want to have things like this in my video, I can simply give that to Cloud Code, and it will understand it immediately. But we'll get to that later. Let's look at it in practice now. This means we will go through the setup together now, so that you know how to do it later yourself. I am now in Cloud Code in Visual Studio Code. However, you can also use the desktop app if you prefer. I still prefer Visual Studio Code, but the desktop app is also quite good now. And I have now simply created a folder here and inserted this setup file, and Claud will use that shortly. You can find the setup file in my Download Hub. The link is in the video description. Here I store all my free goodies from the videos, so to speak. And the only thing you need to do to get access is to subscribe to my newsletter. I will give you regular updates on all AI topics so that you simply stay up to date. This means that when you watch this video, the new video will already be displayed here, and you can download the file here. You simply put that here into your project folder, and then I will simply tell Cloud to execute the setup. I have put it in automatic mode so that it just does it, and it will now check which programs you already have installed, because we will need something like FFM Pack, for example. This is a tool for editing videos, which is then also used by Video Uuse, and it naturally needs to be installed. This means it checks that first. We will also need something like Node.js, and so if something is missing for you, Cloud will install it for you with your consent, of course. All the tools are already included here for me, so it is now asking me, okay, shall we continue? I simply write yes, and it will now install Hyperframes, then enter our 11 Labs API key, and so on. First, we will be asked for our 11 Labs API key, and we should then enter it ourselves into a so-called .env file. For such API keys or passwords, it is best practice to actually enter it yourself into the file and not just give it to Cloud Code. If you are not interested in that, you can still give it to Cloud Code. It will set it up for you. But I will enter it myself into this file now. This means it will create both .env files. There are two, by the way, because we have another one under the video here. So the Videouse project is a separate folder here, so to speak, and there is also a file in it. This means we have to enter the API key in both. 11 Labs has a generous free tier with 10,000 credits. This means you can simply create an account here if you don't have one yet. And here on the left under Developers, you can create a new API key under API Keys. Then you simply enter a name here, and I would recommend removing this "Restrict" here so that you can perform all operations at 11 Labs with this API key. Then you simply click on Create Key, and then this key will be displayed here, and I will then paste it into this .env file that Cloud has created. Don't worry, I will delete the key immediately afterwards, and here under Videouse in this .env file as well. Then we simply write "done" here, and Cloud continues with the next steps. Next, Cloud Code asks us for our brand guidelines, because when you set it up for the first time, default brand guidelines will be set up for your company or your product or whatever. If you don't have any, that's no problem, then you can skip it. I will now show you how to set up such brand guidelines with Cloud Design. To do this, simply go to cloud.ai/Design, and here you will see the Design Systems tab at the top, and here you can create a new design system. You can then enter your name here, link your website here, upload some assets, logos, and fonts, and also add some notes. And when you have done that, you can also iterate further with Cloud in the chat until everything is really in place. It will also ask you some questions if necessary. If you don't know Cloud Design at all yet and haven't used it, then feel free to watch my video, which I will link here at the top. There I demonstrate what the system can do. In any case, Cloud Design sets everything up for you here, and when you are satisfied, you can say, okay, I want to export it, and for that, you go to Share in the top right and then click on Download Project as ZIP. This will download a ZIP file, and then you click on Yes, unpack the ZIP file from Cloud Design. Then I just told it that I have provided the ZIP file, and Cloud will take care of the rest. It will now unpack the ZIP and store it here in our brand guidelines. With that, the setup is already complete, and now we can get started and begin with our project. We can also delete the ZIP file now, and I would say, before we edit a real video, let's do a quick test to see if Hyperframes works correctly. We don't necessarily have to provide a video as input for Hyperframes. We can also provide any input, be it websites, PDF documents, or whatever, and create a nice video from it. For example, I have the website of our community here, and I want to have a really nice cinematic video for it with the most important information about the community. This means I simply copy the website here, go to the chat, paste the website, and then I say something like: "Use Hyperframes to create a really cool cinematic animation video for our community website with the most important points about the community that you find on the website, and of course, matching our brand." Then I simply send it. What Cloud does first is it generates a storyboard so that we get an approximate overview of what it is going to generate. And here we can then give feedback and say that it should adjust things if we want. And when we are happy, we simply give it a "Go." And this took 3-4 minutes to load. And then a window opens with the Hyperframes video editor, where we can watch the video before it is rendered. We can see here quite nicely, right? AI automation, AI automation, creating real business value, over 400 active members for entrepreneurs, freelancers, and agencies, just as it is stated on the website. Very nice with all the modules and here a nice animation of what you learn. N8N Workflows, AI Agents, building AI businesses, AI and law. Invest in your future, be the one who leads the change. Join the community now. So, mega good, I think, for the first try. I didn't give it anything at all except the website. Here in the timeline below, you can also see the individual components. And if we like this, we can simply tell Cloud Code, okay, great, render it for us in 4K, for example, and then it will do that, and then we will have it as a video. I actually edited my entire last video with the help of Hyperframes and Cloud Code. So all the animations you see in this video were generated by Cloud Code with Hyperframes, and I just have to give him the transcript, and he recognized what it was about and then created this animation. So mega practical if you want to create content like this. A small note at this point, I occasionally had the issue that the video was not displayed in this video editor. That is, I think, still a small bug with Hyperframes. It's still a bit new. In that case, I would simply recommend rendering the video, and then you will be able to see the video. But usually, it works that it is displayed here as well. That worked great again. Now you see what Hyperframes can do on its own. But now we want to test it with a real video. Therefore, I will now simply open a new chat, and I will take the video that you saw at the beginning in the introduction. I will now show you the unedited version of it, i.e., what I recorded at the beginning. Short sound check. Test. Test. This video, which you are currently watching, I made without opening a single editing program. No After Effects, no Premiere, no CapCut. Nevertheless, it is cleanly edited with nice subtitles, a name overlay of myself. So, I even made a mistake there. So, we have both the part at the beginning where I say something and then there's just a long pause, and now also the part where I make a mistake, diagrams, references to previous videos, and even this effect where I am moved into the corner, disappear from the screen, and also return to full view. Then another long pause, and all of this because Cloud looks at my transcript, now I've made a mistake again. And all of this because Cloud looks at my transcript, cuts out all the stutters and pauses, generates matching animations for what I'm saying, and also takes care of my branding. Exactly. And so on. And at the end, of course, there is also a longer section where nothing is said because I then stop the video. This means that should be cut out first. And what I do for that is I now copy the video here into our project folder. Then I can also reference it directly with an "add." And then I simply say the following: Hey Cloud, I shot a new video, and I want you to edit it for me now. And then I simply send it, and in his instructions here in the Cloudm file, it is also stored how he should handle it now. So what exactly should he do, in what order? And he also writes here, I'm starting with the Videouse workflow for editing and transcription. And he then also uses his Videouse skill. That is practically included when we install Videouse here. He is now using 11 Labs to create an accurate transcript of our video. And there he will then precisely identify when there is an empty pause, when I have made a mistake, and he will show us that again shortly. Here we see the display, so when something is said, and here below we also see what is being removed. This means we first see the sound check at the beginning, then also the stutter, the first one, and here then also the long thinking pause, and also the second stutter, and so on. This means he is now guiding us through the entire process, step by step, and now he is editing the video and rendering it, and he has now finished cutting it, and we see that he has even rendered it in HD first, so that we can now check if it is really correct, and only when we say, yes, it looks good, everything is clean, then he would render it in 4K. So I find that very clever too. All projects are displayed here in the project folder, by the way. So here we see Hook, and here under Render. This is now the video. Let's see what he has done. This video, which you are currently watching, I made, first of all, great. We start directly with the main part. The entire test part at the beginning is gone, without opening a single editing program. No After Effects, no Premiere, no CapCut. Nevertheless, it is cleanly edited with nice subtitles, a name overlay of myself. That was actually the first mistake. He removed it perfectly. Diagrams, references to previous videos, and even this effect where I am moved into the corner, disappear from the screen, and also return to full view. And all of this because Cloud looks at my transcript, cuts out all the stutters and pauses, and also removed the mistake here again, and such a smooth transition. So you don't even notice that I made a mistake there. Generates matching animations for what I'm saying, and then it continues here. I didn't make a mistake there. And at the end, it also stops exactly with the last sentence. Claud cut my videos for me. Done. Perfect. So I couldn't have edited it better. That was the first part with Videouse. It worked great. First try. Now I can tell him, okay, the whole thing can now be rendered in 4K. And then we move on. Next, he asks me, okay, how do we want to edit the whole video? Where should the animations come from? Either from Cloud Design, directly via Hyper Frames, or perhaps I don't want to continue and am satisfied with the cut video. We have already seen what beautiful animations Hyper Frames can generate. This means you could also simply continue with that here if you are satisfied with it. I also want to show you another method via Cloud Design, because it works very well there too. And it works by us creating the design in Cloud Design and then downloading an HTML file, which we then simply provide to Cloud Code here. This means we click on that now, and what Cloud does now is it gives us the transcript with the exact timestamps, because we cannot upload a video in Cloud Design, we have to upload the transcript directly. And then I also get a file with the exact timestamps for each individual word. This is done with 11 Labs, as I said, and I can now simply copy that and then I go to Cloud Design and want to create something new here. I'll call the whole thing "Intro Hook" and I'll use my design system, my branding. I click on Create, and then I am redirected to the chat, and here I can paste it in first. However, I can also simply upload the file with the transcript, and then I simply say something like: "Hey Cloud, I want you to create a really cool animation with motion graphics for my video that I recorded, which I can then overlay on the video. This means you should analyze the transcript and generate a suitable animation for each sentence and each part or each significant point. Make sure that the animations are not always directly on my face, but to the left and right of it. I imagine various reader cards that then show what I'm saying. Make sure that it matches the timestamps. And that's it, right? I've just spoken into it and let's see what he makes of it. I just realized I could have told him that it was a webcam recording, but I think he can already guess that. This took a few minutes to load, and now we see the first result after the first prompt. I haven't specified anything further. Okay, he has assumed that it was a portrait recording. No problem, we can say that. I would also tell him to only use subtitles sometimes, but he has definitely incorporated these animations to match what I'm saying, right? the diagram, then here the references to the videos, then also the effect that I am moved into the corner and then disappear from the screen and then come back in here. Cloud edits the video based on the transcript and so on. So, this already looks really good for the first take, and now I can give feedback again and say, okay, change it around like this and like that. But as a basis, it's already really good, and I've perhaps given feedback two or three times, and in the end, this animation came out, which you already saw at the beginning, and we can now download it by going to Share at the top again and then clicking on Export as standard HTML. Cloud now generates an HTML file. We can then pass this to Cloud Code and render a video. This means we download it here, and here under my project Hook, I have simply placed this HTML file. Now I can reference it again with an "add." Add HTML. Here is the HTML file. Create a video from it now with Hyperframes, so that the animations are projected onto our cut webcam video. And now let's let Cloud do the rest. This took about 6 minutes to load, and let's look at the result. This video, which you are currently watching, I made without opening a single editing program. No After Effects, no Premiere, no CapCut. Nevertheless, it is cleanly edited with nice subtitles, a name overlay of myself, diagrams, references to previous videos, and so on. So it's simply the HTML that Cloud Design generated, overlaid on the video. And the timing also fits because we provided the exact timestamps. And that's how the video you saw in the introduction was created. And as I said, because the whole thing is based on HTML, we can also go to a website like 21st Death and now say, for example, okay, I want a shader animation for the beginning of the video. So, when the video starts, this should be displayed, and I can now simply copy the prompt directly for Cloud Code or even copy the code itself. And I will now simply copy the code. I would like to insert a beautiful shader animation at the beginning of the video, which I found on 21st Death, and I will paste the code here for you. And then I simply paste the code here that I just copied. A few minutes later, and we get this video. This video, which you are currently watching, I made, and with the shader effect. Whether that is sensible and looks good is debatable, but it is possible, I want to say. This means you can simply incorporate beautiful animations here and embed them in your videos. An important note at this point, it can of course happen that Cloud sometimes doesn't get it right the first time. In my case, for example, it generated the video in pink. It simply made a mistake with the shader. But I just showed it, I gave it a screenshot, and then it corrected it. What also works, by the way, is that you can also add audio to your videos that you generate with Hyperframes, for example. Before the video shoot, I had already done a test for the community website and generated a video, and I also told Cloud to add suitable audio. And then, without me telling it to, it checked Pixel Bay for no-copyright audios and embedded that in the video. And this is what resulted. M. So, mega good that it also understood that this type of background music fits this video. And that's basically it. You now have a complete AI-supported workflow with which you can create videos and animations for almost anything you can think of. Whether you need advertising videos for your product or learning videos for your online courses, content for Instagram, TikTok, or YouTube, or presentations and announcements for clients. Basically, everyone who regularly creates videos and no longer wants to spend hours in an editing program benefits from this. As I said, you can find the setup file in the Download Hub, link in the video description. If you liked the video, I would be very happy if you leave a like and subscribe. And if you want to delve deeper into the topic, you can of course also visit my community. Link in the video description. Thank you for watching, and I would say, see you next time. Until then.