AI Video Creation with Hyperframes and Claude Code

AI Video Creation with Hyperframes and Claude Code

The kettle was still warming up when the render finished.

I had typed roughly two paragraphs of description into Claude Code — a cinematic intro, dark navy background, my logo settling into place over a slow purple-to-cyan gradient sweep, a tagline fading in on a soft glow, the whole thing under three seconds. I hit enter, walked to the kitchen, filled the kettle, clicked it on, and by the time I was reaching for a mug the agent had already written the HTML composition, queued the render, and dropped a finished MP4 into my project folder. No timeline. No keyframes. No After Effects. No Figma. No Premiere. No Final Cut.

That is not a marketing line. That is what actually happened on a Tuesday evening in early May, and it is the reason I stopped scrolling and started writing this post.

The setup that made it possible is two pieces. Hyperframes is the open-source rendering framework that HeyGen released on April 17, 2026. Claude Code is the agent that pairs with it, reads your intent, and writes the code. Together they collapse what used to be a five-tool, full-day pipeline into a single text prompt and a render queue. You do not learn motion graphics. You describe the motion graphics you want.

That is the headline. What everyone misses — and what I want to walk you through here — is the part underneath. Why this combination works when other "prompt to video" tools have been quietly disappointing for two years. What you actually need installed. The exact prompt patterns that produce a usable first draft. The places where the workflow still breaks if you push it too hard. And the specific kinds of video work this is now genuinely the fastest tool on the planet for.

If you have a creator workflow, a developer workflow, a marketing pipeline, or you are a founder who keeps putting off launch videos because the production cost is in your head as a forty-hour wall, this is the post that should make you change your plan for the weekend.

Why this combo finally works

Prompt-to-video has been the holy grail of AI tooling since roughly 2023, and for most of that time the tools either generated noisy, dreamlike footage or required so much manual cleanup that they stopped saving time. The tools that survived — Remotion, Motion Canvas, a few proprietary cloud renderers — required real coding. The tools that promised "no code" produced output you could not ship to a paying client.

Hyperframes is the first one I have used that does not feel like a compromise on either axis. The reason is structural, and once you see it you cannot unsee it.

LLMs are extraordinarily good at writing HTML, CSS, and JavaScript. That is the dominant content type they were trained on. There is more web code on the public internet than there is of every video framework, motion graphics library, and editing-software API combined. When you ask a model to "build me a cinematic intro with a dark gradient and a glowing logo," it has seen ten million versions of similar layouts in its training data. It can compose one in seconds. The bottleneck has never been the model. The bottleneck has been the output target — converting that web-fluent reasoning into something that becomes a real, deterministic video file.

That is what Hyperframes solves. It is, in the team's own words, "Write HTML. Render video. Built for agents." You write — or your agent writes — a plain HTML composition with data-start and data-duration attributes on each element. Animations come from any seekable runtime: GSAP, Lottie, CSS transitions, Anime.js, the Web Animations API, Three.js. The Hyperframes engine uses Puppeteer to drive a headless browser, captures every frame deterministically, and stitches them into an MP4, MOV, or WebM with FFmpeg. The framework is open source under Apache 2.0 with no per-render fees, no seat caps, and no commercial restrictions.

The phrase "deterministic frame capture" is the part most people skim past, and it is the most important word in the entire pitch. It means every render of the same composition produces a pixel-identical file. That is the difference between a clever toy and a tool you can ship client work with. Generative-video models hallucinate. Hyperframes does not. The composition is code. The render is reproducible. The output is yours.

Claude Code is the second half of why this works. Without an agent that can read your intent and write the composition for you, Hyperframes is still a developer tool. With Claude Code in front of it, the surface becomes natural language. You describe the video. The agent writes the HTML, the CSS, the GSAP timeline, the timing. You preview, you tweak, you render. The agent handles the parts you would have spent three hours on in a code editor.

That is the architecture I want to install on your machine in the next ten minutes.

What you actually need installed

Two pieces of system software, then the framework. That is the whole list.

Node.js. Hyperframes is a Node project. As of May 2026, Node 24 is in Active LTS (released 2025-05-06, codenamed "Krypton") and will move to Maintenance in October 2026. Node 22 ("Jod") is in Maintenance LTS until April 2027. Either is fine for Hyperframes, and if you are setting up fresh today I would go with 24. Node 26 just shipped on May 5, 2026, but it is the Current release, not LTS — skip it for production work until October when it gets promoted. You can verify your install with node --version and update via nvm if you have it, or download from nodejs.org directly.

