Turn a Webpage Into a Launch Video: HyperFrames + Claude Code / Codex

You built something. A small app, a side project, a new feature. Now you want a short clip to post: a launch video, an "I built this" reel, a 20-second trailer that makes people stop scrolling. The usual options are a paid video editor you have to learn, or hiring someone, or skipping it entirely.

There is a newer path that fits how a lot of people already work: describe the video as HTML, hand it to a coding agent, and let the agent assemble the motion, music, and sound. The engine doing the heavy lifting is HyperFrames, and the workflow runs inside tools you may already have open, like Claude Code or Codex.

This is a how-to, written for someone who has never made a video this way. We will keep expectations honest: it is a workflow to learn, not a one-click button. The quality depends mostly on the storyboard you write. But once it clicks, you can turn a webpage into a shareable clip without opening a video editor.

Quick picks

What is HyperFrames?

HyperFrames is HeyGen's open-source HTML-to-video engine. HeyGen is the company best known for AI avatars and voiceovers; HyperFrames is the piece they released as free and open source.

The idea is simple to say and a little strange the first time you see it: instead of dragging clips around a timeline, you write your video as HTML and a storyboard. Each frame is described in markup and text. The engine renders those frames, adds motion between them, and stitches the result into an actual video file.

Why does that help? Because if you already write code, HTML is a format you understand and an agent understands. You can generate it, edit it, version it, and tweak it the same way you tweak any other file. The video becomes something you can describe in words and code rather than something you build by hand in a timeline.

Two people worth following on this, both posting in mid-June 2026. Peter Yang (@petergyang) showed that you can now make polished videos by writing HTML, driven from inside Codex or Claude Code: you generate a frame.md, lay out storyboards, and the agent does the assembly. His honest note: it is free and open source, but you need the right workflow, and the output is only as good as the frames and storyboards you give it. @Arcane_Aii built a Claude Code skill called /brag that takes a side project and turns it into roughly a 20-second launch trailer, with music, motion, sound effects, and copy, using HyperFrames under the hood.

So there are two ways in: do it yourself with a frame.md and storyboards, or lean on a packaged skill like /brag that wires the steps together for you. We will cover both.

How the workflow actually fits together

Here is the shape of it before the step-by-step, so the pieces make sense.

The mental model that helps: you are the director and writer. You decide the shots, the order, the words on screen, and the feel. The agent and HyperFrames are the crew that turns that plan into footage. A vague plan gets you a vague video. A specific plan gets you something worth posting.

Step by step: your first HTML-to-video clip

This is a realistic path a beginner can follow. Treat it as a workflow to learn over an afternoon, not a five-minute trick.

Step 1: Have the thing you want to show. Start with the project or page you are bragging about. A landing page, an app screen, a before/after, a short demo. Know the one point you want viewers to walk away with. A 20-second clip can make exactly one point well. Do not try to explain everything.

Step 2: Set up HyperFrames. HyperFrames is open source, so the install lives in its repository. Open it, read the current README, and follow that. Setup steps for fast-moving open-source tools change, so the repo is the source of truth, not this article. If you are using a packaged skill like /brag, the skill's own instructions will tell you what it expects to be installed first. Read those before you start, so you are not debugging a missing dependency halfway through.

Step 3: Write the storyboard. This is the real work. Open your agent (Claude Code or Codex) in the project folder and create your storyboard. The honest truth of this whole workflow: this step decides whether your video is good. The engine is capable; your storyboard is the bottleneck. A storyboard is just the shot list in plain language. Frame by frame: what is on screen, what the words say, what the mood is. You can write it yourself, or ask the agent to draft it and then you edit. Editing a draft is usually faster than starting from a blank page. Use the storyboard prompt below to get a first draft, then read it like a viewer, not a writer. Is the first frame a hook or a yawn? Is there one clear point? Are there too many words on any single frame? Cut and tighten before you render anything.

Step 4: Drop in your assets. Give the agent the real pieces: screenshots of your app, your logo, a product shot, brand colors if you have them. The storyboard told you which ones it needs. Generic placeholder frames look generic; your actual screenshots make it look like a real product.

