Big Idea

The argument in one line.

Hyperframes turns Claude Code into a repeatable video editor by having the assistant write captions, animation, and layout as literal web-page code, which a separate rendering engine then screenshots frame by frame into an exact, same-every-time MP4.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You already use Claude Code (or a similar coding agent) and want a repeatable way to produce branded video without hand-timing captions or animation.
You publish enough video that turning one finished edit into five or six on-brand variants would genuinely save time.
You're comfortable pasting prompts and reading the assistant's output, but don't want to learn a traditional video editor or write animation code yourself.

SKIP IF…

You want a tool that generates a full video from a single text prompt with no setup — this is a code-driven pipeline with a real, if one-time, install process.
You don't have or want a coding agent that can install packages and run shell commands on its own.

TL;DR

The full version, fast.

Hyperframes is a Claude Code skill that lets a coding assistant author a video as a web page, captions, animation, and layout written as code, while a separate rendering engine screenshots that page frame by frame into an MP4. Setup is five one-time prompts: prepare the machine, install the skill, fix a CDN issue that silently produces blank renders, make the fix survive environment resets, and confirm a real test render. After that, every video starts from one master prompt specifying format, script, assets, and CTA, reviewed first as cheap snapshot stills, never a full render. Once a video is approved, a single variant prompt recuts it for another platform, swaps an asset, or rewrites the hook, so one expensive video becomes a week of cheap ones.

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 – 00:52

01 · Turn Claude Code Into Your Automated Video Editor

Cold open stating the promise: no more hand-timing captions or manually formatting subtitles. An AI agent ingests a brand book and a raw clip and hands back a repeatable, on-brand edit via a connector called Hyperframes.

00:52 – 01:30

02 · What's Actually Happening Behind the Scenes

Clarifies this is not text-to-video generation. Claude writes captions, animation, and layout as an actual web page; a separate rendering engine opens that page and screenshots it frame by frame into one MP4. The assistant is the writer, the engine is the editor.

01:30 – 02:03

03 · Installing Claude Code and Setting Up Your Project

The pipeline needs a coding agent that can install things and run commands, Claude Code or similar. Download it, open an empty folder as the project, and paste prompts, you're the director, the AI is the crew.

02:03 – 02:55

04 · The Five Setup Prompts

Introduces the setup sequence: Prompt 1 prepares the machine (Node, FFmpeg, a common 403 install fix), Prompt 2 installs the Hyperframes skill itself via npx skills add.

02:55 – 04:49

05 · The Four Slash Commands You'll Use

Covers /hyperframes, /hyperframes-cli, /hyperframes-media, and /gsap, then the two prompts that matter most: Prompt 3 vendors GSAP locally so the CDN can't silently produce blank renders, and Prompt 4 wires a SessionStart hook so the fix survives environment resets, followed by Prompt 5's file-size sanity check.

04:49 – 05:05

06 · The Master Prompt

The single reusable prompt used to kick off every future video once setup is done, specifying aspect ratio, the attached script, proper nouns, assets, and CTA.

05:05 – 06:26

07 · Lessons Learned Before You Start

Practical habits: hand over the exact script every time, lock the format and asset names before starting, and review with cheap snapshot stills instead of a full render.

06:26 – 06:42

08 · Delivering a Ladder, Not One Giant File

The two rules that bite hardest (keep GSAP local, check file size before watching) and the asset delivery order: contact sheet, hook gif, small MP4, full master only at the end.

06:42 – 07:44

09 · Making Your First Video, Live

A live demo building a 9:16 talking-head video from an attached SRT script, reviewed via contact sheet before a full render, then confirmed real by file size.

07:44 – 08:31

10 · Turning One Video Into a Week of Content

The variant prompt: recut for another platform, swap an asset, reskin the brand, rewrite only the hook, or shorten/stretch the runtime, all cheap once the first video is approved.

08:31 – 08:55

11 · Recap

Setup is five prompts. Hand over the real script and format choices before starting. Snapshot while you work, full render only at the end.

Atomic Insights

Lines worth screenshotting.

