Big Idea

The argument in one line.

HyperFrames reframes video editing as a code generation task, letting an AI agent write and render HTML into a local MP4 without the user ever touching a timeline.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You want to produce captioned, motion-graphics video without learning editing software or dragging clips on a timeline.
You already use Claude Code or Codex for development and want to extend that same workflow into video production.
You are comparing open-source, locally-rendered video tools against subscription editors and want an honest cost breakdown.
You have a flat-rate Claude Max or Codex subscription and want to understand how much video production that actually buys you.

SKIP IF…

You need frame-precise broadcast output; HyperFrames has specific rendering quirks that matter at high quality thresholds.
You have no AI model subscription -- the HyperFrames tool is free, but the agent that drives it is not.

TL;DR

The full version, fast.

HyperFrames converts video editing into a code generation problem: describe your video in natural language, and an AI agent writes HTML that renders into a local MP4 -- nothing leaves your machine except the prompts. The workflow follows a fixed five-step loop (init, author HTML, live preview, lint/validate, render) and works with Claude, Codex, or any model with sufficient context. Five full production sessions ran roughly one million combined tokens at an estimated fifteen to eighteen dollars in API cost, or effectively free on a flat-rate Claude Max plan. Token cost drops sharply once you have reusable HTML templates. The five common beginner mistakes are animating video dimensions directly, calling video.play() in scripts, mismatching timeline length against source length, omitting class=clip on elements, and overusing backdrop-filter blur.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:00

01 · Intro (HyperFrames-built)

AI-generated intro runs as hook; host reveals tool is free and open-source, crosses 30k GitHub stars.

01:00 – 02:30

02 · What HyperFrames Actually Is

Core concept: video is code. AI writes HTML. HyperFrames renders locally into MP4. Works with Claude, Codex, GLM 5.2, GPT 5.5. Apache 2.0, free.

02:30 – 03:45

03 · Install + Clone My Workspace

Screenshot the install slide, paste into Claude Code. Requires Node 22 and FFmpeg. Host shares his GitHub workspace repo for cloning.

03:45 – 05:30

04 · The Workflow Loop

Five-step dev loop: init/doctor, author HTML, live preview gate, lint + validate, final render. Nothing leaves your machine.

05:30 – 12:30

05 · Live Video Creation with Claude Code

Single-prompt Claude Code vs. Codex comparison video: research, scaffold, TTS via HeyGen, preview, draft render, frame verify, final render. 88s video, 200k tokens, 3-4 min render.

12:30 – 18:20

06 · Three More Examples

Product launch video from raw talking-head footage (228k tokens, 90% one prompt); TikTok music-to-video (285k tokens); website-to-video via Playwright + /goal.

18:20 – 19:30

07 · Token Transparency

Five examples = ~1M tokens total. API estimate: $15-18. On Claude Max flat-rate: effectively free. Templates reduce per-video cost.

19:30 – 21:00

08 · Five Beginner Mistakes

Animating video height/width; calling video.play(); duration mismatch; missing class=clip; overusing backdrop-filter blur.

21:00 – 21:45

09 · Outro + CTA

CTA for free school community AI Automation Nexus, resource guide, and GitHub workspace clone link.

21:45 – 23:34

10 · Blessing

Personal prayer segment for the audience.

Atomic Insights

Lines worth screenshotting.

HyperFrames renders 100% locally -- the only data that leaves your machine is the prompts sent to the AI model.
An 88-second edited video with motion graphics, TTS narration, and background music costs roughly 200,000 tokens and 3-4 minutes of render time.
Five complete production sessions totaling about one million tokens cost an estimated $15-18 at API pricing -- or effectively zero on a flat-rate Claude Max plan.
Template reuse is the biggest token multiplier: building from an existing HTML base instead of generating from scratch can cut per-video token cost by half or more.
Every video element in HyperFrames must carry class=clip; omitting it on any single element breaks the entire render with no warning.
HyperFrames controls playback via frame-seeking; calling video.play() inside a script overrides the engine and produces unpredictable render failures.
The duration trap: timeline clip length and source file length are not the same, and a mismatch produces frozen frames and choppy video.
Backdrop-filter blur is the single most expensive CSS property in HyperFrames -- overusing it tanks render performance faster than any other mistake.
The preview gate runs as a localhost timeline editor before final render; you can make manual tweaks there without burning additional generation tokens.
Once the Opus 4.8 context window passes about 250k tokens in a session, clearing and restarting is more reliable than pushing through degraded model attention.
The website-to-video skill uses Playwright to screenshot a live URL and pull all visual assets automatically -- no manual asset gathering required.
A product launch video built from raw talking-head footage was 90% complete in a single prompt.

