Thanks HubSpot for sponsoring this video. So when we talk about hyperframe or remote type of AI generated per launch video, many people's impression are still those type of PowerPoint slides type of video that looks really boring and not interesting. But things actually changed dramatically for the past few months ever since model like fable was introduced and it went even further with the recent launch of GPD6 Astra.

Video editing capability just went out of roof. For example, I just feed this video I download from YouTube to Astra with hyperframe and with just one shot after 32 minutes and basically replicate this video pixel perfectly, which is absolutely insane because there's so many visual details to get it right. And I personally has been using Fable and Astra with Hyperframe to generate all those super high quality launch videos for my own product and it has reached over 1 million views with those AI generated product content.

And the most crazy example I personally experienced is this Fable 5.1 launch video for my product track. So my team literally just saw the Fable 5.1 release announcement during the morning and we decided to do a launch with this and we have around 4 hours to prepare the whole launch campaign including this high fidelity video that looks definitely not like a powerpoints plus a landing page like this that looks also again not vibe coded and everything prepared within 4 hours and we got more than 100k views on Twitter.

And this is a wake when my team start doing those type of video based launch and it really drives the growth of a product out the roof. So if you're building and distributing products, mastering your skills of making those launch videos with hyperframe or reotion is a must have skill that will give you huge amount of advantage. And this is what I want to talk about today. I'll talk you through how does those frameworks works and also make a video from scratch like this together so you can understand how I make it and what's my preferred workflow.

But before we dive into this, part of the reason we can generate amazing videos with frameworks like hyperframe is because modern harness like codeex or cloud code wrap the model with contest use and many other features to unleash mod's power. And there's probably a 10x difference between someone who just simply prompts the agent and hope for the best versus someone who fully utilize every single tip and tricks. And that's why I want to introduce you this free cloud code playbook I put together with HubSpot.

It covers core principles I use for prompting those agents as well as how I structure my agent.mmd and cloud.md and project contacts to make the most out of it as well as different hooks and guarios that put together to making sure my agent actually follow SOPs and how do I keep long running work on track with task state as well as different layers of setup for each project when I have so many parallel sessions running at the same time even including some of tips and learnings I got that allow me to cut the API bills by 70% % but still have the same quality output.

This is something I wish I had when I getting started. It's completely free. I put the link in the description below so you can go and check out and thanks HubSpot for sponsoring this video. Now let's get back to how to make those awesome hyperframe videos. So cool idea here is that we're going to make videos using HTML which is the thing that large model is really good at and this is possible because now we have new frameworks like hyperframe or remotion. before those frameworks show up.

The way human make video is in software like after effect and typically in those software the video is composite of layers effects key frames and automation is only possible by those editor's own API which model is not trained on top of it and more importantly there's no easy way for model to understand what our screen look like at at 1 minute 3 seconds and hyperframe team initially actually experimented using JSON or XML to introduce a data structure that model can output to describe a video but just the help model visualize and understand what does each frame look like and that makes model ineffective in terms of editing and modifying the video but things really change when they go down this HTML CSS and JavaScript route because model is really good at writing HTML.

So the way hyperframe works is that it allow you or model to express video timeline in HTML. So you can add those data composition ID and when does this part of video start how long the duration will be and wrap the actual visual under those diff so that model can still output the design in normal HTML and CSS and control the animation using JavaScript which means it can reuse animation library like gap to write animations but just bind the DOM elements to the video timelines.

So it became very easy for the model to be able to capture any frame at any given time and this at crux is what hyperframe or remote does and the only difference is that hyperframe is optimized for HTML, CSS and JavaScript versus remotion is designed for react and CSS. So both works but I personally found model is actually more creative or more free to design things in HTML. Also hyperframe comes with a whole bunch of different skills.

When you try to install the hyperframe skills, it probably feels pretty overwhelming because there are so many different skills. You might not know which one to use. But in short, there are two sets of skills that introduce. And one must install skill is just this hyperframes core. It talk about the core space of hyperframe and there's some related skills around it like hyperframe CRI, animations and key frames. And they also have this hyperframes registry which allow agent to search in a big library.

They provide for different view and animation components. And meanwhile they also provide a set of use case based skills that can be loaded on demand like product launch videos, faceless explainer, music to video, PR to video. For example, I just pointed to this website to video skills and ask it to make a video based on uber.com. And with just one prompt after 21 minute, it is able to make a video like this is fully unbranded animated on their core UI elements and user journey.

