Jonathon's AI Wiki

HeyGen Hyperframes

25 min read

Source: Hyperframes GitHub repo, Hyperframes prompting guide, raw/HyperFrames_-_Code_Your_Videos_in_HTML_No_Timeline_Required_HeyGen.md (HeyGen Level Up series, 2026-05-22)

Currency note (refreshed 2026-06-27). The “Key Takeaways” and “Implementation” sections below were first crawled from the old hyperframes.mintlify.app docs on 2026-04-17 and describe the v0.x framework as it stood then. The framework has since moved to the v0.7.x line and the docs to hyperframes.heygen.com; the stale specifics (three slash commands, six-package monorepo, mintlify URLs) are corrected inline below and superseded in full by the June 2026 update sections and the documentation cluster further down. Use the current facts: docs at hyperframes.heygen.com (playground at hyperframes.dev), a router skill bundle, ~13 packages, and GSAP / CSS / Lottie / Three.js / Anime.js / WAAPI / custom animation adapters.

Hyperframes is HeyGen’s open-source video rendering framework (Apache 2.0; “Write HTML. Render video. Built for agents.”) where video compositions are written as plain HTML with data-* attributes and rendered to MP4 via headless Chrome + FFmpeg. It’s the composition layer — motion graphics, captions, transitions, TTS, and layout, authored by an AI agent. The framework ships installable skills (npx skills add heygen-com/hyperframes) that teach Claude Code, Cursor, Codex, and Gemini CLI the composition rules so the agent gets HTML, timelines, and GSAP easing right on the first prompt.

Key Takeaways

  • Tagline: “Write HTML. Render video. Built for agents.” Compositions are plain HTML with data-start / data-duration / data-track-index attributes — no proprietary DSL, no React components.
  • A router skill bundle installed by one command. npx skills add heygen-com/hyperframes registers the full bundle into Claude Code / Cursor / Codex / Gemini CLI — /hyperframes is the router (read first; it maps intent to a workflow), alongside creation workflows (/product-launch-video, /website-to-video, /faceless-explainer, /pr-to-video, /embedded-captions, /talking-head-recut, /motion-graphics, /music-to-video, /slideshow, /general-video) and domain skills (/hyperframes-core, -animation, -creative, -media, /media-use, -cli, -registry, /remotion-to-hyperframes). ~17 skills in the repo clone, ~19 globally. (Supersedes the original three-command /hyperframes + /hyperframes-cli + /gsap set — /gsap folded into /hyperframes-animation. Full breakdown: Skills Catalog.)
  • Non-interactive CLI by design. npx hyperframes init | preview | render is agent-friendly — no prompts, no TTY interaction, deterministic outputs (identical inputs → identical outputs) for automated pipelines.
  • Frame Adapter pattern. Supports multiple animation runtimes side-by-side: GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or a custom frame adapter. One composition can mix them.
  • Multi-package monorepo (~13 packages). hyperframes (CLI), @hyperframes/core (types/parsers/runtime), @hyperframes/engine (headless-Chrome + FFmpeg capture), @hyperframes/producer (full pipeline), @hyperframes/studio (browser editor), @hyperframes/player (embeddable web component), @hyperframes/shader-transitions, plus @hyperframes/sdk, @hyperframes/aws-lambda, and @hyperframes/gcp-cloud-run (distributed rendering on AWS Lambda / GCP Cloud Run is now first-class). Full graph: Packages.
  • Two prompt shapes for agents. Cold start — describe duration, aspect ratio, mood, key elements from scratch. Warm start — feed a URL / PDF / CSV / transcript and ask for synthesis (e.g., “turn this changelog into a 30s release announcement”).
  • Natural-language easing vocabulary. smooth, snappy, bouncy, springy, dramatic, dreamy map to GSAP eases (power2.out, power4.out, back.out, elastic.out, expo.out, sine.inOut). Timing shorthand: fast 0.2s / medium 0.4s / slow 0.6s / cinematic 1–2s.
  • Caption tone presets. Hype, Corporate, Tutorial, Storytelling, Social — each defines typography, animation, and size ranges. Per-word styling is supported (“make brand names larger with accent color”).
  • Local Kokoro TTS, no API key. Voices bucketed by content type (product demo / tutorial / marketing). Requestable in natural language: “British male voice at 1.1× speed.”
  • Seven technical rules the skill enforces automatically. Register timelines on window.__timelines, videos must be muted (audio in separate <audio> elements), no Math.random(), synchronous timeline construction (no async/await in GSAP setup), timed elements need class="clip", entrance animations on every scene, scene-to-scene transitions.
  • 50+ prebuilt blocks. Shader transitions, social overlays, data visualizations, cinematic effects — npx hyperframes add, browsable at hyperframes.heygen.com/catalog.
  • Node.js ≥ 22 + FFmpeg. Those are the only runtime dependencies.
  • Apache 2.0. Forkable, self-hostable, commercial use permitted.
  • frame.md templates + design.md→frame.md tooling (2026-06-09). [X signal — HeyGen / @liu8in 2026-06-09] HeyGen open-sourced 10 frame.md templates to uplevel compositions, plus a free tool that generates a frame.md from a design.md (getdesign.md). The showcased workflow is design-system-first: take a brand’s design.md, convert to frame.md, then have the agent build the full ad — the Ollama promo demo ran Claude Code → HyperFrames → HeyGen MCP/CLI → rendered ad. (Source: raw/x-bookmarks-recent-digest-2026-06-09.md, raw/x-bookmark-2064073876817268908.md.)
  • Now an official @claudeai connector (2026-06-09). [X signal — HeyGen] HyperFrames is now an official Claude connector, running as an MCP inside Claude so the agent turns dense docs/answers into video where you work (“docs get skimmed, video gets understood”). Productizes the Claude Code → HyperFrames pipeline as a first-class claude.ai connector (see Claude connectors). (Source: raw/x-bookmarks-recent-digest-2026-06-10.md.)