Takeaway

Video editing is now a prompt problem, not a skill problem.

WHAT TO LEARN

When the output is HTML and the renderer is local, the bottleneck shifts from editing skill to prompt clarity -- and that changes who can make professional-looking video.

02What HyperFrames Actually Is

HyperFrames abstracts video editing into HTML authoring -- you describe scenes in natural language, the agent writes the markup, the renderer produces an MP4.
The tool is Apache 2.0 and renders locally; the only recurring cost is the AI subscription you already pay for coding work.

03Install + Clone My Workspace

Installation can be delegated entirely to the AI agent by screenshotting the install command and pasting it into Claude Code -- no terminal knowledge required.
Cloning a pre-built workspace from GitHub skips the first-video scaffolding cost and lets you start prompting immediately.

04The Workflow Loop

The five-step dev loop mirrors software CI/CD: init, author, live preview, lint/validate, render -- and the preview gate catches problems before they waste render time.
Nothing in the loop sends your video data externally; only the text prompts leave your machine.

05Live Video Creation with Claude Code

A complete 88-second video with motion graphics, TTS, and background music was generated from a single natural-language prompt and rendered in under 4 minutes.
The AI agent handles research, asset gathering, script writing, TTS generation, and HTML authoring autonomously -- the only human input was the initial description and a style redirect.
Draft render followed by frame verification is a two-stage quality gate: the model reviews screenshots of key frames before the final render commits.

06Three More Examples

A product launch video from raw talking-head footage was 90% complete in one prompt; the remaining 10% was minor fine-tuning.
The music-to-video skill generates a background track from a concept description and pulls images from an AI image generator -- no assets needed upfront.
The website-to-video skill uses Playwright to screenshot a live URL and pull all visual assets automatically, then builds a storyboard and script from what it finds.

07Token Transparency

Five complete production sessions totaled roughly one million tokens -- estimated at $15-18 in direct API cost, or free on a flat-rate Claude Max plan.
Token cost per video drops significantly once you have reusable HTML templates; the first video from scratch is the most expensive by far.

08Five Beginner Mistakes

Animating video dimensions directly, calling video.play(), and mismatching timeline/source durations are the three mistakes most likely to produce a broken or frozen render.
Missing class=clip on any single element silently breaks the entire render -- treat it as a required attribute in every template.
Backdrop-filter blur is the most computationally expensive CSS property in HyperFrames; use it once per video at most.

Resources

Things they pointed at.

00:00toolHyperFrames ↗

03:15toolStarter workspace repo (nateherkai) ↗

11:30toolHeyGen (TTS) ↗

14:35toolkey.ai (image generation)

16:40toolPlaywright (asset scraping)

00:00toolGlaido (voice) ↗

00:00toolOllama ↗

00:00linkDeep Rooted AI ↗

00:00linkAI Automation Nexus (free school community) ↗

Quotables

Lines you could clip.

01:09

“HyperFrames turns video into code.”

Shortest possible summary of the value proposition -- five words, no setup needed→ TikTok hook↗ Tweet quote

04:57

“None of that entire process leaves your machine. The only thing that is leaving your machine is the prompts that you are sending to Claude code.”

Privacy/ownership claim that resonates with self-hosting audience; stands alone→ IG reel cold open↗ Tweet quote

17:52

“The first time that you guys use this, if you create videos from scratch, you are going to burn through tokens. But after you get over that hump, you will be able to create videos for significantly less tokens.”

Honest admission followed by promise -- rare in AI tool tutorials→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphoranalogy

00:00This video will be your one-stop shop on how to use HyperFrames alongside Claude code. Everything that you're seeing on screen right now, the captions, the motion graphics, how the camera is able to move around, I didn't touch any of it. I never opened a timeline, I never dragged a single clip.

00:13My AI agent did this completely for me, and all I had to do was talk in natural language. And the tool that did it is completely free and open source. That open source project is called HyperFrames. [music] It just crossed 30,000 stars on GitHub, and it basically turns video editing into something Claude code can do completely from scratch.

00:28So, here's a simple plan for today's video. I'm going to explain to you what HyperFrames actually is.

00:32We're going to install it together, and I'm going to hand you my exact workspace. You are going to make your first HyperFrames video from start to finish. I'm going to be completely transparent with you on what this costs, and we're going to cover the five mistakes that every beginner faces when first starting with HyperFrames.

00:45Along the way, I'm going to break down three videos that I created so you can see exactly what this HyperFrames plus Claude code combo is capable of. By the end of this video, you'll have your own setup and have your first ever AI edited video. So, get comfortable, grab some coffee, and let's hop straight into the video.

00:59That entire intro video that you watched cost me 260,000 tokens across five different prompts. So, you will definitely be able to get some value from this, whether you're on the 20, 100, or $200 a month max Claude plan.

01:09And it doesn't have to be Claude, this works with Codex and any other agentic harness as well. So, first things first, what actually is HyperFrames? The simplest way that I can put it is that HyperFrames turns video into code.

01:19Instead of opening up an editor and dragging your clips on and off the timeline, all you do is ask your agent to write simple HTML. HyperFrames will then take that HTML and render out a video. It's that straightforward.

01:28You describe the video you want in natural language, Claude code will then write out the HTML code and render that to a video. And the best part is is that you're not doing anything. You're not writing any of the code, you don't need to know any HTML.

01:39You just need to be able to describe exactly what you want. And even if you don't get it right on the first try, you could just continue making iterations. So, if you don't know much about video editing and the terminology like I do, then it's really easy for you to just kind of throw words out there, and Opus 4.8 especially will know exactly what you're talking about.

01:54Now, it doesn't have to be Opus 4.8, it could be GLM 5.2, the new open source model that's killing it right now. GPT 5.5 Pro. It could even be Sonnet.

02:00You just need to be careful with the models that have a smaller context window. Now, why this matters for you and why you're actually watching this video is that HyperFrames is completely open source. It just crossed 30,000 stars on GitHub.

02:11It's Apache 2.0 licensed and it renders 100% locally on your machine. The tool is completely free. There's no per rendering fee, there's no subscription, nothing.

02:20And when I say free, I mean the open source project is free. To actually run it and to get content and to make videos, you will be using some sort of AI model subscription, whether that's ChatGPT, direct API costs, or Claude. We're going to get into that a little bit later.

02:33First, we got to help you get it set up. Getting this installed is as easy as literally taking a screenshot of this. I'll give you guys a second.

02:39Take a screenshot of this, upload it into your Claude code agent, and it'll walk you through the entire install and you'll be good to go. I could show you how to do it in the terminal, but it would just be a waste of your guys' time because you don't need to do it yourself. Just have your Claude code agent or your Codex agent help you out.

02:51This install will help you add all the necessary skills and it'll download the two requirements that you need, which you probably already have already, and that's Node 22 and FFmpeg. Now, if you wanted to do this manually, this is the official install command. If you use the screenshot method that I showed you before, it'll just do it for you, but this is the official command if you want to do it yourself.

03:07And when you run that, it'll walk you through kind of step-by-step everything that you need to do. It'll walk you through picking a core group of skills, whether you want to install it globally or on the project level, and other things like that. It takes about 3 minutes to set up in total.

03:18But I obviously don't want to just tell you guys how to install it and how to clone a repo. I'm actually going to be providing you my exact setup on GitHub.

03:24All you'll need to do is go to the GitHub link down in the description and just clone my exact repo. I'll have everything set up for you nicely so you can just kind of just dive in and get to work. Keep in mind that'll be after you install HyperFrames in a project, then just clone this repo into that project.

03:37And if you wanted to follow along with me in this video, then you can go ahead and do that right now and then come back. Now that your workspace is ready, let's make an actual video from start to finish. So, what you're looking at is the core loop.