Nothing about Hyperframes is text-to-video generation: Claude writes the video as an actual web page, and a separate rendering engine screenshots that page frame by frame into the final MP4.
Because the output comes from code plus a deterministic renderer instead of a diffusion model, the same prompt produces the same edit every time, down to the pixel.
GSAP, the animation library that drives every on-screen motion, ships pointed at a CDN by default, and a blocked CDN produces a render that reports success while the video is actually blank.
Vendoring GSAP locally and repointing every composition file to it by relative path is the single fix that prevents blank renders, and it has to be redone every time a new Hyperframes asset resets the pointer back to the CDN.
An output.mp4 of 600 KB or more means the render pipeline actually worked; around 25 KB means GSAP silently failed to load.
A SessionStart hook that reinstalls FFmpeg and restores the local GSAP fix keeps a temporary dev environment render-ready across every restart, instead of breaking on the next session.
Attaching an exact SRT or VTT transcript plus a proper-noun list stops the assistant from mishearing domain words and inventing captions, since transcription is the slowest, most error-prone part of the process.
Reviewing with cheap snapshot stills at specific timestamps catches caption and layout mistakes without sitting through a full render of roughly a thousand frames.
Delivering assets in an ascending ladder, a contact sheet, then a short gif, then a sub-3MB MP4, then the full master, means the full-quality render only gets paid for once everything else is already approved.
Once a video's structure and brand are locked, one variant prompt can re-cut the aspect ratio, swap an asset, reskin the palette, or rewrite only the hook, making every video after the first cheap and fast to produce.
Multiple hook variants can be rendered from the same base video by changing only the first three seconds, letting a creator test which opening actually holds attention before committing to one.

Takeaway

Five prompts turn Claude Code into a repeatable video editor.

WHAT TO LEARN

Hyperframes works because Claude writes the video as literal code instead of guessing at pixels, so a one-time setup and a single master prompt produce the same on-brand edit every time.

02What's Actually Happening Behind the Scenes

Nothing here is text-to-video generation: the coding assistant writes captions, animation, and layout as an actual web page, and a separate rendering engine screenshots that page frame by frame into the final MP4.
Because the output is code plus a deterministic renderer, not a diffusion model, the exact same prompt produces the exact same edit down to the pixel every time.

03Installing Claude Code and Setting Up Your Project

The pipeline requires a coding agent that can install packages and run shell commands on its own, not just a chat window.
Each new video project starts from a fresh empty folder, which becomes the project directory the assistant works inside.

04The Five Setup Prompts

Prompt 1 checks for Node 22+ and FFmpeg and fixes a common 403 install error caused by two stale package sources before installing FFmpeg.
Prompt 2 installs the Hyperframes skill itself via npx skills add heygen-com/hyperframes, teaching the assistant to author and render videos as web pages.

05The Four Slash Commands You'll Use

The four working commands split cleanly by job: /hyperframes builds the video, /hyperframes-cli runs the start-preview-render loop, /hyperframes-media handles voiceover and transcription, and /gsap handles animation timing.
Prompt 3 is the single most important setup step: it vendors GSAP locally and repoints every composition file to that local copy instead of the jsdelivr CDN, because a blocked CDN produces a render that reports success but is actually blank.
Prompt 4 wires a SessionStart hook so the FFmpeg install and the local-GSAP fix survive an environment reset instead of silently breaking the next session.
Prompt 5 is a sanity check: a real render lands at 600 KB or more, and a file around 25 KB means GSAP silently failed to load again.

06The Master Prompt

Once setup is done, every future video starts from one reusable master prompt that specifies aspect ratio, the exact script, proper nouns, assets, and CTA in a single message.

07Lessons Learned Before You Start

Hand over the exact script every time, transcription is the slowest, most error-prone step, and Claude will still mishear domain words and butcher brand names if left to guess.
Lock the format, aspect ratio, asset names, on-screen text, real chart numbers, before starting, because any blank decision becomes a re-render later.
Review with cheap snapshot stills at specific seconds instead of sitting through a full render of roughly a thousand frames just to check whether a caption looks right.

08Delivering a Ladder, Not One Giant File

The two rules that bite hardest if ignored: keep GSAP local in every composition, and check the output file size before watching it.
Deliver assets in ascending weight, a contact sheet for approval, a short hook gif, a sub-3MB MP4 for fast review, and the full master only once everything else is approved.