Why It Matters

  • Closes the agent-authoring gap for motion graphics. Generating motion graphics from prompts has historically required hand-rolling prompt patterns against a React-based framework. Hyperframes ships that as an official skill with enforced conventions — the agent gets the rules before it writes the first line.
  • HTML is a more portable target than React. Every team member can read a Hyperframes composition without understanding component state or JSX. Lowers the review bar for non-engineering collaborators.
  • Deterministic rendering is a scheduled-agent-friendly contract. Same HTML + assets → same MP4. That’s what you need to wire video rendering into a scheduled agent: no flaky replays, no “why is this frame different.”
  • Non-interactive CLI fits the Claude Code / subagent model. A subagent can run npx hyperframes render without a human in the loop — contrast with tools that require clicking through a UI.

How WEO uses it (built reality, 2026-06-27)

HyperFrames is WEO’s chosen b-roll / motion-graphics layer for the AI Video Strategy brand-promotion pilot — deterministic, brand-locked HTML + GSAP cutaways, lower-thirds, and dashboard mockups rendered to MP4. It pairs with the weo_video Python pipeline (HeyGen Avatar V talking heads + real-footage b-roll + PIL/PNG captions + two-pass −14 LUFS audio). Operating notes specific to the WEO setup:

  • Generative b-roll (Higgsfield / VEO / Runway) is not the path. Higgsfield’s generative b-roll was tried and abandoned (static output, repeated 502s, and charges on failed jobs); the pivot is real-footage b-roll. Auto-reframe to 9:16 / 1:1 / 16:9 is done with ffmpeg (weo_video.reframe), not Runway. These remain catalogued as neutral vendor tools — only WEO’s usage plan changed.
  • Mandatory deband post-pass. hyperframes render emits an 8-bit H.264 stream that posterizes the brand’s smooth dark-navy gradients into visible banding; every dark-gradient render gets a deband + grain dither pass before delivery (raising bitrate/CRF alone does not fix it).
  • Captions are PNG overlays. This Mac’s ffmpeg has no libass/drawtext, so the branded caption rail is rendered PIL→PNG and composited — not via the subtitles/drawtext filters.
  • /embedded-captions (weo DNA) is a new capability. The framework-native captions skill was piloted and a weo theme/DNA built (navy rail + mint emphasis + a hero word composited behind the speaker with real matte occlusion) — a premium treatment PIL can’t do — kept alongside, not replacing, the PIL rail.