03:46And once you understand how this works, you'll be able to make your first video today. Everything after understanding this core idea is just leveling up. So, here's the entire flow.

03:52The first thing you do is initialize the project. You'll run hyperframes doctor and that'll check if everything is installed and you have all the requirements so you can run this flawlessly. We're just simply making sure the environment is healthy before building anything so you don't have any hiccups.

04:05The second thing that you're going to do is author the HTML. If I hop into one of my examples right here, that simply means the index.html and all the compositions. This is the point where your natural language prompt goes to Claude code and Claude code begins writing out these HTMLs.

04:16You don't actually write these at all. And depending on what kind of workflow you're running a ton of different skills in here, you'll get a live preview gate.

04:23That'll spawn a locally hosted preview server where you can hop in and actually change edits and actually get a preview of the entire video. You're going to see exactly what I mean when we go through this process together. Then before you run any sort of render, you're first going to approve what's inside of the preview gate.

04:37Then the agent is going to lint and validate everything inside of that video. The lint checks the video structure, validates any runtime errors and missing assets because when you first start using this, adding things like logos, it kind of gets a little bit frustrating, but you'll get the hang of it very quickly. The lint and validation process both catch different problems.

04:52If you decide to skip this step and there actually is an error in your video, your render will completely fail. Which leads us into the final step, which is actually rendering out the video and getting a final MP4. And none of that entire process leaves your machine.

05:03The only thing that's leaving your machine is the prompts that you're sending to Claude code because it's going to the Claude cloud, obviously. And this is essentially how every single video that you create will go. It'll go through this exact loop except that not always will you need to use this init and doctor.

05:16This is really only for the first time that you create a video in the project. If you guys clone the repo that I'm providing for you for completely free, you will not have to do this first step. You'll be able to just hop into Claude code and start speaking away and creating videos.

05:28Now, let's actually cook up a live video together. All right, so we're simply just going to create a video together. All I'm going to do is type in {slash} hyperframes and I'm just going to brainstorm something that I just completely thought of randomly while recording and then we're going to see this entire process kick off.

05:42I need you to create a video for me comparing Claude code to Codex. I want you to go do research, find out the top five things that I need to know about the differences between the two harnesses, and then I want you to make an HTML video of that. I want motion graphics.

05:55I want both the CodeX and CloudCode logo in the actual video. Throw in some motion graphics, throw in some captions, and screw it, even throw in some TTS on there so I can walk through the entire thing. Let's get cooking.

06:04So, I'm just going to go ahead and send this off, and we're going to go through the entire process together step-by-step. I'm going to try and cut out whatever I don't need in there because I don't want to waste you guys' time, and then we're going to get the final result of the video. Okay, so we're at the point where the video is in its preview stage.

06:18I want to quickly recap everything that's happened before we get into the preview stage. So, the first thing the agent did was capture all the research that we asked it to do. It came up with the five topics that it's actually going to talk about inside of the video.

06:28I then threw a prompt in there telling it I didn't want it to follow our kind of deep-rooted style, and I wanted it to surprise me. So, it went ahead and did that as well. Then scaffolded the entire project and checked the logo colors so it could treat them on a dark-style theme.

06:41And on the left-hand side here, you can see the entire project scaffold. So, we have the assets, the beats, compositions, renders, the actual scripts that it created because remember we added some TTS. We have audio JSONs, the hyperframes JSON, the design MD, and even the index HTML, which is us authoring the HTML, which we talked about inside of that loop.

06:56It then itself went and grabbed all the assets for the video. It then completed the TTS, which is 88 seconds of narration from the HeyGen voices. It's probably not going to sound the best.

07:04It would have probably sounded much better if we decided to go with an 11 Labs voice, but for the sake of this video, we didn't want to do all that, so we're going to go with the HeyGen voice. It then also added some sort of BGM track. I'm going to assume that's some sort of music, which is great.

07:17It then ran the lint and validate step before the actual preview process, which is something that I haven't experienced before, so maybe that's something new because they update this repo all the time. So, they linted and validated all the index HTML and everything else prior to the preview stage, which is awesome.