But even though you do this after you prompt it, we're still feels very much like a PowerPoint slides. A bit boring, not interesting. And this is what I want to show you next. Let's do step by step from scratch to make a launch video looks like this. Something from professional studio instead. Let's say I want to make a launch video for the track plugin that we just published for Codex. Then I will open up a new session in our ripple and give a prompt like we want to make a launch video of Codex plugin.

And here I specifically tell it don't look at our existing video for reference. So we can actually simulate what does it feel like when we make a video from scratch. Here I'm using the Astra high as a model as it is extremely good for video making. So you ask me this question. I actually do have a rough idea about the story line. So I give a prompt. We want to showcase real codeex app UI simulates a user journey from search and install plugin to try it out to showcase power.

So the first thing it did is actually propose me a kind of story line in text. And if I open it I can take a look. So codex plugin diretory cursor enters search type track makes sense and plug in detail install state codec composer select track using the captured apps actual control and actual progress two calls focus on search keyword social complete brief in the real response UI. Okay, this is pretty good except I do want to update the story line a little bit here.

The use case to showcase is more around like a search keyword, social, which is a good use case. But one use case that I want to emphasize more is this people search use case that we launched on Twitter this week and it got viral. So I want to double down on this messaging and use case. So I tell you the story line looks good and we want to show both SEO and social. But let's start with a people search use case as a hero and we did a product launch here as a reference.

You can use track to actually get more context from this because we have pretty good social scraping out of box. The agent actually go and find our specific page route as well for that people search to get more context which is pretty good. So it took it like 2 minutes and the story line looks pretty good now. um except there are few other points that sometime I wanted to talk about like a few key point that we've been emphasized on previous video is with track you don't need to pay subscription this no contract we literally combine all the service and turn them into usage based pricing so that's like one big part and second one is that uh le enrichment is just one type of use case we actually uh have more so those are like important message that I want to get across and so I would just give a pro a few feedback there are some core value proposition message I want to get across.

One is with track you don't pay for subscription, you just pay for usage uh with sense per coin instead of very expensive subscriptions. Uh and second one is that we support many use cases like 2,800 different data and tools. So we want to get a scen to showcasing the crazy amount of vendors we have. And third is that track also ranked number one people search bench. So basically we are the best people finder for agents based on the testings.

So I want to also include that messaging and also like in our last launch people asking whether we can get phone number and we actually can in fact we can get phone number from just 0.044. So I will give those feedback to you and ask it to tweak the story line and the one thing here is that I know based on my experience normally the video making is a creative iteration process which means even though we define the story line here now after we produce it we might realize that we want to shift things around to make things feel better.

The benefit of hyperframe is that even though you get maybe one minute video, the whole video will be broken down into different compositions which means actually very easy to shuffle the order. All right, so you update the story line, people search prospect table, can you find the phone numbers too, benchmark proof, scene review, vendor explosion, SEO demo, social demo. Okay, makes sense. The last thing is that I want to end with our tagline which is open router for data and tools.

Now I'm fairly happy with the story line. So I'm just going to ask it to go ahead and let's do next. You can see what it did next is actually creating this story line for me. And now you can like give feedback for each frame. And at this point probably no need to focus on the detailed visual but more like focusing on two things. One is the overall layout of the screen and the second one is the copies and you can give feedback on every single frame. then you can just click on this button to copy the prompt and paste back.

So I'm going to do that one by one and here is where I think at you as founder or marketers paste actually comes in um because at default even with model like uh Astro it still tend to make PowerPoint slice type of videos out of box but if you give the right context and guidance it can make amazing things. So I'm going to do that one by one. Like for the first one, I said I don't like this PowerPoint type of layout. Also, I don't like the find your next customer's text on the left since it kind of anchor track to only that use case even though that's important, but I don't want to do that.

And also, let's start with the codeex macap UI then searching stop plugin. We will figure out the beginning later. So, this is like what I tend to do when I make a video. I try to making sure the crux of the story line good and later work out like how the first one second intro should look like and how the end should look like. For second one I would say looks fine but make sure the UI is pixel perfect with real codeex Mac app UI.

And unfortunately I can't paste image here. Hopefully they add that later but I'm going to add that image screenshot in the chat. And this one I give feedback like the translation of the whole video should stay in real code session so it looks like a real demo. And after the second thing of install plugin, it should translate to real codeex macap UI focus on the promp box. So typing out query also make query short because people's attention span is extremely short.

So I always prompt agent to basically simplify like a lot of work on video making it just simplify what's showing on the screen because for example in this one I think the text is too long and then go to next and this one again the whole video should be a continuous codeex code session so everything just show in the chat session however you can zoom in and out after getting the first table and show the phone number promise followup and there's one thing I forgot to ask it to show showcase which is One key part of track is because we connect so many different leads and contact database.