Implementation

Tool/Service: HeyGen Hyperframes (open source, github.com/heygen-com/hyperframes, Apache 2.0)

Setup (agent workflow, recommended):

  1. In the project directory, run:

    npx skills add heygen-com/hyperframes

    This installs the HyperFrames router skill bundle (/hyperframes + its creation-workflow and domain skills) into Claude Code. Pass --all to install every workflow at once.

  2. Scaffold a new video project:

    npx hyperframes init my-video
cd my-video

  3. Open the project in Claude Code. Prompt with the slash command explicitly — e.g.

    /hyperframes Create a 10-second product intro, 9:16 vertical, warm grain analog mood, fade-in title over a dark background, lower third at 0:03 with tagline, Kokoro af_heart voiceover reading the script.

  4. Preview live in a browser while iterating:

    npx hyperframes preview

  5. Iterate with small targeted prompts — “make the title 2x bigger,” “swap to dark mode,” “move the captions up.” Avoid re-specifying from scratch.

  6. Final render:

    npx hyperframes render --output final.mp4

Setup (manual, no agent): Steps 2, 4, 6 work standalone — but you write the HTML by hand. The agent path is the intended one.

Cost:

  • Hyperframes itself: free (Apache 2.0). ^[inferred — pricing not on the GitHub or prompting-guide pages]
  • Rendering compute: your local machine (headless Chrome + FFmpeg), or a hosted/self-hosted cloud backend (HeyGen-hosted cloud, or self-hosted AWS Lambda / GCP Cloud Run). ^[inferred for local cost; cloud backends are pay-per-credit / your own infra]
  • Kokoro TTS: free, runs locally, no API key.

Integration notes:

  • Node.js ≥ 22 and FFmpeg are required. Expect a one-time install bump on older dev boxes.
  • Works with Claude Code, Cursor, Gemini CLI per the repo; Codex works per the prompting guide.
  • Deterministic rendering means compositions can be version-controlled and re-rendered from any commit — useful for asset refresh cycles.
  • The @hyperframes/player web component is the path for embedding a live-previewable composition in a browser-based review tool.
  • Plain-HTML output should be much easier for non-engineering reviewers to comment on line-by-line than Remotion’s React tree.

Prompting Patterns Worth Stealing

Applicable to any motion-graphics workflow even if you don’t adopt Hyperframes:

  • Natural-language easing vocabulary (smooth, snappy, bouncy, etc.) is a clean abstraction for briefing any motion tool. Works for Remotion and After Effects agents too.
  • Caption tone presets (Hype / Corporate / Tutorial / Storytelling / Social) are a useful axis for any content-tone rubric.
  • Energy-based transition picker (Calm / Medium / High) is a more intuitive control than naming specific transition types. Rules out slow crossfades that read as generic when you want “high energy.”
  • Audio-reactive intensity guidance — 3–6% for text, 10–30% for backgrounds — is concrete and testable. Worth cribbing for any audio-driven motion work.

Update — May 2026 (V2 capabilities, per Jay / Robo Nuggets walkthrough)

Source: Claude + Hyperframes V2 automates video editing like never before — NEW Skill (Jay, Robo Nuggets, May 6 2026).

Hyperframes V2 ships four capability extensions the original prompting guide didn’t cover:

  • Subtitles — automatic subtitle layer with style presets matching the existing caption-tone vocabulary.
  • Floating card animations — composable card overlays with entrance + dwell + exit timings (similar to broadcast lower-thirds).
  • Smooth animations + motion graphics — automatically applied; the agent gets motion-graphics-as-default rather than as opt-in element.
  • 3D assets — visually-striking 3D elements composable into 2D HTML compositions.