09Making Your First Video, Live

In the live demo, a talking-head 9:16 video is built from an attached captions.srt used directly, with lower-third captions, vignette, film grain, and a handle chip, keeping the face clear at all times.
The contact sheet is the real approval gate, checking caption placement and whether anything covers the face happens before a single second of full render is spent.

10Turning One Video Into a Week of Content

A single variant prompt recuts an approved video for another platform, swaps an asset like a chart for a map, reskins the palette and font, or rewrites only the first three seconds to test a new hook.
The first video is the expensive one to produce; every variant after it reuses the locked structure and brand, so it renders cheap and fast.

11Recap

The whole workflow compresses to five one-time setup prompts, then hand over the real script and format choices before starting, snapshot while iterating, and save the full render for the very end.

Glossary

Terms worth knowing.

Hyperframes: A Claude Code skill from HeyGen that teaches a coding assistant to author and render branded videos as web pages, driven by prompts instead of a traditional timeline editor.
GSAP: A JavaScript animation library that powers the on-screen motion, fades, slides, scaling, timing, inside every Hyperframes video composition.
Claude Code: Anthropic's coding-agent app, used here because it can install packages and run shell commands on its own, not just answer in a chat window.
npx skills add: The install command used to teach a coding assistant a new capability straight from its source, in this case the Hyperframes framework.
Contact sheet: A grid of still frames pulled from a draft render, used as the first and cheapest approval step before any time is spent on a full video.
SessionStart hook: A script that runs automatically at the start of every coding session to reinstall missing tools and restore local fixes in an environment that resets between sessions.
Master prompt: The single, reusable prompt template used to start every new video once setup is complete, covering format, script, assets, and call to action in one message.
Variant prompt: A follow-up prompt that reuses an already-approved video's structure and brand, changing only one specified element to produce a new cut cheaply.

Resources

Things they pointed at.

00:00toolHyperframes (HeyGen) ↗

01:35toolClaude Code ↗

02:18toolnpx skills add heygen-com/hyperframes ↗

03:40toolGSAP (GreenSock) ↗

00:00channelPracticalyAI ↗

Quotables

Lines you could clip.

00:00

“If you are spending hours editing a 30 second video, I got you.”

direct pain-point hook with no wasted words→ TikTok hook↗ Tweet quote

01:28

“The assistant is the writer. The engine is the editor, two different jobs.”

crisp one-line reframe of how the whole tool actually works→ newsletter pull-quote↗ Tweet quote

03:40

“The render does not fail. It reports success. It even hands you a file. Only problem is that the video is blank.”

counterintuitive failure mode that justifies the entire tutorial→ IG reel cold open↗ Tweet quote

08:30

“The first video is the expensive one. Every single one after it is cheap, fast, and already on brand.”

clean payoff line summarizing the ROI of the whole workflow→ TikTok hook↗ 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.

metaphorstory

If you are spending hours editing a 30 second video, I got you. What if you never had to time text animations and manually format subtitles ever again? What if an AI agent could ingest your brand book, take a raw video file, and just handle the edit for you?

Today, I'm going to show you how to turn Clawed code into your personal automated video editor using a connector called HyperFrames. We're going to hand Clawed our raw video one prompt and let it completely change it. Overlay word synced captions and apply a premium brand kit, everything you need.

What is happening backstage is what AI writes your entire video as code, hands it to a rendering engine. In this case, The result is exact repeatable on brand MP4 every single time.

No random seeds, no close enough. The same prompt gives you the same editing style every time down to the pixel. We're gonna set it up once, then I'm gonna show you the prompt that starts a video, the two mistakes that will burn your first hour if nobody warns you about them, and then how one finished video turns into 10.

So you have lots of content to post. Before we touch anything, I need you to clear out a picture you're probably carrying around. You're picturing type of sentence, wait, video.

appears. That is not what's happening here.

And if you go in expecting that, you are going to fight this tool the whole way. Here's what's actually happening. You are not asking an AI to dream up a video.

