toolvideo-generationagent-nativehtml-to-videoopen-sourceheygenskills-shmotionffmpegUpdated 2026-08-11

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."

View original tweet

By HeyGen. Apache-2.0. Current verified source snapshot: hyperframes@0.7.106, Git commit d3a4e9037096c0234c58b44fcbcc7df87ba8958b, 40,566 stars, and 3,865 forks. The project moves quickly, so agents must re-check the current router and release rather than rely on memorized commands. Launch tweet: 13,729 bookmarks, 8,226 likes. The current Brin evidence scores the repository 76 caution and the skill 65 caution, both medium confidence: useful enough to adopt behind pinned source, bounded activation, and executable proof—not an excuse for either blind trust or exclusion. Source: X/@HeyGen, 2026-04-16 · Source: pinned GitHub/npm evidence, 2026-08-12

Recommendation

HyperFrames is Kevin's recommended default for deterministic, agent-authored video. Route here first when the requested artifact is a launch clip, website tour, faceless explainer, PR walkthrough, captioned or recut talking-head video, short motion graphic, or music-driven video and the result should be reproducible from code. Start with the upstream /hyperframes router rather than choosing a sub-workflow from memory:

npx skills add heygen-com/hyperframes --full-depth --yes

Then let /hyperframes choose the narrow creation workflow. Require the source project, render command, final media, and visual/audio review receipt; deterministic rendering makes iteration possible but does not prove design quality by itself. Use Remotion instead when the product already owns a React/Remotion composition system or needs React-native timeline APIs. Use Text-to-Lottie when the deliverable is editable vector animation rather than video, and use an AI-video provider only when stochastic generated footage is the actual requirement. Source: GitHub heygen-com/hyperframes README and skill router, 2026-08-10

Installed runtime and proof

Seven pinned upstream skills are active in the canonical registry: /hyperframes, /hyperframes-core, /hyperframes-animation, /hyperframes-keyframes, /hyperframes-creative, /hyperframes-cli, and /hyperframes-registry. The broader upstream /media-use helper is retained under skills/in-progress/media-use while its credential reads, provider calls, URL downloads, local model installation, shell execution, and opt-out telemetry receive a separate activation boundary. Until then, the router uses user-supplied assets or already-approved local media routes and requires explicit authorization for remote/provider effects.

The tracked reviews/fixtures/hyperframes-determinism/ specimen pins CLI 0.7.106 and registry commit d3a4e9037096c0234c58b44fcbcc7df87ba8958b. Strict validation found and drove fixes for overlapping rotations, pivot drift, and an off-canvas line; the corrected 1920×1080, four-second, 30fps composition passed lint, runtime, layout checks at five timestamps, and seven contrast checks. Two independent 120-frame renders produced the same ordered frame-manifest digest, 89193dd624a38f9845e87c47bcf0b080ce2a601085e79fbc3ff5656dd26ca29c. This proves replay stability for the fixture, not universal visual quality or correctness. Source: local pinned repository receipts and deterministic fixture review, 2026-08-12

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 --full-depth --yes Claude Code, Cursor, Gemini CLI, Codex — install current main, then let /hyperframes route the request
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

View original tweet

@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

View original tweet

@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

View original tweet
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

View original tweet

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/WebM/MOV (HTML → frames → FFmpeg) Default: agent-authored launch/demo/explainer/PR/social video and code/data-driven motion graphics
MoneyPrinterTurbo MP4 from script/topic + local or licensed stock footage + TTS/subtitles/music High-throughput narrated stock-footage shorts after claim, rights, provider, inspection, and publication gates
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; check its custom license before commercial use
Remocn Copy-paste Remotion components MIT component catalog inside an already-approved Remotion project; it inherits the Remotion runtime and license boundary
Replit Animation Hosted React/programmatic motion artifact → MP4 Fast conversational ideation, Canvas scene variants, brand/product asset import, and native 720p/1080p at 30/60fps export when hosted Replit workflow/cost/data handling is acceptable; source/runtime is not the local deterministic authority
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. Prefer HyperFrames unless an existing React composition, component ecosystem, or Remotion-specific API is a real constraint. Remocn is a useful MIT catalog layer, not an independent renderer, and therefore does not remove Remotion's license check. Source: pinned HyperFrames, Remotion, and Remocn repository evidence, 2026-08-12

Replit Animation is the hosted fast-iteration alternative. Its official docs say it uses React plus web-animation libraries and custom Agent skills rather than Remotion, supports Canvas scene boards/variants and MP4 export, and recommends multiple prompt iterations. Use it for rapid hosted ideation when editable local source, deterministic frame replay, renderer provenance, provider data, cost, and export fidelity are not hard requirements; otherwise keep HyperFrames as the repo-owned default. A launch-video popularity claim does not collapse these different control surfaces into one recommendation. Source: X 2043111890164060432; Replit Animation docs/blog, checked 2026-08-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

Related Pages

Text-to-LottieText Animations Collection (animate-text)Remotion + Claude Code Marketing DemosClaude Fable 5Higgsfield MCPHTML-in-CanvasAgent Engineering Skills

25 pages link here

Active Stack (What to Actually Use)MetaCapability Routing MapMetaClaude Fable 5ToolsClipping as Distribution StrategyConceptsContent Pipeline WorkflowWorkflowsDesign Effects and Motion SourcesDesignGitHub Starred Repos Harvest - 2026-06-28ResearchMoneyPrinterTurboToolsOpen Generative AIToolsOpen Higgsfield AIToolsPalmierToolsPR Walkthrough SkillToolsRecordlyToolsRemotionToolsRetired Skill Article LedgerMetaScroll WorldToolsSumeToolsText Animations Collection (animate-text)ToolsToolcraftToolsVideo UseToolsWebsite Cloner SkillToolsX Bookmark Ingest 2026-06-28ResearchX Bookmarks: AI Agents & Tools (Jan 2025 – Jun 2026)ToolsX Bookmarks: Design & UI (Feb–Jun 2026)DesignX Bookmarks: Dev Tools (Mar–Jun 2026)Tools