Hyperframes runs across coding agents. Jay confirms the skill works equally well across Claude Code, Hermes Agent, and Open Claude — same SKILL.md, same primitives, swap the runtime. Validates the cross-runtime SKILL.md design pattern from skills applied at the third-party level.

Adoption signals. HeyGen team has been “actively shipping a lot of updates” — Hyperframes for Hermes, hyperframes.dev community website, all of HeyGen’s own promotional videos using Hyperframes. Robo Nuggets ships its own Hyperframes helper skill that pre-loads installation + best-use-cases context for any agent.

Use-case framing from Jay: podcast intros, promotional announcement videos one-shot from a prompt, branded explainer assets — all via talking to the agent with no code review needed.

Practical walkthrough — Robo Nuggets, May 2026

Source: Hyperframes + Claude AI… Goodbye Video Editor Forever (Robo Nuggets channel, mid-May 2026 — raw/Hyperframes_+_Claude_AI..._Goodbye_Video_Editor_Forever.md).

Hands-on walkthrough by a non-developer-positioning creator. Adds operator-level detail the prior coverage didn’t pin down:

  • Two install routes confirmed. Either point Claude Code at the Hyperframes GitHub repo with the prompt “I want to use HyperFrames in this project. Here is the repository. Set up everything needed so I can create, preview and render videos” — Claude reads the repo, installs dependencies, prepares the environment. Or paste a one-line skill install command directly into the Claude Code text area. Both end at the same state; the repo-pointer route is preferred when the agent should also document the setup decisions.
  • Workspace convention. Author keeps a dedicated AI projects/ parent folder, one subfolder per project. Reduces context bleed between agent runs and gives Claude an unambiguous CWD per render.
  • Two preview surfaces, two purposes. (a) Preview directly inside the Claude desktop application — fast, in-conversation. (b) Preview in a browser via local server (npx hyperframes preview) — author’s preferred for iteration. The browser surface is what enables the iterate-while-watching pattern.
  • Two render routes, both deterministic. (a) Prompt Claude to "render this as a video file and save it to the project folder" — Claude drives the CLI, drops the MP4 into CWD. (b) Open the preview in the browser, hit the Renders button in the Hyperframes browser UI, pick MP4/MOV/WebP + quality, download. Same outputs either route.
  • Refinement is prompt-only, no timeline UI. “Make the title 2x bigger,” “slow down the animation,” “add a subtle glow” — every refinement is described in natural language and applied to the existing composition. No keyframes, no easing-curve dragging.
  • Source-to-video pattern. The “warm start” pattern from the prompting guide works on real assets: the author feeds a HeyGen Video Agent product page + asks for “a short cinematic explainer video based on this page… maintain a dark premium design style” — Hyperframes produces a structured visual explanation grounded in the page’s actual content.
  • Cost framing. Tutorial ships a clean 10-second cinematic intro for “the time it took to brew tea” — author’s anchor for the workflow’s cycle time vs the “few hours” it would take a video editor. Closes the agent-authored-motion-graphics value gap with a concrete number.

The walkthrough is the cleanest operator-level reference for the Claude Code + Hyperframes path as of May 2026; pair it with the prompting guide (linked above) for the underlying compositional vocabulary.

HeyGen Level Up series — 2026-05-22 first-party positioning

HeyGen’s own Level Up series episode (raw/HyperFrames_-_Code_Your_Videos_in_HTML_No_Timeline_Required_HeyGen.md) makes the official tagline explicit: “If you can describe it, you can render it.” Beyond the URL-to-video skill (invoke the website to Hyperframes skill on a URL), prompt-to-video, and PDF-source patterns covered above, the episode foregrounds a use case the prior coverage didn’t lead with — branded motion graphics composited directly over existing A-roll footage: drop in the footage, write a prompt, and Hyperframes generates the overlays, timing, and animation structure on top of the source video. Reinforces that Hyperframes targets both fully-generated compositions and post-production augmentation of existing material.

