Vance IngallsandClaude Opus 5
f0cc9b1a34
* fix(skills): make the carve CLI work against the published core, and honour its own group invariant Two defects found by using the shipped feature end to end on a real project rather than inside this repo. **It could not load core at all.** `loadCore` resolved `./audio-carve` and `./audio-fx` with `require.resolve`. The workspace manifest declares a `node` condition, so that resolved fine here — but the PUBLISHED manifest (`publishConfig.exports`) carries only `import` + `types`, so every consumer of the released package got ERR_PACKAGE_PATH_NOT_EXPORTED for a package that ships those files perfectly well. The script was broken everywhere except where it was developed, and its error text blamed a missing/outdated package, which no install can fix. It now keeps the project anchor and falls back to the manifest's declared `import` target. **It violated the invariant its own SKILL.md sets.** SKILL.md is explicit: "A carve against more than one clip id is wrong. Group the clips and carve against the group. This is an invariant, not a tip." The script wrote `sources: voices.map((v) => v.id)` unconditionally, so every run against grouped voices produced output that tripped the repo's own `audio_carve_ungrouped_sources` lint rule, and a voice added to the group later would silently play outside the carve's awareness. When every voice shares one group it now records the group; mixed, partially grouped or ungrouped voices keep their ids so the lint rule still fires on the case it is meant to catch. `main()` moves behind an entry guard so the pure helper can be imported and tested; `node carve.mjs` is unaffected (verified against a real composition). Six tests, and the manifest hash is regenerated for the changed skill. * fix(skills): run the carve CLI through symlinks, and keep the bed out of its own sources Two blockers from review, both of the class this PR's first fix was about: correct where it was developed, broken for the audience it ships to. **The entry guard silently skipped `main()` through any symlinked path.** `process.argv[1]` keeps the spelling the caller typed while `import.meta.url` is derived from the realpath, because node resolves the main module's symlinks. So the raw compare added to make the helpers importable turned the CLI into a no-op that wrote nothing and exited 0. Reachable with no symlink of one's own: on macOS `/tmp` is a link to `/private/tmp`, and `SKILL.md` documents the entry point as `node <SKILL_DIR>/scripts/carve.mjs`, so any install placed behind a link breaks too. Reproduced against the published core by a reviewer, not only inferred. Fixed by realpathing the left side. This repo already documents and solves the same trap in three scripts (`frame-packets-core.mjs`, `preflight.mjs`, `project-dir.mjs`); the canonical comment is carried over verbatim. A local copy rather than an import, because skills install independently — `hyperframes-audio` has no dependency on `hyperframes-core` being present. **`carveSources` could make the bed its own carve source.** It decided from the voices alone, so a bed sharing their group (`mix`) got `sources: ["mix"]` written onto it. `resolveCarveSourceIds` expands a group id to every current member and takes no host element to exclude, so the next analysis in Studio hands the bed to itself and the duck envelope fights the bed's own content instead of speech — the "never carve a track against itself" invariant, arriving one re-analysis after a first pass that was genuinely correct (`main()` sums the detected voices directly and never round-trips through group resolution, which is why the PR's own end-to-end check could not catch it). The fix is at the call site, not in the resolver: neither `resolveCarveSourceIds` nor `resolveCarveVoices` receives the host, so "make the resolver skip the target" would be a signature change on shared core. `carveSources(voices, bed)` declines the group form when the bed is a member and records clip ids, which is exactly what `audio_carve_ungrouped_sources` exists to raise — plus a stderr note saying why, so the lint message does not read as "group clips you already grouped". Scoped to `<audio>` beds: group membership is audio-only, so a `<video>` bed cannot be pulled in by an expansion and declining there would be a false positive. SKILL.md now states the constraint next to the group invariant it belongs to. Tests: six added, closing both gaps review named. The bed-in-group regression and a symlinked CLI invocation both fail on the previous commit (silent exit 0 vs the usage error) and pass now; three more pin the cases that must NOT decline (different group, ungrouped bed, video bed). `loadCore` is now exported and covered by a fixture package carrying an import-only export map — the published manifest's shape — so this PR's first fix is pinned without depending on npm. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(skills): refuse the carve group when a non-voice member would widen it Closes the second branch of the original blocker, which the bed fix did not cover: detected voices sharing `voiceover` with an existing SFX or music member. Detection correctly leaves that member out, but the persisted `sources: ["voiceover"]` resolves wider on the next Studio analysis — `resolveCarveSourceIds` expands the group to every current member and `resolveCarveVoices` keeps any audio with a src — so the extra clip enters the sidechain and the bed starts ducking under a whoosh. Same shape as the bed case: the first pass is genuinely correct because `main()` sums the voice list `detectTracks` returned and never round-trips through group resolution. Taking the first of the two suggested fixes (membership + classification in the collapse decision) rather than deriving the first pass from the resolved group: analysing whatever the group happens to hold would make the CLI measure clips it classified as non-voice, which is the arrangement problem rather than a licence to sidechain them. `groupSourceRefusal(voices, bed, members)` replaces `bedInVoiceGroup` and returns `{group, reason, ids}` or null, so the decision and the stderr note come from one place. `members` is every `<audio>` in the composition as `{id, group, nameKind}` with `nameKind` from core's `classifyAudioName`, so this and Studio's picker classify identically. `detectTracks` now returns the media list it already built. Classification, not membership, is what makes this safe. A member classified `music` or `sfx` blocks the group; a member classified `voice` or `unknown` does not. That distinction is load-bearing: `detectTracks` only analyses voices that overlap the bed, so an outro line that starts after the bed ends is routinely a group member this run did not measure — and covering it on a later analysis without editing `sources` is the entire reason SKILL.md says to name the group. Refusing on "any member the run did not analyse" would collapse the group form into clip ids for every ordinary narration sequence. `unknown` follows detection's own loose-in-the-safe-direction rule, since detection treats an unknown name as a possible voice. The note now names the blocking member, for either reason, since "sources are clip ids" plus `audio_carve_ungrouped_sources` reads as nonsense to an author who did group their clips. Tests: six added, 18 in the file. The two regressions (sfx member, music member) and the refusal shape fail with the mixed branch ablated and pass with it; three more pin the cases that must NOT refuse — a non-overlapping voice member, an `unknown` member, and an sfx member of a different group. SKILL.md states both refusals and the voice-member exemption next to the group invariant. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * test(skills): make `members` required so dropping it cannot undo the widening fix Review finding, and the one link no test covered. `carveSources` and `groupSourceRefusal` defaulted `members = []`, and with an empty list the `mixed` refusal cannot fire — so a refactor that dropped the third argument at the call site would return the group form again with the entire suite green. That is the same signature as the bug the argument exists to prevent: `main()` sums the detected voice list directly, so the first CLI pass is correct either way and only a later Studio re-analysis reads the widened attribute. Nothing goes red. `main()` is also the only code that BUILDS `members`, and no test runs it — the symlink test stops at the usage error and a real run needs ffmpeg. Both defaults are gone, so a missing argument throws on `members.filter`. The nine cases that predate the membership check now pass `[]` explicitly, which also documents that they are about the bed and the group attributes alone, and a new test asserts both functions throw when the argument is omitted. Verified it fails when the defaults are restored. --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Write HTML. Render video. Built for agents.
Quickstart | Showcase | Playground | Catalog | Docs | Discord
HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
Quick Start
With an AI coding agent
Install the HyperFrames skills, then describe the video you want:
npx skills add heygen-com/hyperframes
The picker opens with nothing pre-selected — the Core Skills group is all you need: the
/hyperframesrouter installs each creation workflow on demand. Agents and non-interactive runs should usenpx hyperframes skills updateinstead — it installs exactly the core set, whereas a non-interactiveskills addwithout--skillinstalls all 20.
skills addresolves the skills.sh registry blob, which can lagmainby hours.npx hyperframes skills updateinstalls from the currentmain, so reach for it when you need the newest copy of a skill.
Try a prompt like:
Using
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.
Skills
HyperFrames ships 20 skills agents load on demand. Read /hyperframes first — it's the router and capability map; it picks a workflow for any "make me a…" request — video, deck, or composition port — and points to the domain skills below.
Default to the core set — the router installs each creation workflow on demand. npx hyperframes skills update installs exactly that from anywhere; the interactive picker (npx skills add heygen-com/hyperframes) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without --skill installs all 20. Use npx skills add heygen-com/hyperframes --all to install all 20 deliberately (skips the picker), or npx skills add heygen-com/hyperframes --skill <name> for just one (bare name, no leading /).
Installs stay lean after that: npx hyperframes init keeps the core set fresh (the router, the hyperframes-* domain skills, and media-use — plus whatever is already installed; /figma stays on demand) and never expands a partial install; the creation workflows install on demand — the router runs npx hyperframes skills update <workflow> before entering one. Nothing re-pulls the full set behind your back.
Upload to Codex
Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:
bun run package:codex-plugin
This writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit.
Router
| Skill | Use when |
|---|---|
/hyperframes |
Read first for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below. |
Creation workflows
| Skill | Use when |
|---|---|
/product-launch-video |
Any website — marketing / launching / promoting a product (from its URL, a brief, or a script), or a site tour / showcase / social clip featuring the site's own visuals. Up to ~3 min (sweet spot 30-90s). |
/faceless-explainer |
Explaining a topic / concept from arbitrary text — no product, no URL, no website capture; every visual is LLM-invented (typography / abstract / diagram / data-viz). |
/pr-to-video |
A GitHub pull request (PR URL, owner/repo#N ref, or "this PR") → changelog / feature-reveal / fix / refactor explainer, read via the gh CLI. |
/embedded-captions |
Adding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed. |
/talking-head-recut |
Packaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP. |
/motion-graphics |
A short, unnarrated, design-led motion graphic (~under 10s) — kinetic type, stat / chart hit, logo sting, lower-third, animated tweet / headline. MP4 or transparent overlay. |
/music-to-video |
A music track (audio file, video to pull audio from, or one generated from a mood brief) → a beat-synced video — lyric, slideshow, or kinetic promo; music drives pacing. |
/slideshow |
A presentation / pitch deck / interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video. |
/general-video |
Anything else — longer or multi-scene pieces, brand / sizzle reel, title card, static loop, freeform composition. Input- and length-agnostic fallback, and the home of companion mode (co-create with the full toolbox). |
/remotion-to-hyperframes |
Porting an existing Remotion (React) composition's source to HyperFrames HTML. One-way migration, not creation. |
Domain skills (loaded on demand)
Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.
| Skill | Covers |
|---|---|
/hyperframes-core |
The composition contract — data-* timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, determinism rules. |
/hyperframes-animation |
All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
/hyperframes-keyframes |
Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus hyperframes keyframes diagnostics for rendered motion. |
/hyperframes-creative |
Non-animation creative direction — frame.md / design.md, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns. |
/media-use |
The media OS — resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record, generate via TTS/music/image models when the catalog misses, transcribe, caption, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking. |
/hyperframes-cli |
CLI dev loop — init, lint, check, snapshot, preview, render, publish, doctor, plus HeyGen-hosted cloud rendering (cloud render) and AWS Lambda rendering (lambda deploy / render / progress). |
/hyperframes-audio |
Mix the audio already placed in a composition — voiceover carve (dip a music bed only in the bands the voice occupies, static or dynamic, level match included), the effect chain (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), and automation envelopes on volume or any effect parameter. Sourcing the audio is /media-use. |
/hyperframes-registry |
Install and wire registry blocks and components into compositions via hyperframes add. Authoring a new block or component to contribute upstream. |
/figma |
Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition. |
For visual design handoff workflows, see the Claude Design guide and Open Design guide.
Manually with the CLI
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser with live reload
npx hyperframes render # render to MP4
Requirements: Node.js 22+, FFmpeg
What You Can Build
Need ideas? Browse the Showcase for finished videos you can watch, read, run, and remix.
- Product launch videos and feature announcements
- PR walkthroughs with animated code diffs, narration, and captions
- Data visualizations, chart races, and map animations
- Social videos with kinetic captions, overlays, and music
- Docs-to-video, PDF-to-video, and site-tour explainers
- Reusable motion graphics for automated content pipelines
Frame.md
frame.md — your design system, ready for video.
Every brand has a design.md. None of them were written for a camera. frame.md is the missing translation layer: it takes your web-context design spec and inverts it for the frame — the same tokens, the same rules, but rewritten so an AI agent can compose a promo video without guessing at scale or reaching for web chrome.
The output is a DESIGN.md superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script.
Biennale Yellow |
BlockFrame |
Blue Professional |
Bold Poster |
Broadside |
Capsule |
Cartesian |
Cobalt Grid |
Coral |
Creative Mode |
Browse and remix them all at hyperframes.dev/design.
How It Works
Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation.
<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
<video
class="clip"
data-start="0"
data-duration="6"
data-track-index="0"
src="intro.mp4"
muted
playsinline
></video>
<h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
<audio
data-start="0"
data-duration="6"
data-track-index="2"
data-volume="0.5"
src="music.wav"
></audio>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.launch = tl;
</script>
</div>
Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.
HyperFrames Stack
HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.
| Piece | Status | What it does |
|---|---|---|
| CLI | Available | Scaffold, preview, lint, inspect, and render local video projects |
| Core / Engine / Producer | Available | Parse compositions, drive headless Chrome, encode video, and mix audio |
| Catalog | Available | Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects |
| Agent skills | Available | Teach coding agents the video-production patterns that generic web docs miss |
| Studio | Available, evolving | Browser surface for previewing and editing compositions |
| AWS Lambda rendering | Available | Deploy a distributed render stack and drive renders from your laptop or CI |
| hyperframes.dev | Available | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects |
| frame.md | Available | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from |
Catalog
Install ready-to-use blocks and components:
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chart
Browse the catalog at hyperframes.heygen.com/catalog.
Why HyperFrames?
- HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
- Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
- Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering.
- No build step: an
index.htmlcomposition plays as-is and can be previewed directly in the browser. - Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
- Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds.
HyperFrames vs Remotion
HyperFrames is inspired by Remotion. Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion's bet is React components; HyperFrames' bet is plain HTML that humans and agents can both write easily.
| HyperFrames | Remotion | |
|---|---|---|
| Authoring | HTML + CSS + seekable animation | React components |
| Build step | None; index.html plays as-is |
Bundler required |
| Agent handoff | Plain HTML files | JSX / React project |
| Library-clock animations | Seekable, frame-accurate via adapters | Wall-clock animation patterns need care |
| Distributed rendering | Local and AWS Lambda render paths | Remotion Lambda, mature cloud renderer |
| License | Apache 2.0 | Source-available Remotion License |
Read the full comparison in the HyperFrames vs Remotion guide.
Documentation
Full documentation: hyperframes.heygen.com/introduction
Packages
| Package | Description |
|---|---|
hyperframes |
CLI for creating, previewing, linting, and rendering compositions |
@hyperframes/core |
Types, parsers, generators, linter, runtime, and frame adapters |
@hyperframes/engine |
Seekable page-to-video capture engine using Puppeteer and FFmpeg |
@hyperframes/producer |
Full rendering pipeline for capture, encode, and audio mix |
@hyperframes/studio |
Browser-based composition editor UI |
@hyperframes/player |
Embeddable <hyperframes-player> web component |
@hyperframes/shader-transitions |
WebGL shader transitions for compositions |
@hyperframes/aws-lambda |
AWS Lambda SDK and deployment surface for distributed renders |
Community
HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack, and others in ADOPTERS.md. Open a PR if your team is using HyperFrames.
- Questions and ideas: Discord
- Bugs and feature requests: GitHub Issues
- User research: Book a casual 30-minute conversation with the HyperFrames team — no preparation or sales pitch
- Security reports: SECURITY.md
- Contributions: CONTRIBUTING.md
Development Note
The repo uses Git LFS for golden regression-test baselines under packages/producer/tests/**/output.mp4 (about 240 MB of .mp4 files). If you're cloning the full repo for development, install Git LFS first:
# macOS
brew install git-lfs
# Ubuntu / Debian
sudo apt install git-lfs
# Windows
winget install GitHub.GitLFS
# Then, once per machine
git lfs install
If you only need source files, you can skip LFS content:
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git