You are teaching your coding assistant how to build a video as your editor would, captions, animation, the whole thing written as code. Then a completely separate engine opens that page and takes a photo of it frame by frame and stitches those photos into one MP4. The assistant is the writer.

The engine is the editor, two different jobs. For this level of control, a chat window isn't going to cut it. We need an actual coding assistant.

that can install things and run commands for you. I'm using Cloud Code, but this works in Codex too, or really any capable coding agent. Cloud Code lives inside the Cloud desktop app.

So head over to cloud .com slash download and grab it. It's light, it's fast. Don't overthink the install.

Once you're in, move over to the code tab. Now open a fresh empty folder on your machine. That folder becomes your video project.

And I want to set your expectations right now. We are not coding anything ourselves. Don't worry.

All you're going to do is paste the prompts and read what comes back. You're the director here. AI is your crew.

I'll leave everything in the description. to make things even easier. Prompt one, prepare the machine.

This prompt checks that your machine has everything it needs and installs whichever one is missing. You don't need to know what node or FFMPEG are, that's Claude's job. Paste this prompt.

I called it prompt one. in the description. What that 403 line is doing is that a lot of web setups have a broken package index that silently blocks installs.

You don't want to be the one googling that error at midnight. The prompt is telling Claude how to clear the error before it ever becomes your problem. Prompt 2.

Install the skill. This is the real install. It teaches Claude the entire HyperFrames framework, so it writes correct video code.

Paste this. Install the Hagen HyperFrames skills into this project by running npxskills add hagen dash com slash hyperframes. This teaches you how to author and render videos as webpages.

When it finishes, confirm the hyperframes slash commands are registered and list the ones I now have available. Once that lands, you've got a set of slash commands. These are shortcuts that tell your assistant exactly which job to do.

The four you'll actually use, slash hyperframes, this is the main one, builds the video itself, slash hyperframes dash CLI, the work loop, starting a project, previewing, rendering, slash hyperframes dash media, voiceover, transcription, background removal, slash GSAP, animation help. fades, slides, scale, timing, prompt three.

This is the one that matters most. I want you to actually slow down for this one because this prompt is the difference between a smooth first render and you sitting there confused for an hour wondering why your video is a black screen. Here's the prompt.

You can pause the video to take a look. Here's why this is the most important prompt in the entire guide. GSAP is the animation library that makes everything on screen actually move.

By default, the template pulls it from the internet. In a lot of web and container setups, that link is just blocked. And here's the cruel part.

The render does not fail. It reports success. It even hands you a file.

Only problem is that the video is blank. Fixing this now once is permanent for the whole project. Skip it.

And you're going to burn a render finding out the hard way. Prompt four. Make the setup survive a restart.

This prompt is just to make sure that... you come back wanting to create a new video everything works the same and you don't have to do the setup ever again here's the prompt you can pause the video to take a look once you send this prompt every future session opens already render ready you never touch setup again prompt five prove it actually works one test render before you invest any real time into an actual video paste run a test render to output .mp4 to confirm the whole pipeline works then check the file size 600 kilobytes or more means the render is real around 25 kilobytes means gsap failed to load and the local copy needs another look if it is real pull one frame from the middle so i can see it and this right here is the best habit you're going to walk away from this video with one glance and you know instantly whether you just wasted your time or not you're going to use this on every render from here on hard part is done the setup just this once from here forward every single video you make starts with one prompt after you did the full setup you'll start from this prompt we'll call it master prompt you can pause the video to take a look feed the prompt with all the details the prompt asks

I want to take a moment here to hand you some stuff I learned in the process so you don't have to hit your head on the wall as many times as I had to. Hand over your exact script every time. transcribing audio is the slowest most error prone part of this whole process cloud will mishear domain words it will turn ai into air it will butcher your brand names don't make it guess paste your exact words and give it a short list of your proper nouns if you've got timing for captions export it as an srt or vtt file and attach that directly it gets used as is no guessing involved decide your format before you start every decision you leave blank turns into a re -render later lock these in at the top shape and size vertical for reels and shorts or wide for youtube which assets go where name them so the assistant doesn't guess wrong any on -screen text only you know your handle your call to action because a new placeholder just means a re -render once you fix it also share the real numbers if you're showing any charts or visuals otherwise it'll invent numbers for you check with snapshots never a full render a full render is around a thousand frames and it is too slow don't set through one just to check if a caption looks right ask for snapshots a handful of still frames at specific seconds that you can look at instantly catch your mistakes there save the