Update — June 2026 (Hermes-driven demo + newer registry blocks)

Source: raw/Hermes_Agent_+_HyperFrames_-_Free_Open-Source_AI_Tools_to_Create_Amazing_Videos.md (On Chain AI Garage / Tombi Studio, 2026-06-03) — a hands-on walkthrough driving the Hyperframes skill through Hermes Agent across five escalating builds (slides→video, a reusable Shorts template, website→promo, repo→architecture explainer, HTML-canvas VFX). It confirms documented features (warm-start from URL, reusable templates, cross-runtime including Hermes) and surfaces newer registry blocks not previously inventoried:

  • New registry blocks (creator-reported; verify against the live catalog). A GitHub-repo → architecture-explainer block; social-native editorial blocks (fake X-post card, Reddit / YouTube embeds, a YouTube-subscribe lower-third CTA); and HTML-canvas VFX blocks (UI-shatter-into-glass, rotating 3D-phone reveal, liquid backgrounds, device-frame iPhone/Mac modules). These partially answer this article’s catalog-contents open question — point the agent at the HTML-canvas docs directly when composing VFX.
  • Template-driven Shorts automation. A saved Hyperframes template lets you swap only the transcript to regenerate a fully-restyled short — cron-able for a 24/7 shorts pipeline (the same shape as the Hermes multi-agent triage pipeline’s “make an explainer video” fulfillment path, by the same maintainer).
  • Why drive it from Hermes vs Claude Code / Codex (creator’s framing). Running Hyperframes inside Hermes Agent lets the skill tap the agent’s other skills, memories, and project files, and supports unattended cron-driven rendering; Hermes shows a live studio preview on localhost (a scene-timeline mini-studio) and caught a real asset-render bug pre-export. Reported timing: ~9 min for a 16:9 slide-deck → video conversion. (Block names are auto-caption-sourced; confirm against the current catalog before relying on exact identifiers.)

Update — June 2026 (HeyGen MCP avatar generation → HyperFrames, one agentic pipeline)

Source: raw/How_To_Build_Full_AI_Videos_with_AI_Agents_HeyGen_+_Hyperframes_Workflow.md (YouTube 9yx8Ja1gztI, 2026-06) — adds the avatar front-end the composition-focused coverage above lacks: generating the talking-head with HeyGen’s MCP server and chaining it into a HyperFrames composition in a single Claude Code prompt. (Creator reports the HyperFrames repo at ~15k stars as of June 2026, up from 2.6k at this article’s creation.)

  • Connect HeyGen as an MCP server once, machine-wide. A single terminal command with the -S user flag registers the HeyGen MCP across every project (not per-repo). Then in Claude Code, /mcp → OAuth browser sign-in to your existing HeyGen account — no API key, no extra credits (it draws on your current HeyGen plan). The same HeyGen MCP also works in Codex, Cursor, and Gemini CLI. Requires a paid Claude + paid HeyGen account.
  • Install both skill packs by prompt, not by hand. Point Claude at the two GitHub repos: “Take a look at these two GitHub repos and install the skill packs from each… read the readmes to find the right install commands and run them.” The HeyGen skill pack teaches Claude to call HeyGen (scenes, timing, avatar selection, voice matching); the HyperFrames skill pack teaches composition authoring (title cards, lower thirds, GSAP, shader transitions).
  • Two IDs to grab first: an avatar look ID and a voice ID from the HeyGen dashboard (hover the avatar → three-dot → copy look ID; Voices tab → three-dot → get voice ID), or have Claude list avatars/voices by name. Each avatar exposes the motion engines it supports (name one only if supported; the demo leaves it on the default).
  • The one-prompt pipeline. A single prompt (e.g. “make a 30-second video about X, use my avatar [look ID] and voice [ID], build a HyperFrames composition with a title card, a sidebar that shows each tool logo when I mention it, captions synced to the audio, and an outro card; render the final”) drives the whole chain: Claude writes the script in your voice → calls HeyGen via MCP (passing the look + voice IDs) to render the avatar → grabs the transcript itself for word-level timestamps (unprompted — a background skill, to sync captions + logo reveals) → auto-fetches the rendered video into the project folder → authors the HyperFrames composition → renders the final. No app-juggling, no manual download.
  • Iteration is conversational; reformatting is one prompt. Drop real logo files into the project folder and say “use these instead of the ones you generated”; recolor captions (“electric blue with a subtle drop shadow”). Re-target the same content to 9×16 vertical for Reels/TikTok in one prompt (reframe or swap the avatar, adjust lower thirds). PDF → explainer works end-to-end too: feed a quarterly-report PDF and ask for a 60-second marketing explainer (avatar in a rounded frame on most slides, tall vertical layout on data-heavy ones) — Claude pulls the metrics from the PDF and writes the narration.

