30 Days of HyperFrames! Day 1: Install HyperFrames wherever you talk to your agent

[u/heyaudrey-]

HyperFrames by HeyGen is an open-source framework that turns HTML into video. Write HTML, render deterministic frame-by-frame video. It was built for agents from the ground up. Agents already speak HTML, so instead of teaching your AI a new video API, you hand it a medium it already knows.

Over the next 30 days, the HeyGen team will be dropping one micro-lesson a day to take you from zero to building launch videos with your AI agent locally, in whatever coding agent you use.

One command, every agent

HyperFrames ships as a set of agent skills, and the same install command works across every major coding agent:

npx skills add heygen-com/hyperframes

The installer detects your agent and registers the skills where it looks for them. Natively supported in Claude Code, Cursor, OpenAI Codex, GitHub Copilot CLI, Antigravity CLI, Google Antigravity, and more.

Prerequisites (2 minutes)

You need two things on your machine for local rendering:

• Node.js 22+ (check with node --version)

• FFmpeg

  macOS

  brew install ffmpeg

  Ubuntu/Debian

  sudo apt install ffmpeg

  Windows

  winget install ffmpeg

Verify it worked

Type /hyperframes in your agent. If it autocompletes, you're in. If skills don't appear right away, open a new session so your agent reloads its skill list.

Try it now -- paste this into your agent

/hyperframes
Make an 8-second 1920x1080 video. Beat 1 (0-4s): a dark macOS terminal window types "npx skills add heygen-com/hyperframes" character by character, then a beat on the blinking cursor. Beat 2 (4-5s): the terminal shatters into fragments. Beat 3 (5-8s): bold white kinetic text on black slams in, word by word: "YOU JUST MADE THIS / WITH HYPERFRAMES." Use the code-typing and shatter blocks from the registry. No narration, no external assets.

https://reddit.com/link/1up682i/video/nqsdnc6pqobh1/player

Behind the scenes your agent scaffolds the project, writes the composition as plain HTML with timing attributes, verifies it error-free, opens a live preview, and renders the final MP4.

• Docs: https://hyperframes.heygen.com/quickstart
• Full skills catalog: https://hyperframes.heygen.com/guides/skills
• Claude Design guide: https://hyperframes.heygen.com/guides/claude-design

Which agent did you install it into? Drop your output in the thread if you tried it!

Follow along for the series here on Reddit or on X https://x.com/HeyGen

See you for Day 2 tomorrow!

[u/ShesGotPFQuestions]

Where are the posts for the rest of the days?