We do a waterfall matching which means user can get results the cheapest possible way with the best coverage. So showcase this maybe after agent receives a prompt track list all the vendors with matching endpoint and price then scan choose the right vendor and people search proof. I don't like the layout at all. I really don't understand the number it putting here. And for this demo purpose, I'm purposely didn't reference any of the past videos I made.

But the beauty of hyperframe is because everything is in code. If I open files, you can see all my past launch videos are just a folder. And each folder, let's say if I go to enrichment launch, it has compositions folder. And this composition folders is including HML of every single page. And each HTML files in that folders is pretty much a video clips like this. So technically I can just point the agent to one of those pass frame and say hey just reuse that.

So everything is actually quite reusable but just for our demo purpose I'm not going to do that. I will just build from scratch to simulate. So for the people search proof I just give a prompt. Let's start with compare cloud code score versus cloud code plus track score on B2B data bench and you can reference data from our website which actually have the comparison data already and then magic translate to show benchmark of all four categories.

So I wanted to show on B2B perspective first since that's probably the most common scenario and then translate to showing all of them in terms of recruiting influencer finding things like that. And for this one I will give it more detailed prompt. So here you can see that I'm prompting it in a way uh saying we want to center big tax show no subscription wait no contract wait and you line and pay for results only. So this is my way of prompting to get thing like this.

No subure, no contract, wait and zoom out, show vendors and show price. And I found this is actually pretty effective way of explaining what you want. And then zoom out and move the header text up. Show the rest of things. Left shows vendor price. Right side shows track price. And I want to show like dollar based on instead of cents to bring some more contrast. And this one is all right. Okay. So I already given like a whole bunch of feedback.

And I actually tend to not giving way too much feedback in one go. So I'm just going to click save and copy message and paste here. I can read the storyboard feedback I save in hyperframe frame commands.json. So if I open that folder codeex plugin hyperframes they have this JSON that actually log all the feedback that we made uh bind to the context. So it's pretty easy way to give feedback. So now you can see it's been like 13 minutes to process feedback and basically rebuild most of the pages based on our feedback and there are more things I will just go back and forth like this one initially just show cloud code versus code cloud code plus track because it's easier for people to consume but after that can show all competitions in four category it should include all results like XAR let's see and this one no subscription no contracts in the same line and also show a lot more vendors on the left side here I want to try something like let's update the out in codeex chat which track plus uh vendors it is chosen which is what you have now and on the right side it open a window show a Google sheet or CRM type UI we seeing results of contacts just flaw in all I will copy and send again this time it got like story layout out more or less what I want then I'll just approve it.

You can either copy this button which will basically send this message approve the storyboard sketch and continue to animation or you can just tell it I approve it. So now you can see that it actually generate one version of videos and if I make it bigger and play it you can see actually start animate this video based on the wireframe. Even though some parts you can tell that it is not correct like the UI of this smack app doesn't look like real codeex app at all but this is stage for you to align with hyperframe about whether the animation actually looks correct and give feedback and same thing we can go back to storyboard and give feedback frame by frame and what I tend to do is normally at this point what do we have is a story line and each scene in story line is animated so technically we can just ask codeex to make edit is scene by scene.

So you can spend more token or attention on individual things which will normally lead to higher quality. So what I'm going to do next is let's just update the first few things first to making sure it looks exactly like the real codeex app interface. So here I'm saying that next let's update 01 discovery and 02 install to making sure we mimic 100% pixel perfect codeex app UI to make it almost look like a real codeex demo.

And I'm also going to add plug-in UI as well. It is still working but you can see that it actually turned that image into pixel perfect UI replication which is absolutely amazing because it looks exactly same. I'm also going to just prompt here can you add a background where the codeex app is shown. So it almost looks like a screen studio recording. All right. So now you can see it has this background and try to play it.

It will be on this real codeex app looking interface and it is mimicking the search. uh click on try uh and then go to next screen which is not uh exactly a good-looking one but this is good enough. I'm just going to like back and forth uh fine tune a little bit because I think it's important for you to get the first few screen right to set a standard and the style for the following things. I give you further uh feedback like after click plugin try type to search click on plugin things like that it should all zoom in camera so we have more clear focus because at moment might be difficult to see what is happening so I'm just going to send it all right with this feedback and I play again then have this zooming effect uh that looks like a real recording but I'm not too big fan of this transition like search jumping to this zoom out and zooming again I want it to you know just be faster just tell you currently after we get into pluging in detail page if first they zoom out and then zoom in to uh click try it and I think this motion is not necessary remove it just keep the same zoom in scale so zooming scale is kind of word you can use to tell it basically keep zooming scale and just move camera position okay right now if we play again it should stay on the scale here and just go click try now immediately so you can see this process we're doing where we just get back and forth and give feedback once you get the model's attention on just one or two seams, it can do extremely good job.