Full documentation cluster (June 2026)

The HeyGen docs at hyperframes.heygen.com were ingested in full on 2026-06-26. This hub is the overview; each area below is a focused deep-dive:

  • HyperFrames in Claude Design — draft a valid first-draft video in claude.ai/design, then refine in any coding agent (plus the Open Design BYOK twin).
  • Quickstart & CLI — the under-2-minute path plus the full hyperframes command surface (incl. cloud / lambda / cloudrun render backends).
  • HTML Schema & Compositions — the authoring contract: document structure, data-* timing attributes, the window.__timelines handshake.
  • Core Concepts — deterministic, seek-driven rendering + frame adapters + a fair HyperFrames-vs-Remotion teardown.
  • GSAP Animation — the paused-timeline contract, supported methods/properties, timeline-duration-equals-composition-duration.
  • Prompting HyperFrames — cold/warm start, the vocabulary cribs (easing, captions, transitions), per-agent notes.
  • Rendering — formats, the full render flag surface, local vs Docker determinism, batch/concurrency.
  • Website to Video — URL → production video in one prompt (the 7-step capture pipeline).
  • Common Mistakes & Troubleshooting — the 8 authoring pitfalls + environment/render fixes + the lint/doctor gates.
  • Block Catalog — the ~109-block registry (shaders, social overlays, lower thirds, code blocks, data viz, VFX).
  • Packages — the ~13-package monorepo (core/engine/producer/studio/player/shader-transitions + CLI, plus sdk/aws-lambda/gcp-cloud-run), incl. @hyperframes/player embedding.
  • Launch-Video Playbook (builder interview) — Bin Liu & Jake Moran on the operator workflow: frame.md, the open-sourced launch-video repo as a component library, storyboard.html, Studio/Inspector last-mile editing, model guidance, and the spatial-vs-temporal-aesthetics thesis.

Full guide pull (2026-06-27). The remaining prose guides from hyperframes.heygen.com were ingested to complete the cluster:

Catalog deep-dive (2026-06-27). All 133 catalog entries (109 blocks + 24 components) were pulled in full and split into 7 per-category reference articles, indexed from Block Catalog: Code, Transitions, Lower Thirds, Maps & Data Viz, Social & Platform UI, VFX & Liquid Glass, and Caption Components.

Two facts this ingest updates on the older coverage above:

  • The skill set expanded from 3 to ~18 skills (≈8 core + ~10 creation workflows). Three tiers — the /hyperframes router, ~7 domain skills (-core, -animation, -creative, -cli, -media, -registry, /general-video), and ~10 creation-workflow skills added by --all (product-launch-video, website-to-video, faceless-explainer, pr-to-video, embedded-captions, talking-head-recut, motion-graphics, music-to-video, slideshow); full breakdown in Skills Catalog — superseding the original “three slash commands” (/hyperframes, /hyperframes-cli, /gsap). One install still does it: npx skills add heygen-com/hyperframes. The docs also now name Claude Code, Cursor, Codex, Google Antigravity, and GitHub Copilot CLI as target agents. (Source: ai-research/hyperframes-prompting-guide-2026-06.md.)
  • There is a hosted render path. Beyond local + Docker, the CLI exposes a HeyGen-hosted cloud render backend plus self-hosted AWS lambda and GCP cloudrun deployments — so hyperframes.heygen.com is docs and an entry to hosted rendering, alongside the official @claudeai connector. (Source: ai-research/hyperframes-cli.md.)