FFmpeg. This is the rendering backbone. Hyperframes uses it to assemble the captured frames into a video file. Latest stable as of May 5, 2026 is 6.1.5 (the 6.1 LTS branch) or 5.1.9 (5.1 LTS branch — supported through 2027). On macOS, brew install ffmpeg is the path of least resistance. On Linux, your package manager has it. On Windows, the official build from ffmpeg.org/download.html is the safest route. Verify with ffmpeg -version. If the command does not return anything, the rest of this guide will not work — fix this first.

That is the system software. Now the framework.

The smartest install path, the one I now use on every fresh machine, is to hand Claude Code the GitHub repository link directly and let it set up the environment. Open Claude Code in a fresh directory, drop in https://github.com/heygen-com/hyperframes, and ask: "Set up Hyperframes in this directory and register the relevant skills in my Claude Code session." The agent reads the README, runs npx hyperframes init, and registers the skills automatically. This is the install path I recommend to anyone who has not used Hyperframes before, because the agent reads the latest setup instructions from the repo itself, which means it stays current with breaking changes you would otherwise have to track manually.

The manual path, if you prefer it, is one command:

npx skills add heygen-com/hyperframes

This registers a set of slash commands inside your Claude Code session: /hyperframes for authoring compositions, /hyperframes-cli for the dev-loop commands like init, lint, preview, and render, and /gsap for animation help. Depending on which adapters you opt into, you may also see /animejs, /css-animations, /lottie, /three, /waapi, and /tailwind. Each of these is a Claude Code skill that teaches the agent how to write correct compositions for that animation runtime. If you have read my breakdown of why Claude Code skills are the real leverage point, this is the production-quality version of that argument applied to motion graphics — the skill is your compressed judgment, encoded as a callable command.

Make a dedicated project folder before you start. Hyperframes generates a small but real directory structure — compositions/, assets/, render outputs, a few config files. Mixing it into an existing project directory is technically possible and practically a recipe for confusion three weeks later when you cannot remember which folder produced which video. I keep one parent folder called videos/ with one subfolder per project. Boring, reliable, easy to grep.

Once Node, FFmpeg, and Hyperframes are installed, you have everything. The rest is prompts.

The first render: a cinematic intro from one prompt

Here is the prompt I used the night the kettle story happened. I am giving you the actual text, not a polished version, because the rough edges are the point.

"Build me a 3-second cinematic intro for my mejba.me brand. Dark navy background gradient (#0F172A to #1E293B). My logo (logo.svg in /assets) appears centered at frame 1, scales up from 0.6 to 1.0 with a soft ease-out over 1.2 seconds. A subtle purple-to-cyan gradient sweep moves diagonally across the background, behind the logo, animated over the full 3 seconds. The tagline 'Engineered with intent' fades in below the logo at 1.5 seconds, holds, fades out at 2.7 seconds with the logo. Inter typography. Smooth, premium, designer-grade. Use GSAP for the timeline. Render at 1080p, MP4, 30fps."

Eight things in that prompt are doing real work, and it is worth pulling them out:

1. Duration. Three seconds. The agent needs a length.
2. Brand colors with hex codes. Not "dark navy" alone — the hex pair removes guesswork.
3. Asset path. I am pointing the agent at logo.svg in /assets, which I had placed there before opening Claude Code.
4. Animation specifics. Scale range, easing curve, duration. The model can pick reasonable defaults if you skip these, but specificity is what makes the first draft usable.
5. Background motion. A separate animation layer, with its own duration and direction.
6. Text content and timing. The tagline appears at a specific second, fades in, holds, fades out.
7. Typography. A named typeface. Without this, you get whatever the model defaults to.
8. Render flags. Resolution, format, frame rate.

Claude Code wrote the composition in about eleven seconds. It produced an index.html in the project's compositions/ folder, with the GSAP timeline registered correctly using the { paused: true } pattern that Hyperframes requires for deterministic seeking. It pulled my logo into an <img> tag with the correct source path. The CSS used my hex codes verbatim. The text element had the right easing.

I previewed with npx hyperframes preview, which spun up the studio in my browser at localhost:3000. The preview is a live runtime — the same code that will be captured during the render runs in the iframe, so what I saw is what I would get. The first iteration looked about 80% right. The logo scale was a touch too aggressive (it felt bouncy when I wanted gravitas), and the gradient sweep was moving too fast.

