HyperFrames
Open-source framework from HeyGen that turns HTML/CSS/media + seekable animations into deterministic MP4 video — driven by an AI coding agent, not a timeline editor. "Write HTML. Render video. Built for agents."
By HeyGen. Apache-2.0. Current source snapshot: hyperframes@0.7.28 latest on npm, modified 2026-07-03; GitHub tag v0.7.28 resolves to 0560b36510afb0895623973c81a1cf37d2fbfd3c, and default branch HEAD resolved to 1a7002f208353239f0e10596fa1decc897fed34f as of 2026-07-03. GitHub showed 32,958 stars and 3,063 forks at that check. Launch tweet: 13,729 bookmarks, 8,226 likes. Brin returned 65 caution for the repo and 59 caution for the skill in the earlier review, so keep using the pinned local route and review upstream before pulling updates wholesale. Source: X/@HeyGen, 2026-04-16 · Source: npm registry + GitHub heygen-com/hyperframes, 2026-07-03
What it is
HyperFrames renders video the way a frontend renders a page: you (or an agent) write HTML, CSS, media, and seekable animations, and the framework rasterizes each frame deterministically to an MP4 via FFmpeg. No NLE, no timeline UI, no manual keyframing. Because output is deterministic (same input → same frames), it fits automated content pipelines and agent loops. Source: GitHub heygen-com/hyperframes, 2026-06-12
Three ways to run it: Source: GitHub heygen-com/hyperframes, 2026-06-12
| Mode | Command | For |
|---|---|---|
| AI coding agent (primary) | npx skills add heygen-com/hyperframes |
Claude Code, Cursor, Gemini CLI, Codex — describe the video, the skill drives the loop |
| Grok connector | Add HyperFrames by HeyGen from Grok's connector directory | Prompt Grok to build and render an HTML motion project into MP4/WebM/MOV without leaving chat |
| Local CLI | npx hyperframes init / preview / render |
Hand-authoring; preview is a live-reload browser, render emits MP4 |
| Rendering core | embed the renderer | The engine behind hosted authoring workflows |
Requirements: Node.js 22+ and FFmpeg. Published to npm as hyperframes; playground at hyperframes.dev. Re-check npm view hyperframes version dist-tags --json before writing install instructions because the tool is moving quickly. Source: GitHub/npm heygen-com/hyperframes, 2026-06-30
Grok connector
HeyGen's Grok docs expose two connector paths: HeyGen as a custom MCP connector for avatar/video-generation tools and HyperFrames by HeyGen as an official listed connector for programmatic HTML video. Both use OAuth against the user's HeyGen account and draw on existing HeyGen plan credits, so the install flow is account/plan-bound rather than API-key-bound. The demo video shows Grok's plus menu -> Connectors -> HyperFrames by HeyGen -> toggle on; the durable signal is that HyperFrames now reaches an end-user chat surface, not just coding agents. Source: X/@HeyGen, 2026-06-17; Source: HeyGen Grok docs, 2026-06-30
Use this route when the user is already ideating in Grok and wants a quick data-driven motion graphic or explainer. Use the local CLI/skill route when the output needs repo-controlled assets, tests, deterministic re-rendering, or a reusable content pipeline.
The production loop (what the skill teaches)
The skill encodes HeyGen's repeatable pipeline so the agent does not improvise: plan the video → write valid HTML → wire seekable animations → add media → lint → preview → render. Example prompt: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music." Source: GitHub heygen-com/hyperframes, 2026-06-12
For deterministic text motion (e.g. typewriter at exact 240ms / 46ms stagger / steps(1, end)), HyperFrames explicitly defers to Text Animations Collection (animate-text) (pixel-point/animate-text) rather than reinventing easing specs — a clean example of skills composing skills. Source: GitHub heygen-com/hyperframes text-effects.md, 2026-06-12
frame.md — design system, inverted for the camera
HyperFrames ships frame.md: a translation layer that takes a web-context design.md and rewrites it for the frame — same tokens and rules, but rescaled for video where there is no scroll, no hover, and no web chrome. The output is a DESIGN.md superset the rest of the toolchain can read ("atoms stay sacred, composition stays free, numbers come from the script"). It ships brandable templates (Biennale Yellow, BlockFrame, Bold Poster, Broadside, …). Source: GitHub heygen-com/hyperframes, 2026-06-12
What people build
Launch/feature videos, PR walkthroughs with animated code diffs + narration + captions, data-viz chart races and map animations, kinetic-caption social videos, and docs/PDF/website-to-video explainers — plus reusable motion graphics for automated pipelines. Community proof: @Miguel07Code rendered a HyperFrames video one-shot with Claude "Mythos"/Claude Fable 5, pairing the framework with a strong model; the thread linked the Claude connector, repo, source session, and launch-code example, so the durable point is agent-run reproducibility rather than only a flashy demo. Source: GitHub heygen-com/hyperframes, 2026-06-12 · Source: X/@Miguel07Code, 2026-06-09
@nateherk's later Fable 5 artifact is stronger evidence for the unattended route: the prompt was a /goal, the author left, and the returned artifact included sound effects. The reviewed video frames show a synthetic/cloned talking-head sequence with on-screen "synthetic / cloned / Claude" status badges and an ending shot of a dark prompt surface reading "make a video." That makes it useful as an autonomous media-pipeline proof, not merely another animation demo. Source: X/@nateherk, 2026-06-12; Source: local video artifact review, 2026-07-01
@CruzzCtrl1's June 2026 bookmark is useful as a content-pipeline example rather than a new API feature. The thumbnail itself is nearly blank white, but the sampled video frames show a whiteboard-style explainer about making free short videos: a phone clip, checklist-style production steps, and the claim that the author gave Claude a short prompt and let Claude handle the rest. It reinforces HyperFrames as a low-cost agent-to-MP4 workflow for simple explainers. Source: X/@CruzzCtrl1, 2026-06-14; Source: local video frame review, 2026-07-03
Code animations (hyperframes add code)
Jun 2026: HyperFrames shipped installable code animations — 9 animated code-block effects ("code-morph": typing, diffing, line highlighting, reveals) you pull into a video with one command instead of hand-authoring keyframes. Source: X/@Miguel07Code, 2026-06-16
npx hyperframes add code
Browse them in the block catalog (hyperframes.heygen.com/catalog/blocks/code-morph). This makes the PR-walkthrough / changelog / "explain a diff" use case turnkey - animated code diffs for launch and docs videos with no manual keyframing - and composes with Text Animations Collection (animate-text) for the surrounding text motion. The reviewed video frames show code-card variants for config loading, activeUsers(users), typing, reveal, retry/fetch snippets, and abstract particle/noise states, so this is real visual vocabulary evidence rather than only a CLI announcement. Source: local video frame review, 2026-07-03
3D keyframing
HyperFrames Studio now demonstrates keyframing 3D transform values. The local thumbnail shows the Studio editor: file tree and HTML on the left, a canvas with draggable cards/chips, a bottom timeline with keyframes, and a right inspector exposing layout plus 3D transform controls (Z, scale, rotX, rotY, rotZ, perspective). The demo lets the author drag a cube to change rotateX / rotateY and scroll to change Z depth, then preserve those values as keyframes. This widens HyperFrames from flat HTML motion into spatial product-demo shots, UI walkthroughs with camera-like movement, and agent-authored 3D explainers that still render deterministically through the HTML-to-video pipeline. Source: X/@Miguel07Code, 2026-06-28
How it compares
| Tool | Output | Sweet spot |
|---|---|---|
| HyperFrames | MP4 (HTML → frames → FFmpeg) | Agent-authored multi-shot video, code/data-driven motion graphics, brand promos |
| Text-to-Lottie | Lottie JSON | Short single-scene vector motion, SVG marks, data-driven micro-animation |
| Text Animations Collection (animate-text) | Per-library specs (no render) | Deterministic text-effect timings reused inside HyperFrames/Remotion/Motion |
| Remotion (Remotion + Claude Code Marketing Demos) | MP4 (React → frames) | React-native video, programmatic compositing, established ecosystem |
| Higgsfield MCP | AI-generated clips | Generative footage/UGC via diffusion models, not deterministic HTML |
HyperFrames and Remotion are the two "code-becomes-video" engines; HyperFrames bets on plain HTML + skills (any agent, no React requirement), Remotion on React. Source: compiled from GitHub + X, 2026-06-12
Stack fit
Slots into Kevin's content pipeline as the programmatic-video layer — launch videos, changelog clips, docs-to-video — installable through the same skills.sh path as Text-to-Lottie and Text Animations Collection (animate-text). Deep review of the launch video frames shows a speaker introducing HyperFrames, an agent/HTML surface, generated animation examples, a text prompt surface, and a rendered "HYPERFRAMES" end card; the artifact demonstrates an agent-authored production loop, not only a static marketing claim. Source: X/@HeyGen, 2026-04-16; Source: local video artifact review, 2026-07-01
Timeline
- 2026-04-16 | HeyGen launches HyperFrames: "We built our launch video in Claude Code using HyperFrames. Open source, agent-native framework. HTML to MP4.
npx skills add heygen-com/hyperframes." 13,729 bookmarks, 8,226 likes; demo video attached. Source: X/@HeyGen, 2026-04-16 - 2026-06-09 | @Miguel07Code: a HyperFrames video "completely one-shotted" by Claude Mythos / Claude Fable 5; promotes the HyperFrames MCP + repo star. 685 bookmarks, 960 likes; demo video. Source: X/@Miguel07Code, 2026-06-09
- 2026-06-12 | @nateherk: "Claude Fable 5 made this entire video by itself" from a
/goalprompt (even the sound effects) — shoutout @HyperFrames_. Strong autonomous-pipeline proof (agent + Claude Fable 5 + HyperFrames → finished video unattended). 3,658 likes, 4,091 bookmarks; demo video. Source: X/@nateherk, 2026-06-12 - 2026-06-12 | Deep enrichment from GitHub README (Apache-2.0, Node 22+/FFmpeg, CLI
init/preview/render,frame.md,animate-textdeferral, 27.1K stars) + corrected the launch citation to the real status URL. Source: GitHub heygen-com/hyperframes, 2026-06-12 - 2026-06-16 | @Miguel07Code (HeyGen): "Introducing 9 new code animations in HyperFrames" — installable via
npx hyperframes add code(code-morph catalog: typing/diff/highlight/reveal). Turnkey animated code diffs for PR-walkthrough and changelog videos. Repo at 28.1K stars; demo video. Source: X/@Miguel07Code, 2026-06-16 - 2026-06-28 | HyperFrames Studio demonstrated 3D keyframing: drag-controlled rotateX/rotateY, scroll-controlled Z depth, and repo link in the author thread. Deep artifact review confirmed the thumbnail shows a real timeline/inspector UI rather than only a promo render. Source: X/@Miguel07Code, 2026-06-28
- 2026-06-30 | Deep-reviewed the Claude Mythos/Fable bookmark and refreshed versioning:
hyperframes@0.7.21, GitHub releasev0.7.21, 32,259 stars. Source: X bookmark artifact audit, 2026-06-30 - 2026-06-30 | Reviewed HeyGen's Grok connector launch: HyperFrames is now an official Grok connector, while the broader HeyGen video tool remains a custom MCP connector. Version snapshot refreshed to
hyperframes@0.7.21, GitHub releasev0.7.21, default branch pushed 2026-06-30, 32,278 stars. Source: X/@HeyGen, 2026-06-17; Source: HeyGen Grok docs, 2026-06-30 - 2026-07-01 | Deep-reviewed @nateherk's Fable 5 video artifact: the local video frames show cloned/synthetic talking-head labels and a final prompt surface, confirming the bookmark as unattended media-pipeline evidence. Version snapshot refreshed to
hyperframes@0.7.22, npm latest, GitHub tagv0.7.22(36e01f41), default branchHEADb33d54f5. Source: raw/x-bookmarks/enriched/2065530886725021771.json; npm registry; GitHubheygen-com/hyperframes, 2026-07-01 - 2026-07-01 | Deep-reviewed the original HeyGen launch video frames and refreshed versioning again:
hyperframes@0.7.24, npm latest, GitHub tagv0.7.24(d38c2c0f), default branchHEAD1d4c5d5. Source: X/@HeyGen, 2026-04-16; npm registry; GitHubheygen-com/hyperframes, 2026-07-01 - 2026-07-03 | Deep-reviewed @CruzzCtrl1's HyperFrames explainer bookmark. Video frames showed a zero-budget short-video workflow rather than a new framework capability. Source snapshot refreshed to
hyperframes@0.7.26, npm latest, GitHub tagv0.7.26(65b20933), default branchHEADdd774b36, 32,912 stars. Source: raw/x-bookmarks/enriched/2066015721876844969.json; npm registry; GitHubheygen-com/hyperframes, 2026-07-03 - 2026-07-03 | Deep-reviewed @Miguel07Code's
hyperframes add codebookmark. Local frames showed multiple animated code-card variants for PR/changelog/explainer videos. Source snapshot refreshed tohyperframes@0.7.28, GitHub tagv0.7.28(0560b365), default branchHEAD1a7002f2, 32,958 stars. Source: raw/x-bookmarks/enriched/2066696544510673318.json; local video frame review; npm registry; GitHubheygen-com/hyperframes, 2026-07-03