Update — June 2026 (builder interview: Bin Liu & Jake Moran)

Source: ai-research/hyperframes-launch-videos-tutorial-peter-yang-2026-06-21.md (Peter Yang interview, 2026-06-21) with Bin Liu (VP Product Engineering, HeyGen) and Jake Moran (PMM, HyperFrames). Full operator walkthrough in HyperFrames Launch-Video Playbook. The highest-value facts the docs cluster didn’t carry:

  • design.md → frame.md is now first-party tooling at hyperframes.dev/design. design.md = brand guideline for webpages; frame.md = the same reformatted for video (maximize the frame, larger elements, motion). Builder-confirmed as the key brand-matching input — supersedes the older “getdesign.md” framing above.
  • HeyGen open-sources every launch video as a reusable component library — “at least 50 components” reused regularly; point your agent at a prior launch video and pull a named animation (“grab that text animation for my intro”). Jake reused one Claude prompt-box component across three videos via different frame.mds.
  • storyboard.html (one static frame per scene) is the aesthetic-alignment speed unlock — review static frames before the full composition renders. Stated as likely-to-be-open-sourced.
  • Studio + Inspector last-mile editing round-trips to code — humans edit text/position via UI, the change becomes code, the agent stays in sync.
  • Model guidance (from HeyGen’s own evals): top tier GPT-5.5 and Fable 5; best quality-to-cost Gemini — HeyGen’s internal agent runs entirely on Gemini.
  • The spatial-vs-temporal-aesthetics thesis — LLMs are trained on spatial (web-layout) aesthetics but under-trained on temporal (video-timing) aesthetics; HeyGen builds internal evals + self-check loops (open-sourced into the skills) and is working with frontier labs to train for it. Why “PPT videos” fail as launch videos. This is the conceptual backbone for The Edit Is Text.
  • Origin story: the JSON/XML video-model dead-end (agents have no visual intelligence over JSON; UI edits desync them) → the pivot to HTML as the LLM’s native visual language. Provenance for the framework’s whole design.
  • Adoption signal: HyperFrames team ~2 months old; 20–25 launches in ~2 months, each with a launch video, mostly made by a PMM (Jake), not a video editor. Bin spent $30k on a single launch video pre-HyperFrames.

Update — July 2026 (HyperFrames is being integrated into HeyGen’s Video Agent)

Source: raw/HeyGen_Just_Combined_Two_of_Its_Best_Tools_Here_s_What_Changes.md (2026-07-23). A beginner-oriented explainer from what appears to be HeyGen’s own channel or a close partner — it promotes “our HyperFrames for beginners series on this channel” and frames itself as helping viewers “get the best results out of your HeyGen videos.” Treat as vendor-adjacent positioning, not independent reporting. ^[confidence: medium — single vendor-adjacent source; no first-party changelog or docs page confirming the integration was located during this ingest]

The change: HeyGen is folding HyperFrames into Video Agent — the large prompt box on the HeyGen home screen, which HeyGen calls a “prompt-native creative engine.” Video Agent takes a single prompt and produces script, voiceover, visuals, pacing, and captions as a finished video; it has two modes selectable from a dropdown — Plan (co-plan with the agent and see the plan before anything is built) and Autopilot (it just goes). It generates both halves of the composition: A-roll (the avatar or person on camera delivering the script) and B-roll (the supporting footage, the graphics laid over the talk, and the animated cutaways between beats).

Why it matters to this article: HyperFrames stops being a surface you have to opt into. Until now, Video Agent and HyperFrames were separate products — one a prompt-to-finished-video machine, the other an agent-authored HTML composition framework you drove yourself from a coding agent. With the integration, Video Agent writes the HyperFrames for you — the same HTML/CSS composition layer this article documents, generated inside the hosted product rather than in your repo. The source’s framing: “You don’t have to code anything yourself. Video Agent will do it for you.”

