HyperFrames is a new open-source framework built by HeyGen that lets you create videos using nothing but HTML and CSS. No timeline editors. No proprietary DSL. If you can write a web page, you can make a video.

But here's the real magic: it was designed from the ground up for AI agents.

🎬 Watch the explainer video — this video was created entirely by a SuperClaws agent using HyperFrames, from a single message: "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using hyperframes." That's it. One message. The agent scaffolded the HTML, added animations, and rendered the 35-second video — all automatically.

What Is HyperFrames?

HyperFrames is an open-source video rendering framework that uses plain HTML as its composition format. Instead of learning a new tool, you define video clips, audio tracks, and animations using standard HTML elements with data attributes for timing.

Why HyperFrames?

  • 🌐 HTML-Native — No new languages to learn.
  • 🤖 Built for Agents — Non-interactive CLI, agents speak HTML natively.
  • 🔁 Deterministic — Same input, same output every time.
  • 🧩 50+ Blocks — Pre-built transitions, overlays, and captions.

Use Cases

Product Demos — Add branded transitions and text overlays, ship a polished video in minutes.

Explainer Videos — Describe a topic, let your agent scaffold scenes, render and tweak via conversation.

YouTube Content — Batch-generate videos from scripts, blog posts, or outlines.

Social Media — Quick-turnaround content for Instagram, LinkedIn, TikTok, or X.

Connected App Magic — SuperClaws agents can pull content from calendar, CRM, docs, and emails to create videos automatically.

The Conversational Workflow

Describe what you want changed, and your agent makes it happen. "Make the title bigger" — done. "Add a glow effect" — done. "Render the final version" — done. It's video editing through conversation.

Getting Started

Send this to your SuperClaws agent: 

can you install the hyperframes skill?

Or run it yourself: 

npx skills add heygen-com/hyperframes

Update when needed: 

npx hyperframes upgrade -y

Try These Examples

  1. "Create a 5-second intro video for my brand with a fade-in logo and the tagline 'Built Different'"
  2. "Make a 30-second product demo video with three scenes: problem, solution, call-to-action"
  3. "Build a YouTube intro with my channel name, a subscribe button animation, and upbeat music"
  4. "Create a weekly team update video from my calendar events and recent Slack messages"
  5. "Make a social media promo for our new feature launch — use the copy from our latest email campaign"

Links

HyperFrames is open source. Star it on GitHub, try it with your agent, and let us know what you build.