So after this, the process is pretty much the same. We just going to repeat this back and forth composite by composite. And the good thing is that because we already set up the standard for the first two compositions, we can just tell it to do the same to apply same UI treatment for the next few scenes. And again, I try to do composition by composition so you can achieve the best quality. So I would say great next let's update 03 composation for people.

There's one feedback I understand which is um currently after showing the result. There's a weird zooming animation in the end and we don't need it and it just makes the time stall on the last frame a bit shorter. Okay, for some reason it is not applying the UI updates. It just made some change on the zoom level. Um so I'm going to prompt it to make a change. So it made a new version for the composition 3 which looks something like this.

It's not bad like the UI already looks very high fidelity though I have a few feedback I want to give. So I'm typing out more detailed feedback like firstly the zooming level for the prompt input can be a bit more so text will be bigger and also remove the toolbar above which is this one and also full access to remove the visual clutter a bit because I think one part about this launch video is people's attention span is very short so you want to making sure there are less elements as much as possible and after click send it should move camera up we should see the new message pop up and then the track to also pop up with more detail animation Uh cuz currently after it send uh it just slightly zoom out and I can't really see the details here.

Um so I want it to add a bit more um detailed information here. So I click send. All right. So it got a new version and let's take a look. So it's actually not bad but I'm going to uh make some tweets. So once making sure you show real logo for each vendor and second is let's do step by step. So firstly track show up with some loading state then vendor popping up then after choosing the right vendor instead of zoom out maybe move the camera to the right side so more clearly we can see the contacts popping out and each contact maybe add a real profile picture and also I'm going to send a second piece of feedback lab.

We want to show an action card of Google sheet after vendor list and showing it is fetching and saving results to Google sheet. The same card that you use in chat just show up with loading state while we're popping out results for the Google sheet. So basically after vendor is chosen action card show popping up so users understand it is fetching and saving results. Then move camera to the right side and same results popping up.

All right. Okay. So we got new version. Let's see it again. Let's I like the loading state and now also it shows Google sheet. Then on the right side everything pop up. So it feels like a lot easier to follow. One thing I want to mention like actually the model plus hyperframe at moment is actually capable of doing really high quality things. So the quality of video is a lot about your attention to details. For example to be more clear like all those email are made up.

So I'm going to talk about it uh like while we popping up the content. It should first they show name real company this race and the work email column should show fashion with different vendors. So viewers can tell it look like waterfall fetching for verified email and it is happen simultaneously for each contact. So it is all those little detail to make your video actually representing the core value of your product.

Okay. So now we get a new version. Let's play again. Cool. So I'm pretty happy with this one and I'm just going to ask it to replicate for the next scene as well. Let's do composition 4 with same quality and UI treatment which looks something like this at moment and uh we will see what kind of result we get after we update. All right. So just made update for the uh composition 4 as well and you can see because we set the quality for one two three really well the scene number four almost just one shot get a really good result.

It follow all the patterns that we defined earlier. Uh then it is moving the camera to the right and the whole thing is really high quality. Um then I'm going to do next which is this uh prove screen. Um and again I just have like lots of detailed feedback and guidance about the visual. So firstly the visual looks bad just align quality we have on the one to four composition and also start frame with big header text in the middle with Apple Nike ad type motion and camera movement. uh first they focusing on most accurate weight people finder weight new line for agents then show codeex cloud code open claw her logo and uh um I point to loop hub so loop hub is just a open source package that has uh almost all the logo of major AI provider and harness and then translate to this people search bench of B2B perspecting where cloud initially show 43% with a bar chart then cloud plus track reaching 78% almost double the amount and again using the bar chart to contrast then show the four charts with nice translation.

Okay, so after a few rounds of uh iteration back and forth u probably for uh like one and a half hours I got a version that I'm like pretty happy with. It has all the animation the story line is correct. Um it showcase the core features that um our product actually offer which is you know connect to also different um systems and uh you can do waterfall uh to routing through different providers so that you can get the data or information you need with the cheapest pos possible price.

Um and uh you can see all the animation like feels actually pretty smooth um and tells the story right. Um the coursing here is really you just need to spend time um to update the details u frame by frame. So I'm pretty happy with this one. Uh and lastly let's just add some music. So I prompt it next I want to choose some music. H actually comes with a quite big music library.