HeyGen’s own description of the mechanism — quoted here with the caveat that the creator generated it by asking Video Agent to make a video about this update, so it is marketing copy the product wrote about itself:

“The agent treats your video just like a website. Instead of manual editing, it writes clean HTML and CSS to build the scene. This makes the agent a native code-based video editor. The results are perfectly consistent every time and render in seconds.”

The “perfectly consistent every time” and “render in seconds” claims are unverified and should not be repeated as facts. What is consistent with the rest of this article is the underlying architecture claim — HTML/CSS as the composition substrate, which is exactly the the edit is text thesis, now applied inside a consumer product rather than a developer framework.

What changes for existing users: nothing on the surface. Same prompt box, same buttons — the source’s explicit claim is that the B-roll and on-screen motion just come out built from better pieces. For anyone already authoring HyperFrames directly from Claude Code via the skill bundle, this is a second consumption path, not a replacement: the framework, CLI, and skills documented throughout this article are unaffected.

Open: whether the hosted Video Agent path exposes the same block registry, animation adapters, and timeline attributes documented here, or a curated subset — and whether compositions can be exported out of Video Agent as HyperFrames HTML for local refinement. Neither is addressed in the source.

Try It

  1. In a throwaway project directory: npx skills add heygen-com/hyperframes and npx hyperframes init smoke-test. Confirm the HyperFrames skills appear in Claude Code. Render a 5s greeting from a cold-start prompt.
  2. Try the warm-start pattern on any source: feed a blog post, ask for a 45s pitch video.
  3. Read the prompting guide in full once — the caption/tone and easing tables are the highest-value cribs even outside Hyperframes itself.

HyperFrames MCP in Claude Design (2026-08-11)

Source: raw/x-bookmarks-recent-digest-2026-08-11.md — @HyperFrames_, first-party announcement.

A HyperFrames MCP inside Claude Design, positioned as the bridge “between prototyping a design and shipping it as video.” The stated flow: animate in Claude Design → hit share → the HyperFrames agent scores it, adds SFX, tightens the motion, and renders the MP4.

This closes a gap this topic has tracked from the other side: HyperFrames already renders video from HTML, and Claude Design already produces the HTML/animation. An MCP between them removes the manual hand-off. Note the announcement describes an agent that edits your work — scoring, adding SFX, and “tightening” motion are opinionated transforms, not a pure render.

Unverified: availability, pricing, whether the scoring/SFX pass is optional, and how much control the author retains over the “tightening.” Announcement-only, with no documentation link in the source.

Open Questions

  • Is hyperframes.heygen.com a hosted service, or just marketing + docs? Resolved (2026-06-26): both — it hosts the docs and the CLI’s cloud render backend renders on HeyGen’s hosted infrastructure (pay-per-credit, no local Chrome/FFmpeg), with self-hosted lambda/cloudrun backends too. See Quickstart & CLI.
  • Catalog contents: what prebuilt blocks exist by default? Resolved (2026-06-26): ~109 blocks across shader transitions, transition showcases, social overlays, lower thirds, code blocks, data viz, and VFX/device — full inventory in Block Catalog (source: ai-research/hyperframes-catalog-inventory.md).
  • What’s the render performance vs Remotion? Partly resolved (2026-06-26): the decisive difference is behavioral, not just speed — HyperFrames pauses GSAP and seeks it to frame/fps, so library-clock animations render frame-accurately, where the same GSAP timeline races to its end under Remotion’s wall-clock capture. See Core Concepts. Raw throughput on identical hardware is still un-benchmarked here.
  • Does the /hyperframes skill play nicely alongside other Claude Code skill ecosystems (design skills, wiki skills)? No known conflicts, but an install-time test is warranted (now ~18 skills — see Skills Catalog).
  • Per-instance content props: do catalog blocks accept data (chart values, post text) as variables, or is per-instance content edited directly in the installed HTML? Not specified on the fetched pages.

Graph View

Backlinks