07:30It ended up finding some issues and fixed those issues, and that brings us to the point where we're going to hop into the preview stage. This is exactly what the preview stage looks like. It looks like any other video editor that you've ever been inside of.

07:41You can go ahead and move this and scroll through here and see all the beats, all the actual transcription, the sound at the bottom, and the music. And you could actually go through here and edit things yourself. I am not going to do that.

07:50Well, let's go ahead and play through this entire video. This was all one-shotted in a prompt, so I didn't make any other edits besides telling it to change the kind of style direction.

07:58I'm going to let the whole thing run, so if you're not interested in that, go ahead and just skip ahead into the video. >> Claude Code versus Codex. Two of the best AI coding tools out there.

08:09Here are five things you actually need to know before you pick one. Number one, where they run. Claude Code lives right in your terminal, working on your real files.

08:21Codex was built cloud first. It spins up its own sandbox and opens a pull request while you go do something else. Number two, context.

08:31Claude Code's Opus model can read up to 1 million tokens at once. Codex gives you around 200,000. For big refactors, that gap really matters.

08:43Number three, open versus closed. Codex's command line tool is fully open source, so you can crack it open and tweak it. Claude Code stays closed, but it trades that for deeper built-in customization.

08:58Number four, extensibility. Both speak MCP now. Claude Code goes deeper with hooks, sub-agents, and skills.

09:07Codex leans on its open ecosystem and parallel cloud agents. Number five, the benchmarks are basically a coin flip. On SweeBench, they land within a hair of each other.

09:20So, the real choice isn't raw power. It's which [music] workflow fits how you build. Both of these are incredible.

09:29Pick the one that matches your flow. AI made simple. I'll catch you in the next one.

09:37>> And okay, I'm actually really impressed. I feel like these get better every single time that I do them. The one thing that I will say is I don't know how accurate that information was.

09:45The next time I would do this, I would definitely run some sort of more rigorous research getting notebook LM in there and actually get some concise things because a lot of the stuff that I saw about Codex isn't actually true. Or it might be true, but there's a lot of inaccuracies there. Usually at this point in my workflow, typically when I like the video and I've previewed it and I think everything is clean, I just hop straight to the final render save some time.

10:03But in this case, I'm going to go ahead and go through the whole process. So I'm actually going to do a draft render. It's going to verify all the frames, verify everything is smooth, and then it'll do a final render.

10:12You'll also notice here that it says final render at workers three. The more workers you have, the faster it'll actually render, but also keep in mind that the more workers you have, the more it takes on your GPU. So if you're doing multiple different tasks while rendering a video with a lot of workers, just know that your computer will slow down because it's using a lot of the GPU.

10:29I've experienced this when recording. It'll cut my video up and it'll mess it up because it's using so much compute. So I typically keep it to about three workers.

10:35Sometimes if I know I'm not doing anything or if I'm going for a walk, I'll kick it up to like 12. But just know that if you're at 12, your computer will be very, very slow if you're trying to do anything else. So let's quickly go ahead and run the draft and then have it frame verify and then kick off the final render.

10:48Go ahead and run the draft and then do the frame verification. Send that off and I'll show you guys kind of what that looks like when it's done. The render completed an 88-second video took about 3 to 4 minutes to completely render.

10:57Then it hopped straight into pulling the frames, which by pulling the frames, what it's actually doing is going into the key frames and the key segments of the video and pulling in multiple screenshots. Opus 4.8 is actually really good at seeing, so when it's screenshotting these images, it can verify that everything is how it should be.

11:11It then verified all seven scenes. It has the full timeline. There's no cherry-picking.

11:14It went through every single one of these. It says the draft is clean, serving it to you at gate two scrub. So now we're going to hop into the preview again.

11:20We're not going to do that because I don't want to make you guys watch the entire video again, but just know that that's how that's kind of works. Then you can go and see the real-time motion, the audio sync before the actual final render. At this point, we're satisfied.

11:31We're going to go straight to the final render. This is the actual video that you would upload into something like CapCut if this was just a clip of your video, which is typically what I do. I still use CapCut to this day.

11:40Or you could just upload this directly to YouTube. Go ahead and run the final render.