Two prompts later, both fixed. "Slow the logo scale to 1.5 seconds and use a power2.out easing instead of bounce." Fixed. "Halve the speed of the background gradient sweep and reduce its opacity to 0.6." Fixed. Then I ran:

npx hyperframes render compositions/intro --format mp4 --quality high

The MP4 dropped into the output folder forty seconds later. I watched it back. It was the clean, premium intro I had pictured in my head when I started typing. Total time from blank directory to finished MP4: under twelve minutes, including the prompt iterations.

That is what the launch videos are showing you. The reason it works is not that the model is doing something magical. It is that Hyperframes turned the output target into something the model has already been trained on for a decade. Web code in. Video out.

Iteration is prompts, not keyframes

The thing I keep coming back to about this workflow — and the reason I think it is going to eat a meaningful chunk of the motion-graphics market over the next eighteen months — is what iteration feels like.

In a traditional editor, refinement is mechanical. You select a layer. You drag a keyframe. You squint at the playhead. You re-export. You scrub. You curse. You repeat. A fifteen-minute round-trip per change is normal even for experienced editors. For people who do this part-time, it is closer to thirty.

In Hyperframes through Claude Code, refinement is conversational.

"Make the title 20% larger and add a soft cyan glow to it."

"The logo entrance feels rushed. Stretch it to 1.8 seconds and add a 200ms hold at the end before the tagline appears."

"Replace the background gradient with a slower radial pulse from the center, in the same colors."

"Add a thin animated line that traces under the tagline as it fades in."

Each of those changes takes the agent under thirty seconds to write. The preview hot-reloads. You see it. You either keep it or you give the next instruction. There is no timeline to scrub. No layer panel to navigate. No version of "where did that effect go?" Because the composition is HTML and CSS, every visual decision is inspectable, editable, and re-promptable.

What this collapses, in practice, is the part of motion-graphics work that punishes inexperience. The thing that makes After Effects intimidating is not that the operations are complex — it is that you have to know exactly which panel, which parameter, and which combination of bezier handles produces the look in your head. Hyperframes through Claude Code lets you stay in the layer you are actually thinking in: the look. You describe the look. The agent translates it into the parameters. You critique the result. The agent tunes the parameters. The translation layer is no longer a wall you have to climb. It is a conversation you have.

For someone who has spent ten years inside a timeline editor, this is going to feel weird at first, and the temptation will be to keep manually editing the generated HTML. Resist that temptation for the first five projects. Stay in the prompt layer. You will get faster than you would have believed possible, because you are no longer paying the cognitive cost of switching between what I want and which knob I need to turn.

The exception — and I want to be honest about this — is when you need a frame-perfect synchronization to a voiceover. That is a different problem, one I covered in detail in my Claude Design and Hyperframes test post. The short version: for that use case, you need word-level transcript timestamps, and you need to feed them into the prompt as a JSON file. Hyperframes can hit individual words on the frame, but only if you give it the timing data. For pure motion graphics with no voiceover sync — intros, outros, lower-thirds, animated explainers, social posts, ad creatives — you do not need any of that. You just describe the motion.

Rendering: the studio versus the prompt

You have two ways to get an MP4 out of Hyperframes, and they cover different workflows.

Path one — ask Claude to render. You stay in your terminal, you tell the agent "render this composition at 1080p MP4, high quality, save to outputs/intro-final.mp4," and the agent runs the CLI command and writes the file. This is what I do for 90% of work. It keeps me in one window. The render runs. The file appears. Done.

Path two — use the Hyperframes studio. Run npx hyperframes preview and the studio opens in your browser. The studio is a real composition editor — preview pane on one side, code on the other, hot reload between them — and it has an export panel where you can choose format (MP4, WebM, MOV), quality preset, and resolution. This is what I use when I want to A/B-test two slightly different versions of the same composition or when I want to see exactly what the runtime is doing on a given frame. The preview iframe runs the same code the renderer captures, so what you see is what you get.

For most agentic workflows, the prompt path wins on speed. For tweaking and inspection work, the studio earns its place. There is no reason to pick one over the other permanently — they coexist in the same project folder.

