13:23Peter Yang · Tutorial
How I Turned Codex Into My AI Life Coach in 13 Minutes
A 13-minute walkthrough of the four plain-text files that give an AI enough context to provide genuinely useful life and career advice.
June 17thThe argument in one line.
Because LLMs natively express visual aesthetics through HTML and CSS, code is a better foundation for AI-generated video than JSON-based timelines — and that shift makes professional launch videos accessible to anyone with a coding agent.
Read if. Skip if.
READ IF YOU ARE…
- You're a founder, engineer, or solo builder who needs a polished launch video but can't afford a $5,000–$30,000 video production budget.
- You already use Claude Code, Codex, or a similar coding agent and want to put it to work making motion graphics and product demos.
- You're shipping product updates frequently (weekly or bi-weekly) and need a repeatable, fast workflow for launch assets.
- You have Figma screenshots or a live website and want to turn them into a 30–60 second video without learning After Effects or CapCut.
SKIP IF…
- You need cinematic-quality footage or avatar-based talking-head videos — this is motion graphics and code-based animation, not live action.
- You're not comfortable running a coding agent at all; this workflow assumes you can prompt one and iterate on its output.
The full version, fast.
HyperFrames is a free, open-source framework from HeyGen that lets AI coding agents produce rendered MP4 videos from HTML, CSS, and JavaScript. The reason it works is that modern LLMs are already excellent at HTML — so they can express visual aesthetics in code better than in JSON timelines, which are structurally correct but visually blind. Jake Moran's 5-step playbook (gather assets + Frame.md, write storyboard.md, pull reusable components from the open-source repo, generate static preview frames, then build and polish in HyperFrames Studio) compresses a professional launch video into a single working day. Export options include MP4, MOV, and transparent WebM for compositing.
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 →Where the time goes.
00:00 – 02:10
01 · Cold open and cost hook
Peter teases the $30k launch video stat and introduces Bin Liu (VP Product Engineering) and Jake Moran (PMM) from HeyGen's HyperFrames team.
02:10 – 03:56
02 · Getting started: Install HyperFrames
Bin shows three install paths: (1) terminal command to pull the HyperFrames skill, (2) Codex plugin store, (3) Claude MCP connector. All free.
03:56 – 08:28
03 · /website-to-video: URL to launch video
Bin demos the website-to-video skill using Spotify.com — the agent captures assets, writes a storyboard, and generates a full 1-minute launch video. Walkthrough of the 7-step skill structure.
08:28 – 10:03
04 · Voice, TTS, and the free path
Peter asks about voiceover. Bin explains: local TTS model downloads automatically for free; connectors to ElevenLabs and Hagen are also available.
10:03 – 11:14
05 · Jake's intro: 2 months, 20–25 launch videos
Jake takes over. Context: the HyperFrames team is only 2 months old; Jake has produced most of HeyGen's launch videos in that window. Transition slide: 'How I make a 30-second product launch.'
11:14 – 12:26
06 · Step 1: Gather assets and create Frame.md
Jake's first step — create a project folder with context docs, UI screenshots, reference examples from videos he's admired, and one aesthetic source (Frame.md or Design.md). Frame.md is generated at hyperframes.dev/design.
12:26 – 14:13
07 · Step 2: Create storyboard.md
First prompt: point the agent at the project folder + Frame.md, ask it to produce a storyboard.md table (scenes, text copy, on-screen description). Jake refines copy in this stage before any code is written.
14:13 – 16:01
08 · Step 3: Pull animations from the open-source repo
Jake explains component reuse — HeyGen open-sources all launch video codebases. The prompt 'can you grab that text animation from video X for my intro?' tells the agent exactly which component to lift. Shows the same prompt box reused across 3 different videos with different Frame.mds.
16:01 – 18:00
09 · Step 4: Generate static storyboard.html frames
The biggest speed unlock: before building the full video, ask the agent to generate one static HTML frame per scene. Review aesthetics in minutes instead of waiting for a full render. Once frames look right, ask the agent to 'turn this into a full HyperFrames video.'
18:00 – 20:20
10 · Step 5: Build and polish in HyperFrames Studio
Bin demos the Studio: scenes shown as a timeline, Inspector panel for text/position edits, changes write back to code. Agent can read the diff and continue iterating. Export: MP4, MOV, or transparent WebM.
20:20 – 26:00
11 · Why HTML beats JSON for AI video
Bin explains the origin story: HeyGen tried building a video agent on JSON/XML timelines (standard video editor data model) and found agents could write valid JSON but had no visual intelligence. HTML is LLMs' native visual language. Introduces spatial vs. temporal aesthetics distinction.
26:00 – 30:50
12 · Use cases, models, and agent integrations
Peter asks about real estate, education, internal use. Bin's answer: commit-to-video is a real internal use. Best models: Claude Opus / GPT-5 tier for quality, Gemini for cost-quality balance. Hermes agent integration already live.
30:50 – 33:20
13 · Templates and Frame.md designer
Bin shows hyperframes.dev/design — browse template palettes, change colors and typography, download a Frame.md. Jake recaps his learning curve: started with 5-second clips, accumulated reusable prompts and skills over time.
33:20 – 36:07
14 · Roadmap and closing
Coming soon: open-source storyboarding step, media-use skills (background matting, SFX, music). Peter closes: this tool is free, empowers builders who can't afford production crews, and drives virality on Twitter. Find them @HeyGen on X.
Lines worth screenshotting.
- A professional launch video cost $30,000 as recently as two years ago — HyperFrames makes the same output free with a coding agent.
- JSON-based video timelines fail for AI agents: the agent can write structurally valid JSON but has no idea whether the result looks good.
- HTML is LLMs' native visual language — they can express spatial aesthetics in code far better than in any proprietary video format.
- The gap between good HTML (spatial aesthetics) and good video (temporal aesthetics) is the core engineering problem HyperFrames is solving.
- Every HeyGen launch video is open-sourced as a code repo — you can point your agent at any of them and say 'pull that animation for my intro.'
- Jake ships 20–25 launch videos in two months, mostly within a day of the feature going live, by reusing components across videos.
- Generating a static storyboard.html before the full video is the single biggest speed unlock — it lets you align on aesthetics without waiting for a full render.
- Frame.md (a brand guideline in hex codes and font names) tells the agent to optimize for video frames, not web pages — a critical distinction.
- HyperFrames supports transparent WebM export, so motion graphics can be composited into Premiere or DaVinci workflows.
- The HyperFrames Studio lets you edit text, position, and timing through a UI — changes write back to code, so the agent sees the diff and can continue iterating.
- Gemini is the recommended model for cost-sensitive video work; Claude Opus and GPT-5-class models produce higher quality but at higher cost.
- Text-to-speech is handled locally via a downloaded model — no ElevenLabs API key required to get started.
- Commit-to-video is a real internal use case at HeyGen: engineers summarize their week's work as a 30-second video the team watches on Fridays.
- Because the output is HTML, HyperFrames videos can be made interactive — the player itself can respond to user input.
Professional video is now a prompt, not a budget.
WHAT TO LEARN
The shift from JSON timelines to HTML as the AI video substrate isn't a technical detail — it's what makes the difference between an agent that produces a presentable video and one that produces a broken slideshow.
01Cold open and cost hook
- A $30,000 launch video was considered cheap — that number is the benchmark HyperFrames is designed to make irrelevant.
02Getting started: Install HyperFrames
- Three install paths exist: terminal skill command, Codex plugin store, and Claude MCP connector — all free and usable within minutes.
03/website-to-video: URL to launch video
- The website-to-video skill handles asset capture, storyboarding, and scene-by-scene code generation in a single agent session — a URL in, an MP4 out.
- Reading the skill's source is the best way to understand how to use HyperFrames beyond the one-shot workflow.
06Step 1: Gather assets and create Frame.md
- Frame.md differs from Design.md in a critical way: it instructs the agent to maximize the video frame with motion, not lay out a scrollable web page.
- The most important asset to include is one aesthetic source — without it, the agent defaults to generic spatial web aesthetics.
07Step 2: Create storyboard.md
- Storyboard.md is where copy gets written and refined — all textual iteration should happen here before a single line of video code is generated.
- The storyboard is a scene-by-scene table, not a full script; it anchors the agent's understanding of the story arc.
08Step 3: Pull animations from the open-source repo
- The HyperFrames open-source repo contains 50+ components and every HeyGen launch video codebase — a growing animation library available for free.
- Pointing an agent at a specific video and asking for a named animation is more reliable than describing the animation from scratch.
09Step 4: Generate static storyboard.html frames
- One static HTML frame per scene, generated before the full video build, cuts aesthetic iteration time from hours to minutes.
- Only after the static frames look right should you ask the agent to build the full HyperFrames video.
10Step 5: Build and polish in HyperFrames Studio
- The Studio is for last-mile editing — text corrections, position tweaks, and timing adjustments that are too small to describe in a prompt.
- All Studio edits write back to the HTML codebase, preserving a single source of truth the agent can continue reading.
11Why HTML beats JSON for AI video
- JSON-based video timelines are structurally verifiable but visually opaque — an agent can write valid JSON for a scene that looks broken.
- HTML is already where LLMs have accumulated the most training signal for visual expression; the shift to code-as-video leverages that directly.
- Temporal aesthetics (the feel of information arriving over time) is the open research problem — skills and evals are the current workaround.
12Use cases, models, and agent integrations
- Commit-to-video is an underrated internal use case: a weekly summary of engineering work, watched as a short video by the whole team.
- Gemini offers the best cost-to-quality ratio for HyperFrames work; Claude Opus and GPT-5-class models produce higher ceiling output at higher cost.
Terms worth knowing.
- HyperFrames
- An open-source framework from HeyGen that renders HTML, CSS, and JavaScript codebases into MP4 video files. AI coding agents write the code; HyperFrames' renderer converts it to video.
- Frame.md
- A brand guideline file (hex colors, fonts, visual direction) formatted specifically to instruct an AI agent on how to style a video frame rather than a web page. Generated at hyperframes.dev/design.
- Design.md
- A brand guideline format (predecessor to Frame.md) that captures colors and typography for web pages. Frame.md is the video-optimized version of the same concept.
- Spatial aesthetics
- The visual quality of a layout where the reader's eye moves across a static or scrollable surface (a web page). LLMs are already strong at this.
- Temporal aesthetics
- The visual quality of time-based media where information is delivered sequentially and the viewer's eye stays mostly fixed. LLMs are weaker here, and HyperFrames' skills and evals are designed to close that gap.
- HyperFrames Studio
- A browser-based editor that displays a code-generated video broken into scenes and lets non-coders adjust text, position, and timing via UI — with all changes written back to the underlying code.
- website-to-video skill
- An open-source HyperFrames skill (slash command) that takes a URL, captures screenshots and assets, writes a storyboard, and produces a full launch video in one agent session.
- storyboard.md
- A markdown table (scene by scene) that the agent produces before writing any video code. It defines what appears on screen, the text copy, and the scene sequence — the stage where you refine the story before committing to a full render.
- storyboard.html
- A static single-frame-per-scene HTML preview the agent generates from storyboard.md. Lets you review aesthetics fast without waiting for a full video render.
Things they pointed at.
03:05toolHyperFrames in Codex plugin store
03:20toolHyperFrames Claude MCP connector
26:40toolHermes agent (HyperFrames integration)
Lines you could clip.
00:05
“I've spent $30,000 on a launch video, and I was told that that was cheap.”
01:18
“Everyone now has a coding agent, so everyone can literally ask your coding agent to make a Hyperframes video.”
22:10
“Agent has no idea whether this JSON is gonna be good looking or not.”
26:00
“Internally, we literally ask Claude Code to look at my commits for the last seven days and tell my team what I did.”
32:20
“I think a lot of the engineers here actually can make their own launch videos now. They don't have to learn After Effects or even CapCut.”
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.
metaphoranalogystory
00:00I've spent $30,000 on a launch video, and I was told that that was cheap. This entire one minute launch video for Spotify is created by asking Bob Code with Fable five and giving it spotify.com and say, make a launch video for spotify.com.
00:14I've learned a bunch of little tips and tricks to maximize my speed to getting a good video. The main thing that I'm adding though is assets. So I'm either adding screenshots
00:24of UI or examples from other things I've seen online that I like. I think a lot of the engineers here actually can make their own launch videos now. They don't have to learn a tool.
00:33They don't have to learn After Effects or even CapCut. Everyone now has a coding agent, so everyone can literally ask your coding agent to make a hyperframes video.
00:43Alright. Hey, everyone. My guest today is Bin, VP of product engineering at Hegen, as well as Jake, PMM on the HyperFrames team.
00:50Look, guys. HyperFrames is a freaking amazing tool and is completely a 100% free for making incredible AI videos just straight from HTML.
00:58And Bing and Jake are gonna show us exactly what it can do and how it works and how to prompt it. So welcome, guys. Thank you.
01:05Thank you, Peter, for having us. Yeah. Thank you so much.
01:08Alright, guys. Well, why don't we just get right into it and you can just show us how impressive high hyperframes is? You know, I I can't believe it's free.
01:15So Sounds great. Sounds great.
01:21So this entire video, end to end, is actually code. There are definitely some assets, you know, for instance, me talking, which is a piece of media that we add to the construction.
01:33But if you actually look into our studio, you will notice that it's really putting together videos, audio clips, code, animations, motion graphics into an HTML, CSS, and JavaScript code base.
01:48And Yeah. Hyperframes is designed and constructed so that because of these data, uh, attributes that we add to these HTML elements, our renderer is able to turn such a codebase into a rendered m p four video that you can share anywhere.
02:05This is the power of hyperframes and very excited for people to be able to do that. Everyone now has a coding agent, so everyone can literally ask your coding agent to make a hyperframes video just just like that. This is, like, super impressive, but why don't we start from step one?
02:19Can you can you show us how do set up Hyperframes in like a Codex or a Cloud Code? Absolutely. Absolutely.
02:25First and foremost, I definitely encourage people to go to hyperframes.hagen.com quick start. Here is the most recommended way to teach your coding agent how to use Hyperframes.
02:36And you just copy this and you go to your you know, for instance, you just go to go to your terminal and then you run this command, it'll pull in the hyperframes skill. And you can it'll obviously take the steps to do that or can also find hyperframes in the Codecs plugin store.
02:57Go down in the creativity section. There is Hyperframes by Hegen.
03:02Just have to install it, try it in chat. Lastly, if you don't have those tools but you still wanna experience the capability of Hyperframes, you can go to Claude and in the customize connect connectors or connect your apps, search for Hyperframes.
03:19Hyperframe is right here, you can install it, and you can literally go to any chat in Claude and say, make me a video about something. Right?
03:29For instance, here, I'm asking it to make me a video about Fable five. I think it's Got not loading. But, yeah, that's that's the the easy setup steps.
03:38Alright. And and you showed some pretty complicated code to generate that amazing video that you showed for Cloud MCP, but, you know, like, I I don't know how to write any code, so, like, what's the easy version of trying to make something like that?
03:50Absolutely. I think this is the easiest way for folks to start getting a sense of how to work with Hyperframes.
03:58But we have a skill which is fully open sourced here in our Hyperframes open source project. We have been working on many skills to help people make really good launch videos, motion graphics, etcetera, etcetera, but this skill is a very comprehensive skill that takes your agent step by step to create a full video.
04:20I think first we just see maybe an outcome. We're also amazed by the kind of content and video that Fable five is able to make using this skill. So this video, I'll first mute it to talk over it.
04:36This entire one minute long launch video for Spotify is created by asking Cloud Code with Fable five and giving it spotify.com and say, make a launch video for spotify.com.
04:51And as you can see, Fable followed our skills instructions to take assets from the spotify.com.
05:01It wrote a full storyboard on how the flow of this launch video should be and even the audio.
05:24Yeah. That's he's saying. But yeah.
05:26Okay. So it just use that scale, the web website to
05:29video skill. Right? That's right.
05:31That's right. So quickly kinda give everyone a high level overview. And and the reason why I wanna show this is that it's not necessary to say, oh, everyone use this one skill, but I think just by reading through the skill, it gives you a sense of how to use hyperframes together with your agent.
05:46So here, this skill essentially teaches your agent, alright, in order to turn a website into a video, here are the one, two, three, four, five, six, seven steps that you need to take. Right? Yeah.
05:58And it it details on every step. So first step, ask your agent to actually capture the content from your website. So we go to the sub skill here.
06:08It actually teaches the agent how to pull the screenshots, the assets, and putting them into a folder or a set of folders that your agent then can use these images and SVGs and assets and videos for its video.
06:23And then you can see that step three is storyboarding. You know, our skill teaches agent to be more diligent before building anything, build a storyboard so that, you know, then it knows to build the code scene by scene. So if we go back here to the Spotify video, you can see that the Spotify video is broken down into scene one, scene two, scene three, and this is how your agent uses the HyperFramed skills, follows the HyperFramed standards, and writes the entire code base for this end video.
06:57So my suggestion is literally, you know, tell your agent, use my website, make me launch a video, that's the simplest way to use it, but if you actually want to get better, at which I'm sure Jake will talk a lot more about, you know, other other tips and tricks that we have Yeah.
07:15Study the website to hyperframes skill,
07:18I would say, is the best way for you to learn. I mean, I can just straight up copy the skill. Right?
07:21I can just to colleagues to the GitHub, be like, hey. Just go get the skill for me.
07:26And
07:27and then just, like, you know so I I just have to, like, slash website to video and paste my website link, and then that's it. Right? Then they'll do it.
07:36That's it. Yeah. That's incredible.
07:38How do get the voice? Like, is that through, like, 11 or something or, like, some some That's a good question. Our goal here is we obviously want to make it so that HyperFrames is accessible and almost, like, completely free for people to get started.
07:51Right? So we actually use the local model that we have a skill for it and your agent decides that it needs to use audio, then it will download the model and then actually use the local model to do TDS. We obviously also have ways for your agent to connect to PayGen,
08:07connect to Eleven Labs, all these different providers for your agent to use text to speech or image generation, etcetera, etcetera. Okay. Yeah.
08:16You know what? I I I normally don't like to do videos talking about products, like, because it seems like promoting a product, but, like, this stuff is free, number one, and number two is, like, so good. So, like, there's there's no reason why people should not try this.
08:26It's it's, like, super approachable. And, Jake, you you've been quiet so far, but, like, Bing tells me that you're a real expert in actually getting really good videos out of this. So maybe you can share some tips or tricks that you use.
08:36Yeah. So I have
08:39I mean, I think it's important we lay out. We've really only been a team for two months. Yeah.
08:45So so, you know, we're all getting acquainted with the tool as well and getting better every day. I have had the privilege of creating most of our launch videos so far.
08:55So through that, I've learned a bunch of little tips and tricks to to maximize my speed to getting a good video, and then also, I think, the output quality. I think the key differentiator I'm gonna introduce here is that the types of announcements we're doing, we don't have, like, a website or something to to start from.
09:15So therefore, we have to do, or I have to do a bit more of the groundwork myself for getting, like, projects set up initially, right?
09:25Because what we saw with the website, the HyperframeSkill, that first step is it's taking in all this information from the site itself and laying the groundwork. So when you're doing something net new that maybe you only have Figma screenshots for or for us, like a lot of our videos are based around a a Cloud Code session or similar, you're gonna have to build those yourself for now.
09:46Or if I've already made them, it's in our launch video specific repo with which has the source code for all the videos I've created. So I'll talk more about that later too because that's a a very fast path to getting quality visuals that you can then amend for your videos.
10:03But, essentially, I do I do these setup steps. So the first one is I create a new project folder, and all I'm gonna throw in there is context.
10:12Right? So some of the things we're we're launching, all we have is, like, a read me document about new feature that's coming into our HyperFrame Studio or something like that.
10:22So I'll pull that file, and I'll add it into my project folder. The main thing that I'm adding, is assets.
10:29So I'm either adding screenshots of UI or examples from other things I've seen online that I like, just basically laying the groundwork of, like, I see a couple frames of this video already in my head.
10:43Here they are. And then the key thing that you also wanna add is one aesthetic source. I think most people might have heard of Design.
10:51Md by now. We just released last week something called Frame. Md, which you can create on hyperframes.dev/design.
11:02But you just drop your design. Md, and then our agent will reformat it to be better for video. Okay.
11:09But this is a really key thing for matching the aesthetic of your brand. And DesignMD is just like a like a bunch of, like, fonts and colors and, like, styling. Right?
11:19Like, kind of like a brand guideline. Yeah. It's, yeah, it's basically just a brand guideline.
11:24And because it's all just, like, hex codes, it's more of a visual direction. But because it's not written into HTML, it allows the agent to take a bit more liberty, and we kind of push that a step further with Frame.
11:35Md, giving it the context of, like, instead of building a a web page, which is what the Design. Md is made for, you wanna maximize the frame and make things larger and use motion and yeah.
11:48Then my first step is the or the first prompt that I give is I point my agent towards the new project folder that I've created. I point them towards either the design dot m d or the frame dot m d that I've made. And then the last thing is I ask for it to go through everything and then create a storyboard dot m d, which just comes out as a table of key events.
12:11So it just breaks down scene by scene what this video is gonna be talking about, maybe a brief explanation of what's on screen, and normally, what I'm refining here is the text copy. Right? I really care about what we're gonna say and how it's gonna build into this video.
12:26So I might take a couple shots back and forth just being like, you know what? Actually, I think it should be this line or help me brainstorm here or whatever. But this is more just like the the meat of the story Mhmm.
12:38As opposed to any kind of visual direction. Then what I mentioned earlier is my next step once I'm happy with, like, this kind of overview of the video.
12:50For me, my files are all local, so I point towards thing the projects that I've made in the past. But for other people, they can go to our, uh, launch video repo, and they can ask their agent to pull specific elements from the the videos that I've created.
13:07So I wanna give a quick example that I'm gonna share. We launched pretty frequently, and I try to not make things net new if I can.
13:18So I wanna give an example. In our last three videos, I have reused the same prod prompt box just with different, uh, frame dot m d's.
13:29This is video number two, and then this is video number three. Right?
13:33So it looks vastly different, but ultimately, I pointed my agent towards the same
13:39first prompt box that I had created and then described the the relevant motion for each video. But the prompt box is just a is it just an image or or, like, it's some code? It's like code.
13:49It's code. Yeah. Okay.
13:50So are you are you gonna open source this stuff or is this
13:54It is. Jake? Scale?
13:55Yeah.
13:57It's all there. I do wanna call out that we are and we have open sourced quite a lot of these components. Not that we don't want to, it's just that, you know, I I don't think people know or we have not talked about it enough.
14:11But Yeah. In our HyperFrames open source repo, there are actually at least a good, like, 50 components that we use regularly in our launch videos.
14:21Oh, really? So like all the cloud components and everything else is there? Yes.
14:25And we actually open source every single one of our launch video Yeah. Because it's really just a code base, right? We open source the entire code base that would render to the video.
14:35You know, it's really hard for you to read the actual code base. Right? It's agent written, like, hundreds, thousands of lines of code, but I think it it'll be a great resource for your agent to point to.
14:45You can literally say, hey. Pull that piece from that codebase because I want that effect, your agent will do that. That's amazing.
14:52Yeah. I'm I'm I'm not not calling it right after this. Yeah.
14:54That sounds amazing. Sounds great.
14:55Yeah. An an example prompt that I would use is like, I I really love the text animation from this is the name of the video, can you grab that one and pull it for my intro of this video? Right?
15:05Those types of moves are what your agent is gonna excel at, and then it's also gonna allow you to more easily if you're doing things in parts like this, it makes it easier to apply it to an aesthetic. And that's kind of my point here, right? So if you see the prompt box and it's the right interaction, but your colors are different, you want like a slightly different pacing, whatever, that is the beauty of it, um, being code is you get to just take the, like, the structure and you already start with this baseline.
15:37So when you introduce these design changes or whatever they may be, it's a lot faster, and it's more likely to work that first try. The next big unlock that I think we're gonna be adding in pretty soon to to everyone's videos, but I create a storyboard.
15:52HTML from that markdown file that I had previously created. And what this is is that, essentially, I'm asking the agent to create one frame per scene, and it's showing me the most visually dense section of each scene, and then I'm asking it to use the the references that I've gotten from the the launch videos, and then finally, the kind of design system.
16:14You just wanna review things before it gets too far. Right? Yeah.
16:17Exactly. Yeah. So this one is so much faster.
16:21Like, it it inevitably is gonna take a little while for your for your agent to come up with the full composition, especially if you're making a forty five second video or or longer. And so by just doing the static frame, you can align on aesthetic that much faster, which I think for a lot of people is is a primary concern.
16:37So this is this is definitely a big unlock for me. Most of these videos I'm making within a day of the the day we're launching it, so time is so important to me in that case.
16:50So you get something back that'll look like this where it it kinda says, like, this is the hook scene. This is scene one, scene two, and then it'll have, like, one frame. This is obviously a very lightweight version, but essentially, yeah.
17:04What I'll do is I'll go back and forth on this, and then once I'm pretty happy with these static frames, I literally will just ask, hey. Can you turn this into a full HyperFrames video and pull it up in the HyperFrames studio or use HyperFrames preview when
17:19done? So just like what Jake's mentioning, our studio will breaks up, uh, based on the your code composition, obviously, the studio breaks up your video into multiple scenes.
17:29And within the scene, I assume, Jake, you were gonna talk about the inspector. Yes. So, essentially, each scene, you know, is its own motion.
17:41Right? Sometimes, you know, sometimes the scenes are overlapping with each other. You know, for instance, if I I was like, I don't I don't know.
17:48I don't know about about this, you know, text. I don't know about its position either.
17:52Maybe I I want it somewhere else. I wanna change the text. Uh, you can all do that in the studio.
17:58And the beauty of hyperframes is that as humans who are editing this, one, you don't actually need to understand code. You don't need to go to the actual index dot you know, the HTML code and find the place and change, you know, these things.
18:15You don't do that. We build the studio so that humans can, uh, can modify it using this UI. But the beauty of that is that when you make those changes, they become code.
18:27And so your agent actually knows what you changed because the agent can basically do a code diff or something. Right?
18:35And what's even cooler is that because of the fact that LLMs are so good at HTML, CSS, JavaScript, it knows exactly visually what this change will entail.
18:49And that allows the agent to continuously working with you, working with the human on making this video perfect.
18:55And I can also just tell the agent to change, like, what do you wanna play to something else. Right? Yeah.
19:00Absolutely.
19:01You can always do that. Sometimes they are just, like, these tiny changes that you don't even know how to describe. Right?
19:07And and that's where the last mile editing comes in, and that's where the the studio really helps. And, you know, when you come from where, you know, Jake was showing his, like, a storyboard, his storyboard is essentially turns into each and every one of these scenes, and then he can then go into each scene and talk to his agent on how to, you know, how to make each scene work to the way that he wants them to.
19:30Got it. Okay. And then after I finish all this, I just hit hit export to export as a video?
19:36Yeah. That's right. And then it'll turn it into m p four.
19:40We also support a couple of different configurations that you can take, m p four, MOV, and WebM, who ask if they can export a transparent background layer. For a lot of the more, let's call it more professional video makers, they want, hyperframes to be making the motion graphics, and then you can download the WebM and then get the WebM to put into your, I don't know, Premiere cut.
20:03But either way, we support many of these configurations locally.
20:07Dude, this is incredible. And this is just all HTML and CSS, right, or like All HTML, CSS, and JavaScript. So theoretically, I can also export it as a website or something, right?
20:16Absolutely.
20:19Okay. That's right. Peter, you're touching on some things that we're also excited about because of the fact that it's HTML.
20:25Yeah. We can make interactive videos. Yeah.
20:28Exactly. Our player can be interactive. Yeah.
20:30And I feel like that's the slide that they were showing, Jake, is also HTML. Right? Yeah.
20:34Yeah. Yes. It was also made with Hyperframe skills.
20:37Yeah. Dude, you know, like, I got Cloud Design to make a slide deck, and then I got it to make a video. And the video was, like, way more impressive than a slide deck.
20:46So I I I feel like you guys can also just expand to, like, the slides market too. Like, just
20:50you know? We will try. We will We were, like, literally talking about it this morning.
20:55Yeah. Why why don't we talk about because, you know, I have a bunch of PMs and and engineers watching this. So why don't we talk a little bit about how this stuff actually works?
21:02Like, maybe you can walk through, like, you know, you're working on HeyGen, which is about, like, avatars and stuff. Right?
21:07But but then all of a sudden, have high performance. So, like, where where that come from? Yeah.
21:11Yeah. Great
21:13question. This might take a little bit longer, so bear with me. I I I do think we need to take a take a quick step back.
21:20You know, at Hegen, uh, one of the things that I think we really focus on, we don't compete with, you know, cinematic videos. So, like, we don't compete with, like, C Dance, Veil three, like, you know, Hollywood.
21:33Like, that's not our focus. You know? Yeah.
21:35Pageant has always been known to have one of the best, if not the best avatar models. Right? And the kind of business problem that we help our users solve is communication.
21:45We always believe that video as a format is one of the most effective communication format because would you rather read a five page doc or watch a one to two minute video to understand, you know, everything that you need to understand.
21:59I have a lot of examples of how our users and internally how we use video as a communication format. So avatar was our first step because many people are, shy in front of camera, they don't feel confident, you need to do retakes.
22:14I'm sure, Peter, sometimes you do retakes, and our users even more. They're not even professional communicators or video makers.
22:22Right? So they leverage our avatar model so that they can finally show up in front of camera and talk to their audience because the people to people connection is really important.
22:34But just the people is also not enough, right? You need to have the b rolls, the motion graphics, the the explanation of your product, the all of these, like, video editing that then even more people don't know how to do.
22:48Like, I think majority of us don't know how to do video editing. So ever since about, like, I think the beginning of last year, we have been really focusing on, okay, now we've nailed A roll. We've helped people make their avatar videos and so that they can show up.
23:05How can we help them make that final video? Because people just take our video and then maybe go to, like, CapCut, PremiereCut to finish that video. Right?
23:13They even hire a video editor to finish the video. Right? So how can we take them from end to end?
23:20So and we obviously believe that AI agent is the way, so we've been trying to build a video agent to do that. However, we learned the hard way that agents are even though very, very capable, when they are working with JSONs and XMLs, which is obviously the backing data model that all of our video editors sit on top of, it has no visual intelligence.
23:48Like, when an agent writes a JSON blob, it can be accurate, it can be verifiable and correct structurally, but agent has no idea whether this JSON is gonna be good looking or not.
24:00Yeah, exactly. It doesn't work. It doesn't work.
24:02And that is actually the biggest problem that we ran into. And furthermore, it's like human modified that JSON through the UI and then the agent is like, Uh, what changed?
24:14What happened? And so that's actually when we turned to code because we believe that code, especially HTML, is LLM's native language.
24:27LLM's can express not only accurately the information but also visual aesthetics through HTML, CSS, and JavaScript.
24:37And it's not necessarily fully true before Gemini two, GPT four time, but it's definitely true after, like, Gemini three, you know, GPT five, and, you know, OPUS models.
24:50Like, these models are incredibly good at visually expressing something using code. Yep.
24:57Yep. And that really unlocked how our users can just talk to our agent and edit a video, and the video will come out visually interesting.
25:08And that's how we so we started by, like, actually just having Adrian write a very small snippets of code and slap that on top of, like, our our, you know, video editor to all the way be like, why can't it just all be code?
25:23And then our footages will sit on top of it, you know, any images, you know, assets, SVGs can sit on top of it, and then the code just becomes
25:32that foundation layer for agentic video making. That's incredible. Yeah.
25:36I always believe that code is the foundation of all knowledge work and and clearly, like, a a bunch of creative work too. Absolutely.
25:43But how do you how do you, like is there some sort of verification loop that is actually, like, you know, making beautiful scenes and stuff? Or So
25:50there are a lot of things that we've noticed that agents are already very good at. Right? Like, agents are already very good at writing a landing page.
25:57Right? Yeah. But Yeah.
25:58You know, you hear a lot of people using hyperframes and be like, oh, I'm making a PPT video, which is fine. You know, PPT videos are useful in some use cases, internal use cases.
26:09It's totally fine. But when it comes to launch video, it's not gonna cut it.
26:13Right? People are not gonna watch your PPT for more than five seconds.
26:17So what we also found is that LLMs today, especially with HTML, CSS, we call it . Spatial aesthetics means like you look at a landing page and your eyes move from top to bottom, left to right, and you scroll down, right, all the informations are laid out and spatially it looks great.
26:39But videos don't work that way. Videos, we call it . So your eyes are always looking at the camera or you're looking at the the video, and the information is fed to you.
26:51Like, eyes don't really move that much. Yeah. Because of the time element.
26:55Yeah. Exactly. There's a time element to it.
26:58And and that we found is not, you know, is actually not something that LLMs are very good at because it's not being trained on top of that.
27:07So we internally build evals, benchmarks, and also self check loops so that our own agent gets better and better at that. We open source a lot of that ideas into our skills so that your agent gets better at that as well, but we're actually working with Frontier Labs as well on how they can train LLMs to be better at at this.
27:30Got it. And and is the primary use case right now, like, product launch videos and kind of, like, sizzle real, like, tech product stuff? You'd be surprised.
27:37There are so many different use cases. Product launch video for us is the holy grail because, you know, as a founder myself, uh, from from, uh, previous, uh, to to HeyGen, I've spent $30,000 on a launch video, and I was told that that was cheap.
27:53Right? Yeah. And launch video is like so, so, so important, and we see that as like the the top quality video type that we need to get to.
28:03But there are many, many videos that today people use us for, like real estate videos, educational videos, obviously, internal training videos, or just motion graphics that you make a motion graphic for specifically something.
28:18And internally, I'll share one last example, PR to videos or commit to videos. Internally, we literally ask ClawCode to look at my commits for the last seven days and tell my team what I did for the last seven days.
28:34And it was really fun, it was really useful, It gets everyone, you know, a sense of, like, what everyone is working on. And it's a fun, like, Friday afternoon event where we just watch, like, 10 videos together.
28:46Yeah. I mean, like, because I I I've been in lot of, like, product reviews and stuff and, like, you know, people share, like, documents and slides. This stuff is just boring to go through.
28:54And, like, some like, people started doing more prototyping and stuff. But, yeah, to just having a really nice launch video or, a video you can share in Slack, like, can understand what the hell you're trying to do in, like, two minutes is, like, super use useful. Yeah.
29:05One of the things that we really wanna, uh, also tap into and we work with, for instance, Hermes agent, we have a deep integration with, uh, with that team. You know, one thing that we found, and I'm sure, Peter, you run many of your own agents. Right?
29:18Agents are extremely verbose. They come back with walls and walls and walls of text. Yeah.
29:25And I have gotten to a point where I just don't read them. Right? It's like Yeah.
29:29Alright. Sure. It's bad.
29:30Yeah. Maybe you did my what I asked you to do. But, you know, we turn that into videos too.
29:36We ask agents to be like, alright. When you're done, make a HyperFramed video. Tell me what you did in thirty seconds.
29:42Wow. Wait. So so, like, uh, because I'm actually using Hermesization right now.
29:46So it's it's natively integrated into Hermes, or do you have to install anything? Yeah. It's a it has a HyperFim skill.
29:52You might need a a run one command of, like, adding a HyperFim, but it's already in there. Okay. You know what?
29:57You know what I wanna do? I I wanna, like, give it a bunch of pictures of my kids and then make some sort of a reel based on that. You can probably do that.
30:03Right? Absolutely do that. Yeah.
30:05And, dude, let me let me try to push you a little bit further. If I have a if I have a separate video of my kid, like, at the playground or something, like I said, and before, can I play that video within the HyperFace video?
30:16Yes. Absolutely. You can.
30:17Right? It's it's just code. Yeah.
30:18Yeah. It's just code. Okay.
30:19Yeah. Alright, man, alright. I'm gonna be playing with this a lot.
30:23Yeah, what we found too is that, especially for the frontier models, they are actually also very good at visual understanding.
30:29So Fable five might be able to clip out that specific, like, timestamps of your kid's video to highlight in a HyperFrame video. Because, you know, HyperFrame can also just make it so that the the this m p four is played from, like, the third second to the Oh, I see.
30:45I see. Yeah.
30:46Okay. Let's talk about okay. So what happens if I can't afford Fable five?
30:50Like, what's the next best model for doing it through this stuff? Great. Is Gemini or yeah.
30:54Gemini.
30:55Gemini? Really? So we have been doing a lot of testing, a lot of evals.
31:00You know, if you wanna ask for, like, the top of the line quality, absolutely. Like, GPT 5.5, you know, Fable five, these are the top tier.
31:09But Gemini definitely brings a, you know, a quality to cost balance. Our internal agent is built all on top of Gemini. Alright.
31:16Great. Okay.
31:17Yeah. Very exciting. Very exciting.
31:19Okay. Cool. So let's just kinda recap the whole process.
31:22Right? So I guess step one is to go to the GitHub for Hyperframes and just, like, call it or, like, install it.
31:28And then maybe install the website to video scale. I think it one shot. Right?
31:32So that's like a one shot scale? Yeah. One of the things I I wanted to quickly show is that we also have a bunch of templates that you can work off of.
31:40Oh, sweet. Okay. If there is like one that you feel like it's like close enough to you, but you know you wanna change the colors, you know, you can click on fine tune, you can change the palette, it'll like, you know, preview immediately, you can like define your own colors directly if you have them, you can also change the typography if you don't like the original one, can go for a more funky or a more I don't know.
32:05You can change all kinds of fonts, and then you just download the design pack. It'll get you a Frame. Md that works really well with Hyperframes.
32:13Oh, that's perfect. Yeah. This this looks like a slide, dude.
32:16You should you should definitely support slides. Absolutely.
32:19Yeah. You should definitely support slides. We will we will work on it.
32:23Okay. Great. And and and Jake, like, you know, you you were you were not born to be a amazing HTML video editor.
32:29Right? So so how do you learn this stuff? Like, how did you become good at this stuff over the past two months?
32:33You know, I started with small projects. Right? Like, only a five second video where I wanted to have some kind of motion,
32:40and I learned how to describe it. And then from there, I just kept refining. And then when I got, like, text effects and other things that I liked, I would turn those into a skill that I would point my agent to for any of my my videos after that.
32:54Right? I reuse text animations, I reuse prompts I create, just amending them to the specific video at hand. Okay.
33:01Well, I I guess the good news is that people can just clone the repo and copy what we've done, so that's Exactly.
33:07That's good news. Yeah. Yeah.
33:08Yeah.
33:09Cool. Yeah. I I do think that what this was really freeing for builders like ourselves is that many even though Jake did make almost all of our launch videos in the last, like, two, three months, and you guys wouldn't believe it, but we had, like, at least 20 to 25 launches in, like, two months.
33:26Yeah. And each launch comes with, in my opinion, a very good launch video. Maybe not at the top of the line, but good enough.
33:33But I think a lot of the engineers here actually can make their own launch videos now because they understand the process. They understand the product. They just work with the their agent.
33:43The agent makes everything after a lot of iterations. Right? But they don't have to learn a tool.
33:48They don't have to learn After Effects or even CapCut. Right?
33:53Which I think is a is a huge unlocking for builders and entrepreneurs who are, you know, who are trying to build videos for their businesses,
34:01you know, finding it extremely hard to learn. Yeah. Learning new.
34:04Like, who wants to go to a website and learn new tools? Pain ass. Like, I just wanna get my agent to do it.
34:09Absolutely. So so okay.
34:13Cool. So then what are you guys planning next? Like, it's gonna be another 25 launches
34:17in next month? Absolutely. Yeah.
34:19There are quite a lot. You know, Jake showed off the storyboarding. We believe that it's an important step in the video making, so we likely will open source a lot of that.
34:29We're also building what we call media use. We're actually going to build a ton of skills inside of the hyperframes so that your hyperframes learn how to use background matting, how to add sound effects, music, all of those things.
34:42A lot of that actually at, you know, Heijen, we we will offer a lot of that for free while some of them will likely cost you, right, for for more expensive models. So, yeah, we want hyperframes to be able to do honestly
34:56anything and everything that a video editing tool needs to do. Okay. Think that's amazing.
35:01I okay. Look. I number one, I I see a lot of, like, AI builders now posting hyperlinks videos to launch their, like, new GitHub repo or something.
35:09And that that just feels, like, really empowering because otherwise, you have to pay, like, $30,000 to do it. And the other thing is like, you know, I've been on YouTube for for a while and I I I still haven't learned how to edit video myself. It's just like I I don't wanna learn like premier effects or whatever.
35:23Like, I don't wanna learn it. So yeah. So I've been paying my video editors to do my all my stuff.
35:27And I'll probably still do that, but, like, people do little little things with hyperframes. It just feels like really empowering. Yep.
35:34So so I guess I I I wanna thank both of you for putting stuff out there and making it free for all of us to use. Where can people find you guys online? We're on Twitter.
35:43Find us through the HeyGen x account. We post almost every day about Hyperframes. So find us at HeyGen.
35:49Got it. And the great thing about Hyperframes videos is, like, it just helps you go viral to hit Twitter. So, you know, it can go viral.
35:54It's true. And we will always retweet your Hyper Frames videos if you, uh, at, uh, tag us. Okay.
36:00Cool. I'll definitely tell you guys. Alright, guys.
36:02Well, thanks so much for your time, man. Thank you so much, Peter. Thank you.
36:05Cheers.
The Hook
The bait, then the rug-pull.
Thirty thousand dollars for a single launch video — and that was considered cheap. The opening line lands before introductions, before the guests, before any product demo. It earns the next 36 minutes by naming the exact pain it's about to solve: professional video has been gated behind a budget almost no solo builder or early-stage team can justify. HyperFrames is the argument that this is over.
Named ideas worth stealing.
10:03list
Jake's 5-Step Launch Video Playbook
- Step 1: Gather assets and create Frame.md (brand guideline for video)
- Step 2: Prompt agent to produce storyboard.md (scene table with copy)
- Step 3: Pull reusable animations from the HyperFrames open-source repo
- Step 4: Generate storyboard.html — one static frame per scene for fast aesthetic review
- Step 5: Build full video, then polish text/position/timing in HyperFrames Studio
The repeatable workflow Jake uses to ship 20–25 launch videos in 2 months, often within a single day of a feature going live.
Steal forAny founder or PMM who needs to ship product launch videos on a tight timeline without a video editor
23:00concept
Spatial vs. Temporal Aesthetics
Spatial aesthetics = how a layout looks as the eye moves across a static surface (web page). Temporal aesthetics = how information feels as it's delivered over time in video. LLMs are strong at spatial; HyperFrames' evals and skills are designed to close the temporal gap.
Steal forExplains why 'just make it look like a nice landing page' prompts produce PPT-style videos — and why you need the HyperFrames skill to push past that
03:56model
Website-to-Video Skill (7-Step Pipeline)
- Capture: screenshot assets from the URL
- Organize assets into folders
- Storyboard: plan scenes before coding
- Scene-by-scene code generation
- Audio generation (local TTS or connected provider)
- Preview in HyperFrames Studio
- Export as MP4/MOV/WebM
The open-source one-shot skill that converts any website URL into a launch video. Install via terminal, Codex plugin store, or Claude connector.
Steal forSaaS founders who want a launch video from an existing product page in one agent session
How they asked for the click.
VERBAL ASK
35:00link
“Find us at HeyGen on Twitter — we'll always retweet your HyperFrames videos if you tag us.”
Soft social CTA at the end, no hard product pitch. Consistent with the free-tool positioning throughout.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
Visual structure at a glance.