render for the very end once you're actually happy with the results. Two rules that bite hardest if you ignore them. One, keep GSAP local every time in every composition, never load it from the internet.

Two, check file size before you watch. 600 kilobytes or more is real, around 25 kilobytes means it failed. Deliver a ladder, not one giant file.

Ask for your results in order, easiest to heaviest. A contact sheet first, that's your approval step. A short gif of the hook, a small mp4 under 3 megabytes for faster review and the full master last only when you're actually publishing or archiving.

Okay, you already have everything you are going to need. Let's make your first video. I'm going to use the talking head format, best for hot takes, talk to camera clips, TikTok real shorts.

I'll use our master prompt. Using slash hyperframes, build a 9 to 16. 1080 by 1920 social video from the attached talking head clip.

The transcript is attached as captions .srt. Use it directly. Do not transcribe.

Proper nouns. Claude Anthropic AI. Captions in the lower third the whole way, plus vignette and film grain.

Add a small handle chip at 002. Keep the face clear at all times. Snapshots first, then a contact sheet, a small mp4, and the master.

And there it is, the contact sheet. This is my approval step. I'm scanning for caption placement.

Is the face ever covered? Does the handle chip sit clean in the corner? if something's off i say so right here before we've spent a single second on a full render the quick snapshots look good time for full render and file size check first always well over 600 kilobytes that means it's real before i've even hit play and there it is caption synced brand locked clean motion after rendering a great video if you like you can turn it into as many new versions as you like recut for another platform take your 9 to 16 short ask for a 16 to 9 version or a square one same story three placements swap the asset trade the bar chart for a map the phone mock -up for a laptop, reskin the brand, new palette, new font, same layout, great for A slash B testing, change the hook only, rewrite the first three seconds, render three openers, see which one actually holds attention, or shorten and stretch, cut your explainer down to a 12 second teaser, or extend the teaser into a full breakdown.

Possibilities are endless, really. Here's the variant prompt. Take the video we just made and create a variant.

Keep the structure and the brand the same. Change only this, recut to 16 to 9 slash swap the chart for a map slash rewrite the hook to your new hook slash new palette. Snapshot the change beats first, then deliver the small mp4 and the master.

The first video is the expensive one. Every single one after it is cheap, fast, and already on brand. That's how one idea becomes a week's worth of posts.

So that's the whole flow. Setup is five prompts, then hand over your real script and your format choices before you start, not after. Snapshot while you work, full render only at the end.

Check the file size before you ever hit play. And once one video works, you're not starting the next one from zero, you're just turning dials. Now, go make something.

The Hook

The bait, then the rug-pull.

The pitch is direct: hand Claude Code a raw clip and one prompt, and a connector called Hyperframes writes the whole edit, captions, animation, brand kit, as code, then renders the exact same result every time.

Frameworks

Named ideas worth stealing.

02:03list

The Five Setup Prompts

Prepare the machine (Node/FFmpeg)
Install the skill (npx skills add hyperframes)
Fix the render-breaking GSAP CDN issue
Make the setup survive a restart (SessionStart hook)
Prove it actually works (test render)

The one-time install sequence that gets a coding agent's environment ready to render Hyperframes videos.

Steal forany Claude Code skill onboarding flow that needs to survive an ephemeral dev environment

02:55list

The Four Slash Commands

/hyperframes — builds the video
/hyperframes-cli — start, preview, render loop
/hyperframes-media — voiceover, transcription, background removal
/gsap — animation help (fades, slides, scale, timing)

The working commands Hyperframes registers, split cleanly by job.

Steal forstructuring a multi-command Claude Code skill so each command has one clear job

06:26list

Two Rules That Bite Hardest

Keep GSAP local every time, in every composition, never load it from the internet
Check file size before you watch — 600 KB or more is real, around 25 KB means it failed

The two habits that prevent the most common wasted render.

Steal forany code-driven render pipeline with an external asset dependency that can silently fail

06:37list