11:43Once this entire process is done, we'll have our final clip and we're good to go. And so, the final render is done. We have our output.

11:49We have our 19 by 20 by 1080 60 FPS video, seven scenes, and we can go ahead and click right here on the final MP4 and actually watch our video inside of VS Code. So, I could go ahead and click on this to play. It'll play the entire video.

11:59Sound is off inside of VS Code, which is great cuz I don't want you guys to listen to it again, but it's very smooth. And if you've been following along with me at this point, then congratulations. You've created your first video with HyperFrames, and you've got so many more to go.

12:12And that entire process from start to finish cost us about 200,000 tokens in total using Opus 4.8 on max effort. And just keep in mind when you're using Opus 4.8 max effort, as soon as this context window hits about 250,000, it's a good time to actually clear the session.

12:23Just because you have a million context window doesn't actually mean that you have a million context. Anyways, now that you actually know how to create a video with HyperFrames, I want to show you a few examples of what I built for this video so you guys can see and maybe get some inspiration. We're going to be covering a school community video, a launch video with my face, and a music video that I created in 9 by 16 aspect ratio.

12:42If you don't know what that means, I did it in TikTok format. Okay, so for the first example, I actually wanted to use one of these skills that's inside of this HyperFrames repo, and that's the product launch video skill. I used it to help me create a product launch promo for AI operating systems from my company Deep Rooted AI.

12:56So, what you're looking at here is the entire prompt that I gave the agent. And right here, I'm scrubbing through it really quickly. It's just a raw video that I gave it of me talking to the camera with some music added.

13:05Once that prompt was sent off, it launched that product video launch skill. It went and got the actual raw footage of me. It transcribed it.

13:12It pulled the audio out of it. It re-encoded the video so I could actually make edits to it. And then it just started going to work.

13:18It then realized it didn't need any TTS because I actually had a whole entire transcript in there. So, then it created all the beats, and then it went to generating the video. And then here we go.

13:27We have this entire loop in place once again. We're going to scaffold the project, we're going to author the composition index, lint and frame verify, then go to Gate 1 Studio preview, and then final render. So, like I said, every single video it kind of follows this exact loop.

13:40It then went through a ton of loop verification. I went through the frames. I actually made a few edits myself.

13:45And then once we were done, the final MP4 was rendered, and this is what it looks like. Right now, most businesses are just duct taping 10 AI tools together. None of them talk to each other, none of them remember what you did yesterday.

13:55An AI operating system fixes that. It's one connected system that runs your entire business and knows everything about you. It holds your contacts, it automates the busy work, and it gives you one single place to operate from.

14:05Instead of bouncing around between 15 different tabs, you've got a second brain that already knows your business and does the work alongside you. That's what I can help you with at Deep Rooted AI. If you want to get one of these set up, head over to deeprooted.io and let's get to building.

14:18And what's important for me to know is that 90% of that video was completed in one prompt. Then I did like three other prompts kind of fine-tuning some things because of my OCD, and I got to that result. I didn't want to spend any more time on it.

14:28I obviously know that it's not perfect and there's so many more things that I could add, but I just want you guys to understand that with a very minimal amount of effort, you can get so much done and make these videos actually look incredible. And that entire process only took 228,000 tokens using Cloud Opus 4.8 on Mac. And hopefully you're starting to see that if you're set up properly and you're doing these the right way, that you can actually maximize your $20 a month Cloud subscription a ton.

14:50Now, let's hop into the next example where we use the music to video skill to make a portrait 9 by 16 video in TikTok style about the importance of focus. What this skill does is it generates a track based on the idea of your video. So, right away it invokes the music to video skill, it begins to work through what it needs brand asset wise, and check whether I dropped any images or if it needed to design them.

15:10In this case, I didn't drop any in, so it used key.ai to actually generate the images. It then went through that five loop process, installed whatever it needed to do, it created the audio map for the actual video, it set the track to 30 seconds, it gave me the entire plan, which I had to approve.

15:25So, this was a deep focus video. It had a generated a calm minimal low-fi deep music track. It followed the deep-rooted brand.

15:31There was four total beats with all the text and the images in the background. I approved it, and then it went to work. It went through that entire process that we've already gone through a few times now, and then at the end we got this result.

