Home / Video / Educational Film

Hyperframes, Remotion, and Claude as a Video Editor

Updated Jun 15, 2026 · Affirmology_VideoAsCode_Research_v1.md

Hyperframes, Remotion, and Claude as a Video Editor

Research report for Jeff. June 2026. A capabilities scan of HeyGen's Hyperframes (the GitHub project you flagged), how it sits next to Remotion, what Claude can and cannot do to "edit video," and how all of it maps onto the Affirmology teaser, post audio film, and investor film. No em dashes anywhere, per house rule.

The one paragraph version

Hyperframes is an open source tool from HeyGen with a simple promise: you write HTML, it renders a real MP4 video. It is GSAP native and it is explicitly built to be driven by an AI agent like me. That makes it a near perfect bridge between the two things you already want: GSAP for the look, and a way for Claude to actually produce finished video. It does everything Remotion does (both render with headless Chrome plus FFmpeg, both can export transparent overlays), but in plain HTML instead of React, which happens to be exactly the language I write your pages in today. My honest recommendation: Hyperframes is probably a better fit for how we work than Remotion, and it is worth a quick head to head before we commit the investor film to one pipeline.

1. What Hyperframes actually is

HeyGen (the AI video company) open sourced Hyperframes in spring 2026 under a permissive Apache 2.0 license. The tagline is literally "Write HTML. Render video. Built for agents."

The facts that matter for us:

• It is video as code. A video is an HTML file. Each element (a video clip, an image, a headline, an audio track) is a "clip" with timing set as plain attributes like data-start="2" and data-duration="3". There is no proprietary timeline and no React requirement.
• It is GSAP native. Animation is driven by GSAP, Lottie, CSS, or Three.js through what they call a Frame Adapter. You wanted GSAP. This is a GSAP video engine.
• It renders deterministically. It loads your HTML in headless Chrome, captures each frame exactly, and encodes with FFmpeg. Same input gives the same output every time, which is what you want for automated and repeatable work.
• It is built to be run by an AI agent. You install a skill with npx skills add heygen-com/hyperframes and your agent (Claude Code, Cursor, Gemini, Codex) learns the framework. In Claude that shows up as commands like /hyperframes and /gsap. The official pitch is that you talk to the agent like a video editor: "make the title twice as big, add a lower third at three seconds, fade out at the end."
• It ships a catalog of 50+ blocks. Social overlays, shader transitions, animated data charts, cinematic effects, vertical 9:16 social templates. You pull one in with a single command like npx hyperframes add data-chart.
• It does transparent overlays too. It can render a clip with a see through background as a ProRes 4444 MOV (the format CapCut and Premiere want) or a WebM. This is the same overlay capability we set up in Remotion.
• Requirements: Node 22 or newer and FFmpeg on the machine that renders. It runs locally or in Docker.

There is even an official guide in their repo titled "claude design hyperframes," which is almost word for word the thing you asked about: using Claude to design and edit these videos.

2. Hyperframes vs Remotion, plainly

You already have a Remotion starter built. Here is the honest comparison so you can decide whether to keep both or consolidate.

The deciding insight is this: large language models like me are trained on enormous amounts of HTML and very little Remotion-flavored React. So when I author a Hyperframes composition I am writing in my strongest language, and you can read the timing right in the markup. Remotion is more mature and is unbeatable when you want to spit out thousands of videos from a spreadsheet, but for the way you and I actually work, the friction is lower with Hyperframes.

Neither one changes the hard constraint: the actual render runs on your Mac (or a cloud box), not inside this chat. Both need Node and FFmpeg there.

3. Can Claude really help edit video? Yes, with one honest line drawn

This is the part worth being precise about, because "AI edits your video" gets oversold everywhere.

What I can do directly, right now, in this session:

• Write and iterate the full HTML plus GSAP (or Remotion) compositions, like a video editor you talk to. Bigger title, new lower third, change the timing, swap the music cue. This is the Hyperframes "talk to the agent" workflow, and it is the core of what you flagged.
• Run FFmpeg directly here in the sandbox for real edits that do not need a browser render: trimming, joining clips, changing speed, mixing and ducking audio, simple overlays, format conversion. I already did exactly this when I slowed the Lily voiceover and synced it.
• Drive your actual desktop or a browser tool when a graphical app is the only option, though that is slower and less reliable than writing the video as code.

What I cannot do here, and where it has to run:

• I cannot run the headless Chrome render inside this chat (no browser engine available in the sandbox). So the final Hyperframes or Remotion render happens on your Mac with one command, or on a small cloud machine we set up once.

So the real shape of "Claude editing video" is: I author and revise the video as code and do the FFmpeg level edits in here, you press render on your machine, we iterate. That is genuinely powerful and it is exactly what Hyperframes was designed to enable. It is not me dragging clips in a hidden Premiere timeline, and anyone who claims that is the workflow is overselling.

4. How this helps the three Affirmology videos

Website teaser and post audio film (today: GSAP in the browser). Right now these live as animated HTML in the product. The unlock is that Hyperframes uses the same GSAP plus HTML, so one source can serve two outputs: the live interactive web page, and a rendered MP4 of the same thing for ads, social, email, or a fallback where live animation is not ideal. We stop maintaining two separate art pipelines.

Investor film (not built yet). This is where it shines. Instead of rendering graphics in one tool and footage in another and stitching them in CapCut, you can compose the whole frame in one HTML file: your Higgsfield footage as background <video> clips, the stat cards and pipeline and the June 20 chart reveal as GSAP overlays on top, and the voiceover and music as audio tracks, then render one finished MP4. Or, if you still want to hand pieces to a human editor, render just the graphics as transparent ProRes overlays. Either way the authoring is HTML, which is the way I already build your primer pages, so the handoff between us is smooth.

A note on Higgsfield. Hyperframes does not replace Higgsfield. Higgsfield still generates the cinematic footage (cosmic skies, the Sophia and Atlas statues, the Loft). Hyperframes is where that footage gets composed with graphics, text, and audio into the final cut. They sit next to each other cleanly.

5. Where this goes next (future projects)

• Personalized share videos at scale. Because Hyperframes is deterministic and agent driven, we can generate a unique short video per user straight from their chart data. Imagine every Affirmology customer getting a shareable 20 second "this is my blueprint" clip, mass produced from the same template with their own numbers. That is a growth engine, not just a brand asset.
• An ad factory. The 50+ block catalog plus 9:16 social templates means we can produce a high volume of paid social cuts quickly for the July to September ad push, all on brand.
• Data and stat reels. Animated chart blocks turn the market numbers and the science into clean motion graphics without hand animating each one.
• Optional HeyGen tie in. Since HeyGen makes Hyperframes, there is a path to their avatars and text to speech later if we ever want a presenter, though that is a someday option and not part of the current mysterious, faceless aesthetic.

6. Honest limitations and risks

• Hyperframes is new (released 2026, a few hundred GitHub stars). Remotion is more battle tested. New tools can have rough edges.
• Rendering needs Node 22+ and FFmpeg on your Mac. You just installed Node, so we should confirm the version is 22 or higher and install FFmpeg once.
• For overlays handed to an editor, use the ProRes MOV export. The WebM alpha format is ignored by CapCut and Premiere (they show the transparent areas as black), so it is browser only.
• The render still does not happen in this chat. It happens on your machine. That is true of Remotion too.

7. Recommended next steps

1. Run a quick head to head. I take one existing asset (a stat card, or a slice of the primer) and build it as a Hyperframes composition. You render both the Remotion version and the Hyperframes version on your Mac. We pick the pipeline that feels best. Low effort, settles the question.
2. Get your Mac render ready once. Confirm Node is version 22 or higher, install FFmpeg. After that, every future video is one command.
3. If Hyperframes wins, I install its skill and from then on you can talk to me like a video editor and I produce the cuts as code.
4. Keep Higgsfield in the plan as the footage generator regardless of which code tool we pick.

My lean: Hyperframes is the better fit for us specifically, because it is GSAP plus HTML (your look, my strongest language), open source and free, and built to be run by an agent. Remotion stays as a viable backup since it is already scaffolded. One render test will make the call obvious.

Sources

• Hyperframes on GitHub (official, HeyGen)
• Hyperframes README
• Hyperframes "Claude design" guide
• Hyperframes rendering and transparency docs
• Video as Code: A Deep Dive into HeyGen's Hyperframes
• HeyGen's HyperFrames: the open source framework challenging Remotion
• Hyperframes vs Remotion (official guide)
• What Is HyperFrames? The HTML-Based Video Renderer for AI Agents (MindStudio)
• Hyperframes student kit (Hyperframes + GSAP, 12 projects)