Step 5: Render a draft and watch it. Have the agent run HyperFrames to assemble a first pass, then watch the whole thing through once without touching anything. Do not fix individual frames yet. Get the overall feel first: Is the pacing right? Does the hook land? Does the music match the mood?

Step 6: Iterate frame by frame. Now go specific. Because every frame is just text and HTML, your edits are small and concrete. Use the iterate prompt below as a model. This is the loop: watch, name what is off, change those frames, render again. Two or three passes usually gets you to "good enough to post." Chasing perfect can eat a whole day, so decide up front when you will stop.

Step 7: Export and post. When you are happy, export the final clip and post it. The same video can be trimmed or recut for different places: a square version for one feed, a vertical one for another. Because the source is your storyboard and frames, making a variant is editing text, not rebuilding from scratch.

The shortcut: the /brag skill

If writing a full storyboard from scratch sounds like a lot for your first try, this is where a packaged skill helps. @Arcane_Aii built a Claude Code skill called /brag that aims a project at a roughly 20-second launch trailer, handling the music, motion, sound effects, and copy through HyperFrames for you.

The trade is the usual one. A packaged skill gives you speed and a sensible default look, at the cost of some control. Writing your own frame.md gives you full control, at the cost of time and a learning curve. A reasonable plan: run /brag first to see what "good" looks like and to get a working trailer fast, then, if you want something more specific to your brand, take over the storyboard yourself.

Whichever way you go, the same rule holds: feed it your real screenshots and a clear single point, and the result improves a lot.

Honest expectations

A few things worth saying plainly, because the demos always look effortless and your first attempt may not.

Is it worth it for you?

Quick gut check. It is probably worth learning, and it is probably not worth it yet, depending on where you sit.

There is no shame in the simpler path. If you need a clip this afternoon and you will never make another, a screen recording with a few captions does the job. HyperFrames pays off when making shareable video becomes a regular part of how you ship.

The bigger idea: make your work shareable

Step back from the tool for a second. The pattern underneath is the one worth keeping: the work and the way you show the work are starting to live in the same place.

You already saw this with Claude Code Artifacts, where a coding session can produce an interactive page that explains itself, a dashboard or a walkthrough you share at a link. HyperFrames is the same instinct pointed at video. Instead of finishing a project and then switching to a whole separate craft to talk about it, you describe the explanation in the same kind of text and markup you already use, and an agent assembles it.

That is genuinely useful, and it has a catch worth holding onto. The easier it gets to produce a slick clip, the more slick clips there will be, and the less a slick clip proves on its own. The thing that still stands out is having something real to show and a clear, honest point to make about it. The tool handles the polish. You still have to bring the substance.

So: build the thing first. Then, when you want people to see it, this is a fast way to make that happen without leaving the tools you already work in. HyperFrames and the surrounding workflow are young and changing fast. Check the current repository and the original posts before relying on any specific step.

Copyable prompts

Storyboard prompt: get a first draft to react to

I want a 20-second launch video for my project.

The project: [one sentence on what it is and who it helps]
The one thing viewers should remember: [your single key point]
The vibe: [e.g. clean and confident / playful / serious tool]

Write a frame-by-frame storyboard for HyperFrames as a frame.md.
For each frame give me: the on-screen text, what's shown,
the transition into it, and a note on music/sound mood.
Keep it to 5-7 frames so it fits ~20 seconds.
Tell me what assets (screenshots, logo) you need from me.

Iterate prompt: fix specific frames and re-render

Frame 2 is too slow and the text is too long. Cut the copy to
under 6 words and speed up the transition into frame 3.

Frame 4: swap in the new screenshot I just added and make the
logo reveal at the end punchier.

Keep everything else the same and re-render.

Related Power of AI pages

Sources and official references

Related Power of AI pages

Keep reading with AI Finder, Prompt Studio, ChatGPT vs Claude vs Gemini, the AI glossary, and Which AI Should You Use?.