HyperFrames: Open-Source HTML-to-Video with 19 Agent Skills

Ever wanted an AI agent to just write a video for you — not a script, not a storyboard, but the actual video file? And I’ve been chasing this for months. Claude can write code. Cursor can debug. But video has always meant opening a timeline, tweaking keyframes, or wrestling with React components.

Then HyperFrames dropped. And it’s not just another renderer — it ships 19 built-in AI Agent Skills that let Claude Code, Cursor, or Codex generate and render actual video projects. I spent an afternoon with it. Here’s what I found.

What Is HyperFrames?

HyperFrames is an open-source (Apache 2.0) TypeScript framework from HeyGen that takes HTML/CSS with declarative animation attributes and renders it into deterministic MP4 video. No React. No bundler. No build step. You write index.html, it becomes output.mp4.

GitHub’s sitting at 31,301 stars right now — and the project’s only been public since March. And that trajectory tells you something about how hungry the dev community is for a video pipeline they can actually control.

The 19 Agent Skills — This Is the Real Differentiator

Most HTML-to-video tools focus on the renderer. HyperFrames does that well, but the Agent Skills are what sets it apart. I installed the CLI and added the skills pack in about 30 seconds:

npx hyperframes init my-video
cd my-video
npx hyperframes preview

And the init command scaffolds a complete project: index.html with data-frame and data-duration attributes, a samples folder with starter templates, and a hyperframes.config.js so you can tweak output resolution and FPS. Then the preview command opens a browser tab showing your video timeline in real time — scrub through frames, check timing, iterate on CSS. Zero build step, zero config wrestling.

Then I loaded the Agent Skills into Claude Code:

npx skills add heygen-com/hyperframes

The skills break into three groups:

Router Agent — /hyperframes serves as the entry point. Describe what you want in natural language and it maps your request to the right workflow.

Workflow Skills — These are the ones I actually tested:

• /product-launch-video — generates a full product teaser HTML project
• /website-to-video — converts a landing page into a walkthrough animation
• /faceless-explainer — creates educational content with animated slides
• /social-clip — crops and formats for TikTok/Reels/Shorts aspect ratios

Domain Skills — Lower-level capabilities that the workflows call under the hood:

• /hyperframes-core — the rendering engine interface
• /hyperframes-animation — GSAP timeline builder
• /hyperframes-creative — layout and typography suggestions
• /hyperframes-cli — pipeline orchestration

So I tried the product-launch workflow. Told it “generate a 30-second product teaser for a minimalist desk lamp.” It returned a complete HTML project with CSS animations, data-* timing attributes, and a working preview in about 12 seconds. I hit render next — the npx hyperframes render command spun up Chrome headless, ran through each frame, and spat out a 5.2 MB MP4 in roughly 40 seconds on my Ryzen 9 machine. And the output was clean: smooth GSAP-triggered fades, consistent 30 fps, correct aspect ratio. And that’s faster than I could’ve mocked it up in After Effects — and it’s fully deterministic. Render it again, get the exact same output, every time.

HyperFrames vs Remotion

If you’ve used Remotion, the comparison is inevitable. Here’s how they stack up:

But the biggest gap? Agent-native design. Remotion wasn’t built for AI agents. Its React component model and bundler dependency make it awkward for Claude or Cursor to work with. HyperFrames’ pure HTML approach means the AI writes exactly what it sees — no abstraction layer.

This kind of agent-first architecture is something I’ve seen across other open-source tools I’ve reviewed here — like the ECC Agent Harness OS which takes a similar “native agent skills” approach to orchestrating workflows.

Cloud Rendering — When Local Isn’t Enough

HyperFrames renders locally by default. It needs Node 22 and FFmpeg — reasonable, but your laptop fan will let you know it’s working.

It also supports AWS Lambda for cloud rendering. But honestly? If you’re running multiple renders, a $6/month VPS will outrun Lambda cost-wise for predictable workloads. And for teams, the Lambda integration means you can plug it into a CI/CD pipeline — push HTML changes, trigger a render, get the MP4 back as a build artifact. No manual export step, no waiting on a UI to finish.

If you’re setting up your own rendering instance, I’ve got a Hermes VPS deployment guide that walks through the setup on a $6 DigitalOcean droplet — same principle applies here.

What to Watch Out For

Look, I’m not going to pretend this is perfect. Three things stood out:

1. Node 22 + FFmpeg required — If you’re on Node 18 or don’t have FFmpeg installed, you’ll spend the first 10 minutes fixing dependencies.
2. No non-linear editing — Complex projects with multiple audio tracks, masking, or timeline trimming? Not ready. This is for linear, deterministic renders.
3. Preview quality ≠ render quality — Sure, the browser preview looks crisp. The rendered MP4 sometimes drops subtle CSS 3D effects depending on your Chrome version. Test before you ship.

Bottom Line

HyperFrames is the first video framework that genuinely feels built for the AI agent era. Still, the 19 Agent Skills aren’t a marketing gimmick — they’re a real productivity shift if you’re using Claude Code or Cursor to generate video content. It won’t replace Premiere Pro for film editors. But for developers who need automated, deterministic video pipelines? Honestly? This is the most exciting thing I’ve seen all quarter.