15:43>> [music] [music] >> Again, nothing crazy. Like this isn't some sort of impressive or wild demo, but it's just to show you what you actually can do and create these videos directly from natural language.

16:14Like everything you saw on the screen right there, my AI agent did completely by itself. That one because it added the background music and generated some images cost a little bit more. This entire process cost us about 285,000 tokens using Opus 4.8 on Max.

16:26And then for the last example, I wanted to see what would happen if we gave HyperFrames a goal using the Claude code {slash} goal feature. And then I kind of brain dumped exactly what I wanted, which is just a short promo video for my school community. Once I sent that prompt off, it immediately invoked the website to video skill.

16:41It then went and used Playwright to get screenshots of the whole entire school community page and get all the images that it needed to actually render up the entire video. There was a moment I had to step in because I actually forgot my password, so I couldn't authenticate the Playwright agent.

16:54But after that, it was smooth sailing. It got all the screenshots that it needed. It created the full storyboard along with the script.

17:00It scaffolded the entire project, created the video, and this was the final result. >> Want to learn AI automation for free? This is AI Automation Nexus, my community where I teach you to actually build with AI.

17:12Inside, a full classroom of free templates, end-to-end workflows, and tutorials. Real builders, real posts, over 240 members growing together, plus direct access to me, and it's 100% free. Come join us.

17:26The link's below. Let's build. God bless.

17:28>> And so obviously I need to change that voice immediately and I would obviously do a voiceover, but I just wanted to see what would happen if I gave it a slash goal with a couple of things that I wanted it to do and kind of just walked away from my computer. And that's what it came up with and I think that's mind-blowing.

17:41The best part about all of this is that once you kind of figure out how to use this and you kind of create enough videos to have templates of, then you can use so many less tokens because you already have the framework that you can give the agent and it can follow. Because it doesn't need to recreate the HTML every single time.

17:54It can use some sort of base template and then just add a little bit to it and you'll spend significantly less tokens. That's why you guys are seeing that when I create these videos I'm doing them for such a low token cost and that's because I've used this so much that I kind of already have templates in there. For full transparency, the first time that you guys use this, if you create videos from scratch and you want to create your own kind of design, you are going to burn through tokens.

18:15But after you get over that hump, you'll be able to create videos for significantly less tokens and actually have a ton of fun using Hyperframes. And speaking of token cost, I want you guys to be fully aware of how this token system actually works using Hyperframes.

18:26The open-source project of Hyperframes itself is completely free. You can get it open-source, bring it onto your computer, install it, you're good to go. To actually render videos, you need to use Cloud Code, you need to use Codecs, so you're going to be spending some tokens.

18:38Unless you're using an open-source model like GLM 5.2, that's the only time I would actually use some API cost here. Other than that, I would definitely heavily subsidize your Codecs or Cloud subscriptions. Because all this repo is essentially a ton of skills alongside some libraries, some CSS animations, and a ton of different things that Cloud Code uses as tools.

18:55And so throughout this entire video you guys saw five different examples in five different sessions of what I did and all of that cost me a little over a million tokens. And that was a combined of input and output tokens. So the actual cost was probably somewhere around 15 to 18 dollars total if I were using the API, which I'm not.

19:11Looking at my actual cloud usage, you guys can see that my weekly limit I've only used 22% total, and it's getting reset in the next 6 hours. So, if you have the right system set up, you're not going to be spending that many tokens. And again, there's a ton of different options to actually minimize the token cost.

19:25The more templates you have, the more skills you have, the easier it is from getting from A to Z, the less tokens you'll spend. If you're trying to one-shot a video and you give it a crazy prompt and you don't steer it in the right direction, you're going to burn tokens, and that's with anything. And at this point, I've probably generated well over 100 videos with HyperFrames.

19:40So, I want to leave you guys with the five mistakes that most beginners make, so you guys don't make them. The first mistake is to never animate the video's height or width directly. This will tank your performance, it'll ruin your renders, and sometimes it just freezes completely.

19:52Mistake number two is to never call video.play in a script. HyperFrames controls the playback by itself, not you. You need to remember that the engine is seeking to get exact frames.