A note on output formats. MP4 is the default and the right answer for almost everything you will publish to YouTube, LinkedIn, X, TikTok, or Instagram. WebM is smaller and works beautifully for embedding on a website where you control the player. MOV is what you want if you are handing a clip off to someone who will color-grade it in DaVinci Resolve or Premiere afterwards, because it preserves more visual information at the cost of file size. Hyperframes will export all three. The render flag is --format mp4 | webm | mov. Quality presets are low, medium, high, and lossless. For social-first content, high is a sweet spot — visually indistinguishable from lossless to the average viewer at a fraction of the file size.

The current version has a 1080p resolution ceiling. If you need 4K, this is not your tool yet. For the platforms most creators and marketers actually publish to, 1080p is still the right target — TikTok, Reels, Shorts, LinkedIn native video, and most ad placements all serve at or below 1080p. Broadcast and cinema work need a different pipeline.

Beyond a single prompt: turning a webpage into a video

The cinematic intro test is the easy demo. The thing that surprised me was what happens when you feed Hyperframes a more complex input.

I tried this on my own portfolio page. I opened Claude Code, gave it the URL https://www.mejba.me, and asked: "Read this webpage and turn it into a 60-second cinematic explainer video. Keep the dark, premium aesthetic. Pull the brand colors and typography from the site itself. Cover the main value proposition in three beats — who I am, what I build, and how to work with me. Use clean motion graphics, no stock footage, no narration. Render at 1080p MP4."

What came back, eight minutes later, was a 60-second video that genuinely looked like it had been made for the brand. The agent had captured the dark navy palette and the purple-cyan accent. It had pulled a few headline lines from the page and turned them into animated typography beats. It had used my actual project list to structure the middle section. The transitions were clean, the pacing was reasonable, and the closing CTA card matched the visual language of the rest of the piece.

It was not perfect. The first version had the section breakpoints slightly off — beat two ran a little long, beat three felt rushed. Two prompts to rebalance the timing fixed it. But the fact that I could go from a public URL to a brand-matched 60-second explainer in under fifteen minutes of prompt time is genuinely new in the tooling world, and it is the part I think most readers underestimate when they first hear about this.

The same pattern works for documents. I tried it on a 4-page product brief I had written for a client — a PDF, dropped into the project folder, with the prompt "Convert this brief into a 90-second explainer video. Use the same dark, professional aesthetic as my intro. Pull the three main capabilities into separate scenes. End with the contact CTA from the document." The agent read the PDF, identified the structure, composed three scenes, and rendered. The result was useful as a first draft. After two rounds of revision prompts, it was something I could send to the client.

This is the part of the workflow that is going to disrupt the most. Marketers who currently spend three hours and four hundred dollars producing a single explainer video can now produce one in an hour for the cost of their Claude subscription. PMs who have been writing PRDs in Notion can hand the same document to Hyperframes and get a video version for the kickoff meeting. Founders launching a product can take their landing page copy and have a video ad pipeline ready before the page is even live. The barrier to entry for "video as a content format" just collapsed by an order of magnitude.

The traditional pipeline versus this one

Here is the comparison stripped of marketing language. Both columns are based on actually doing the work.

The honest read on this table is that Hyperframes does not replace a senior motion designer working on a $50,000 brand film. It does replace, almost entirely, the long tail of "we need a quick intro for this video" and "can someone make a lower-third for this clip" and "we need a 30-second ad creative by Friday" work that fills up agency project queues. That long tail is where most production hours actually live. That is the market that is moving.

The use cases this unlocks right now

Here is who should set this up this weekend, broken out by job, with the specific kind of work I think wins fastest:

Creators. Intro animations, outro cards, lower-thirds, end screens, animated section dividers for long-form content, animated cover-art for podcasts. The stuff that used to require a freelance editor or a Sunday afternoon in DaVinci. You build a few skills (one per asset type) and you reuse them for every future video. Your channel starts looking visually consistent in a way that is otherwise expensive to maintain.

Developers. Product demo intros, animated changelogs, release announcement videos, README hero animations. Everything you would have wanted to embed on a docs page or in a launch tweet but did not because the production cost was too high. Now it costs ten minutes.

Marketers. Social ad creatives in volume, A/B test variants of the same ad with different copy or pacing, animated explainers for landing pages, weekly product update videos. The old constraint was "we cannot afford to test five variants." That constraint is gone. You can render twenty variants of an ad in an hour and let the platform tell you which one works.

Product managers. Animated walkthroughs of new features for kickoff meetings, video versions of a PRD for stakeholder updates, demo clips for sales enablement. The point is not that you become a motion designer. The point is that you can produce a video the same way you produce a Slack post — quickly, cheaply, and from text.

