Design#Motion graphics

hyperframes: an agent that interviews you first, then renders video from HTML

HeyGen's open-source Agent Skill is the entry point for video work: it interviews you into a BRIEF.md, routes to one of 10 workflows, renders MP4 from HTML.

Skill details

Install
npx skills add heygen-com/hyperframes --skill hyperframes

A cream graph-paper frame with a large cobalt serif headline, The Grid Is the Canvas, and a block of cobalt vertical lines on the right, from the HyperFrames Cobalt Grid design template

Ask a coding agent for a video and one of two things tends to happen: it starts writing code immediately and delivers a clip nobody approved, or it wanders between Remotion, FFmpeg and ad-hoc scripts. hyperframes is the entry skill of HeyGen’s open-source HyperFrames framework (Apache-2.0, created March 10, 2026, about 58.6k stars on 2026-10-08), and its SKILL.md declares itself the mandatory first read for any video, animation or motion-graphic request. It renders nothing itself. It works out what you want, picks a creation workflow, and has the agent write an HTML composition that renders to MP4.

The order it works in

HyperFrames treats a video as one HTML file: timing is declared with data-* attributes, animation has to be seekable, and the framework owns media playback. The entry skill puts a few steps in front of that.

  1. Read project state first. A BRIEF.md means execute the workflow named inside; only hyperframes.json or STORYBOARD.md means resume from those files; a specific operation on an existing project, such as validate, preview or render, means do just that and skip the interview.
  2. Run the intent interview for anything new. It ends by writing BRIEF.md, and the SKILL.md says that file is the only routing artifact later steps read.
  3. Route through a ten-row table: Remotion port, slideshow deck, plain captions, graphic overlays on talking-head footage, beat-synced music video, unnarrated motion graphic under about 10 seconds, GitHub PR explainer, product-site promo, topic explainer with no site, and /general-video for everything else.
  4. Install on demand. The agent runs npx hyperframes skills update <workflow-name> for the chosen workflow, and if that fails it must surface the error instead of reconstructing the workflow from memory.

What it constrains

  • Usage check at the start: it runs npx hyperframes usage --json when creation begins and again before rendering; if the command fails or returns status: unknown, the agent reports usage as unknown rather than guessing.
  • Routing by deliverable: an unnarrated short title animation goes to /motion-graphics, the same idea with narration is /general-video, and music only picks /music-to-video when its beat grid drives the picture.
  • Pinned CLI versions: scaffolded projects pin hyperframes@<version> in package.json; on resume the agent probes with npx hyperframes@latest upgrade --project . --check, and a bump must pass npx hyperframes check and be named in the summary.
  • Length ceiling: the specialized narrative workflows cover up to about 3 minutes, strongest at 30 to 90 seconds; longer pieces go to /general-video.
  • Preview before the delivery render: the final look opens in the Studio preview, where you can edit text on the canvas or drag clips on the timeline.

Who it’s for

Developers who want Claude Code or Codex to produce product intros, PR walkthroughs or data-chart animations reliably will save time compared with letting the agent pick its own tools. It also helps to know how it relates to OpenMontage, which lists HyperFrames as one of its two composition engines and vendors a copy; for how others have used HTML plus TTS in practice, see the video playbook article. A single-purpose skill like srt-whiteboard-animation is the opposite approach: one workflow, start to finish.

Three catches. The runtime needs Node.js 22 or newer and FFmpeg, which is what the README lists. Next, npx skills add heygen-com/hyperframes --skill hyperframes installs only the entry point; the creation workflows download through the HyperFrames CLI the first time they are needed, so it will not run offline, and the README warns that the skills.sh registry can lag main by hours, so use npx hyperframes skills update for the newest copy. Finally, the interview-and-brief loop is heavy if you want a 10-second clip from one sentence, and I found nothing in the SKILL.md saying how the allowance behind the usage command is metered, so check it yourself before a long run.