20:00The second that you try to manually play the video, the engine breaks, and you're going to have some headaches. Mistake number three is what I call the duration trap. Timeline length is not the same as source length.

20:09Your clip on the timeline can be longer or shorter than the actual source file. People assume they match, but they actually don't, so always double-check your durations. Because if there is a mismatch, that's where you get frozen frames, and your video begins to get choppy.

20:21Number four is a missing class equals clip. This one's so small, and I had so much trouble with it early on, and it'll completely wreck your render. Every clip needs something called class equals clip on it.

20:29Forget it on any single element, and the render will break. So, just make sure you're in the habit of getting your agent to tag every single clip. Mistake number five is to not overuse the backdrop filter blur.

20:39I get in some cases this blur looks really good. This single filter is really expensive, and it slows everything down. So, if you want to see your token cost skyrocket, then use many filters, but I wouldn't recommend doing that.

20:48And at first, when I was going through the growing pains of HyperFrames, I didn't know what any of this stuff meant, but don't ever worry, because your AI agent will help you get through it. Avoid these five mistakes, and you'll be levels ahead of your competitors. I'm totally aware that I threw a ton at you guys, so if you got lost at any point of this video, don't worry at all, cuz I got you.

21:04I dropped a full free resource guide inside of my free school community, AI Automation Axis. All you guys need to do is click the link down below, enter in your email, join the free school community, you'll get access to all the resource guides that I've ever created, including the one from today's video, and you'll get the link to the GitHub page so you can copy my exact workspace and get started on the right foot using HyperFrames.

21:22Hope to see some of you guys in the community soon. As always, if you've got any value from this video, drop a like, hit that subscribe button. It definitely helps me out a ton.

21:30Leave a comment down below on the first video that you're going to be creating using HyperFrames. I drop videos every Tuesday and Friday, but I'm going to be dropping a video every single day until July 11th. I'm having so much fun making content for you guys, and if you've made it this far in the video, thank you so much, and I'll see you guys in next one.

21:47God bless, guys. Hey there. If you're still here, that means you've made it to the end of the video.

21:52So, first of all, thank you so much. If you're new here, something I like to do at the end of all my videos is pray for you guys, my audience. I do this because I genuinely care about you guys.

22:00I love you guys. I want to see you guys live fulfilled lives, chase your dreams, and whatever the case may be. The only way for me to do that and actually help you do that is by praying for you guys, and I genuinely believe in the power of prayer.

22:10It's helped me so much in my life and got me out of some dark places, and I can only extend that belief to you guys. If this makes you uncomfortable at any point, please feel free to click off the video. I'm not here to force anything upon you.

22:22Just know that Jesus loves you. I'm going to go ahead and pray for you guys. Heavenly Father, thank you so much for waking us up this morning.

22:28Thank you so much for the gift of life and the breath of life that you breathed into us so we can get out of bed. Lord, I just want to thank you for your sovereignty. Thank you for your grace.

22:37Thank you for your love. Thank you for always steering us in the right direction. Thank you for just always being such a forgiving God.

22:43We make mistakes every single day, and just knowing that you forgive us and that you sent your son down for our sins, and his ultimate sacrifice washed away all our sins so that we could one day be in heaven with you is just something that we can can't even fathom sometimes. Lord, I just want to pray a blessing over my audience, the people on the the side of the screen.

23:01A blessing of just peace, wisdom, and just love, Lord. Let us continue to serve our neighbors and just be there for people, be the light in people's lives just like you are the light of our lives. Lord, continue to help us just be giving.

23:13Have us just give to others, have us serve others, whether that's with our money, whether that's with our time, whether that's with our talents. Lord, continue to guide us in the right direction on the narrow path. We thank you again for your son Jesus.

23:26We thank you for your grace and sovereignty, and we pray all these things in the name of Jesus Christ. Amen. Now, go have a blessed day, guys, and I'll see you in the next one.

The Hook

The bait, then the rug-pull.

The first 60 seconds of this tutorial are the product demo -- the host built his own intro using HyperFrames before explaining what HyperFrames is, so the proof arrives before the pitch.

Frameworks