Founders. Launch videos, fundraising deck supplements, recruiting clips, product trailers. The work that you have been quietly avoiding because it felt too expensive to be worth it. The cost just collapsed. There is no longer a defensible reason to launch without a video.

If you have followed my work on the broader video stack, this slots into the production system I described in the 3-tool Claude Code video production stack — design system on top, Hyperframes in the middle, Auphonic on the bottom for audio. For pure motion graphics with no voiceover, you can skip the bottom layer entirely and ship out of Hyperframes alone.

Where the workflow still breaks

I want to give you the honest version of the limitations, because the launch videos do not.

Voiceover synchronization is a separate problem. If your video has narration and you need on-screen text or graphics to land on specific words, you need a word-level transcript and a prompt that references those timestamps. Hyperframes will execute it correctly if you give it the data. It will guess if you do not. I covered the full transcript-driven workflow in my Claude Design and Hyperframes test, and the same approach works here.

Render time scales with composition complexity. A three-second cinematic intro renders in under a minute. A 90-second composition with multiple animation layers, image overlays, and a busy background can take five to ten minutes on a modern laptop. This is not a limitation of the tool, it is physics — the engine is capturing every frame in a headless browser and stitching them with FFmpeg. If you are doing client work that requires fifty renders a day, factor the local-machine cost in.

The 1080p ceiling is real for now. If your output spec is 4K, this is not yet your tool. Watch the GitHub releases — the engine team has been pushing fast.

Custom fonts need to be available to the runtime. If you reference a brand typeface that is not Google Fonts and not in your project's assets/ folder, the renderer will fall back. Drop your .woff2 files into the project and reference them in the composition's CSS, or stick to web-safe and Google Fonts for early experiments.

Heavy 3D is not the right job for this tool. You can use Three.js as an animation runtime, and for stylized abstract scenes it works well. For complex 3D character animation or photorealistic 3D rendering, Blender and a real render farm are still the answer.

None of these are dealbreakers for the use cases I listed above. They are the boundaries of what this tool is genuinely good at, and knowing them up front saves you the time of bumping into them at the wrong moment in a project.

What comes next: the avatar pipeline

The piece that makes the long-term picture interesting is what happens when you start combining Hyperframes with the rest of the AI video stack. HeyGen — the company behind Hyperframes — already has a deep avatar product. The natural next step, and one I expect to see this year, is a clean handoff between an avatar talking head, the motion graphics behind them, and the editing layer that ties the whole thing together. Avatar in HeyGen, lower-thirds and motion in Hyperframes, audio polish in Auphonic, the whole pipeline orchestrated by Claude Code skills you wrote once and call forever.

That is not science fiction. The pieces are all shipping. The orchestration layer is what you build for yourself, and it is mostly prompt engineering and skill design once the tooling is installed. The compounding asset is your skill library. Every video you ship adds a little more capacity to ship the next one faster. If you have been watching me write about animated hero sections built with Claude Code, this is the same compounding pattern applied to video — the leverage is not the individual deliverable, it is the reusable judgment encoded as a callable skill.

The render that changed my plan for this month

When the kettle finished boiling, I poured the water, came back to my desk, and watched the MP4 play through three times in a row. Not because it was perfect — it was not — but because the gap between what I had typed and what was now sitting on my disk as a finished file was wider than any tool I had used in the previous five years. That gap is the actual product. The composition itself was unremarkable. The collapse of the production cost between "I want a cinematic intro" and "I have a cinematic intro" is what is going to change a lot of plans this year, including mine.

I am going to spend the next month rebuilding the visual layer of every video I publish through this stack — every intro, every outro, every lower-third, every section break — and I am going to wrap each of them in a Claude Code skill so I never have to think about them again. By the time I record my next long-form video, the visual production cost will be zero. That is the actual point of this tooling. Not that any one render is impressive. That the entire pipeline becomes a sentence away.

If you have been waiting for the moment when AI video creation crossed from "interesting demo" to "I can use this in my real work tomorrow," it crossed last month. The kettle is your timer.

Let's Work Together

Looking to build AI systems, automate workflows, or scale your tech infrastructure? I'd love to help.

• Fiverr (custom builds & integrations): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (enterprise solutions): ramlit.com
• ColorPark (design & branding): colorpark.io
• xCyberSecurity (security services): xcybersecurity.io