What does “HyperFrames Guide” cover?

It has 10 sections, starting with “What is HyperFrames?”, “How it works”, “Three ways to use it” and “Your first video”, plus 6 more sections.

How long does it take to read?

About 2 minutes. Every section is a short, self-contained card, so you can jump straight to the part you need.

Yes. The full guide is free to read on this page, with no sign-up.

When was this guide last updated?

It was last updated in November 2026.

Free guide

HyperFrames Guide

Make videos by describing them to an AI agent: HeyGen’s free, open-source HTML-to-video framework explained

10 bite-sized sections
2 min read
Free, no signup

Short answer

A free HyperFrames guide as of November 2026: what HyperFrames is, how HTML becomes video, the free Studio desktop app, adding HyperFrames skills to Claude Code, Codex, or Cursor, the connector for Claude and ChatGPT with cloud rendering, your first video step by step, editing by typing, pointing, or drawing, ready-made blocks, local vs cloud rendering, HyperFrames vs Remotion, good uses, and tips.

Updated November 2026

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money online Free: 399+ ways to make money online

Inside this guide

Short cards you can read in order or jump straight to. Tap the link icon on any card to share just that part.

All free guides

What is HyperFrames?

HyperFrames is a free, open-source framework from HeyGen that turns HTML, CSS, media, and animations into MP4 videos. It is built for AI agents: you describe a video, and an agent writes and renders it. It uses the Apache-2.0 licence.

If an AI can build a web page, it can now build a video.

How it works

Each video is a web page with a timeline
Animations are seekable, so every frame renders the same way every time
A headless browser captures frames and FFmpeg turns them into video

Three ways to use it

Studio app: A free desktop app for macOS, Windows, and Linux where you describe a video and an agent builds it
Agent skills: Run npx skills add heygen-com/hyperframes to teach Claude Code, Codex, or Cursor how to build HyperFrames videos
Chat connector: A beta connector for Claude, ChatGPT, and Grok that renders in the cloud under your HeyGen account

Your first video

Install the Studio app, or add the skills to your coding agent
Describe the video: length, format, style, and message
Watch the live preview
Ask for changes
Render to MP4

Make a 20-second vertical ad for a coffee subscription: dark background, big bold captions, three product benefits, a price reveal, and an end card with the website.

Edit naturally

Type changes in plain language
Point at parts of the picture
Draw or comment on frames

Use ready-made blocks

HyperFrames has a registry of hundreds of ready-made blocks and components, such as transitions, titles, captions, charts, and overlays, that agents can install and edit.

Local or cloud rendering

Local: Free, runs on your computer, but heavy renders can make laptops hot and slow
Cloud: Renders on HeyGen’s servers through the connector or cloud option

While iterating, check single frames or short low-resolution drafts, and do one full-quality render at the end.

HyperFrames vs Remotion

HyperFrames: Plain HTML and CSS, made for AI agents, Apache-2.0
Remotion: React-based video framework with its own licence terms

Both render video from code. Pick the one that fits your agent and your team’s skills.

Great uses

Product launch and promo videos
Social clips with animated captions
Explainers with charts and diagrams
Title cards, lower thirds, and overlays

Tips

Give the agent your brand colours and fonts first
Plan scenes before animating
Keep captions inside platform safe zones
Use only music, fonts, and footage you have rights to

The golden rule

Do not render over and over. Describe the video clearly, check frames and drafts as you go, and do one final render when it is right.

Open source
Studio app
Agent skills
Connector
Blocks
Cloud render
Remotion

Install the HyperFrames skills in your coding agent and ask for a 10-second title card today.

Share this guide

Get my visual guides Mini guides: AI, tech, no-code and business

Frequently asked questions

The quick answers, if you just need the gist.

What does “HyperFrames Guide” cover?: It has 10 sections, starting with “What is HyperFrames?”, “How it works”, “Three ways to use it” and “Your first video”, plus 6 more sections.
How long does it take to read?: About 2 minutes. Every section is a short, self-contained card, so you can jump straight to the part you need.
Is this guide free?: Yes. The full guide is free to read on this page, with no sign-up.
When was this guide last updated?: It was last updated in November 2026.

Keep reading

More free guides you might like. Still no signup.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.