{"id":47692106,"url":"https://github.com/heygen-com/hyperframes","last_synced_at":"2026-05-09T01:22:34.875Z","repository":{"id":347392768,"uuid":"1177402105","full_name":"heygen-com/hyperframes","owner":"heygen-com","description":"Write HTML. Render video. Built for agents.","archived":false,"fork":false,"pushed_at":"2026-04-16T23:17:01.000Z","size":78674,"stargazers_count":559,"open_issues_count":8,"forks_count":51,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-17T01:34:51.615Z","etag":null,"topics":["ai","animation","ffmpeg","framework","gsap","html","mcp","puppeteer","rendering","typescript","video"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heygen-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-10T01:51:06.000Z","updated_at":"2026-04-17T01:34:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"aad4232c-c414-4cd7-9daa-44a9604e728d","html_url":"https://github.com/heygen-com/hyperframes","commit_stats":null,"previous_names":["heygen-com/hyperframes"],"tags_count":38,"template":false,"template_full_name":null,"purl":"pkg:github/heygen-com/hyperframes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heygen-com%2Fhyperframes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heygen-com%2Fhyperframes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heygen-com%2Fhyperframes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heygen-com%2Fhyperframes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heygen-com","download_url":"https://codeload.github.com/heygen-com/hyperframes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heygen-com%2Fhyperframes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32165201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-23T02:19:40.750Z","status":"ssl_error","status_checked_at":"2026-04-23T02:17:55.737Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","animation","ffmpeg","framework","gsap","html","mcp","puppeteer","rendering","typescript","video"],"created_at":"2026-04-02T15:46:11.843Z","updated_at":"2026-05-09T01:22:34.853Z","avatar_url":"https://github.com/heygen-com.png","language":"HTML","funding_links":[],"categories":["TypeScript","🧠 Agent Skills"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"docs/logo/dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"docs/logo/light.svg\"\u003e\n    \u003cimg alt=\"HyperFrames\" src=\"docs/logo/light.svg\" width=\"300\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/hyperframes\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/hyperframes.svg?style=flat\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/hyperframes\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/hyperframes.svg?style=flat\" alt=\"npm downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Apache%202.0-blue.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://nodejs.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/node-%3E%3D22-brightgreen\" alt=\"Node.js\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://discord.gg/EbK98HBPdk\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord-Join-5865F2?logo=discord\u0026logoColor=white\" alt=\"Discord\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cb\u003eWrite HTML. Render video. Built for agents.\u003c/b\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://static.heygen.ai/hyperframes-oss/docs/images/hfgif-1280.webp\" alt=\"HyperFrames demo — HTML code on the left transforms into a rendered video on the right\" width=\"800\"\u003e\n\u003c/p\u003e\n\nHyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents.\n\n## Quick Start\n\n### Option 1: With an AI coding agent (recommended)\n\nInstall the HyperFrames skills, then describe the video you want:\n\n```bash\nnpx skills add heygen-com/hyperframes\n```\n\nThis teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code, the skills register as slash commands — invoke `/hyperframes` to author compositions, `/hyperframes-cli` for the dev-loop commands (init, lint, preview, render), `/hyperframes-media` for asset preprocessing (TTS, transcription, background removal), `/tailwind` for `init --tailwind` projects, `/gsap` for timeline animation help, or the adapter skills (`/animejs`, `/css-animations`, `/lottie`, `/three`, `/waapi`) when a composition uses those runtimes.\n\nFor Claude Design, open [`docs/guides/claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub and click the download button (↓) to save it, then attach the file to your Claude Design chat. It produces a valid first draft; refine in any AI coding agent. See the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design).\n\nFor Codex specifically, the same skills are also exposed as an [OpenAI Codex plugin](./.codex-plugin/plugin.json) — sparse-install just the plugin surface:\n\n```bash\ncodex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets\n```\n\nFor Claude Code, the repo also ships a [Claude Code plugin manifest](./.claude-plugin/plugin.json): test it locally with `claude --plugin-dir .`. The manifest intentionally omits `skills` because Claude Code auto-discovers the root `skills/` directory by convention, and for marketplace submission use the title `HyperFrames by HeyGen` plus the black/white icon assets at [`assets/claude-code-icon-dark.svg`](./assets/claude-code-icon-dark.svg) and [`assets/claude-code-icon-light.svg`](./assets/claude-code-icon-light.svg) for the two theme slots.\nFor Cursor, the same skills are packaged as a [Cursor plugin](./.cursor-plugin/plugin.json) — install from the Cursor Marketplace, or sideload by cloning this repo and pointing **Settings → Plugins → Load unpacked** at the repo root.\n\n#### Try it: example prompts\n\nCopy any of these into your agent to get started. The `/hyperframes` prefix loads the skill context explicitly so you get correct output the first time.\n\n**Cold start — describe what you want:**\n\n\u003e Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and background music.\n\n**Warm start — turn existing context into a video:**\n\n\u003e Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using `/hyperframes`.\n\n\u003e Summarize the attached PDF into a 45-second pitch video using `/hyperframes`.\n\n\u003e Turn this CSV into an animated bar chart race using `/hyperframes`.\n\n**Format-specific:**\n\n\u003e Make a 9:16 TikTok-style hook video about [topic] using `/hyperframes`, with bouncy captions synced to a TTS narration.\n\n**Iterate — talk to the agent like a video editor:**\n\n\u003e Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.\n\n\u003e Add a lower third at 0:03 with my name and title.\n\nThe agent handles scaffolding, animation, and rendering. See the [prompting guide](https://hyperframes.heygen.com/guides/prompting) for more patterns.\n\n### Option 2: Start a project manually\n\n```bash\nnpx hyperframes init my-video\ncd my-video\nnpx hyperframes preview      # preview in browser (live reload)\nnpx hyperframes render       # render to MP4\n```\n\n`hyperframes init` installs skills automatically, so you can hand off to your AI agent at any point.\n\n**Requirements:** Node.js \u003e= 22, FFmpeg\n\n## Why Hyperframes?\n\n- **HTML-native** — compositions are HTML files with data attributes. No React, no proprietary DSL.\n- **AI-first** — agents already speak HTML. The CLI is non-interactive by default, designed for agent-driven workflows.\n- **Deterministic rendering** — same input = identical output. Built for automated pipelines.\n- **Frame Adapter pattern** — bring your own animation runtime (GSAP, Lottie, CSS, Three.js).\n\n## Hyperframes vs Remotion\n\nHyperframes is inspired by [Remotion](https://www.remotion.dev) — we used Remotion at HeyGen in production, learned a ton from it, and kept attribution comments in the source for the patterns it pioneered (Chrome launch flags, image2pipe → FFmpeg streaming, frame buffering). Both tools drive headless Chrome and both are deterministic. They differ on one decision: **what the primary author writes.** Remotion's bet is React components; Hyperframes' bet is HTML.\n\n|                                                       | **Hyperframes**                | **Remotion**                      |\n| ----------------------------------------------------- | ------------------------------ | --------------------------------- |\n| Authoring                                             | HTML + CSS + GSAP              | React components (TSX)            |\n| Build step                                            | None; `index.html` plays as-is | Required (bundler)                |\n| Library-clock animations (GSAP, Anime.js, Motion One) | Seekable, frame-accurate       | Plays at wall-clock during render |\n| Arbitrary HTML / CSS passthrough                      | Paste and animate              | Rewrite as JSX                    |\n| Distributed rendering                                 | Single-machine today           | Lambda, production-ready          |\n\n### Licensing: fully open source vs source-available\n\n**Hyperframes is completely open source under [Apache 2.0](LICENSE)** — an OSI-approved license. Use it commercially at any scale, with no per-render fees, no seat caps, no company-size thresholds.\n\n**Remotion is [source-available, not open source](https://www.remotion.pro/license).** The code is on GitHub under a custom Remotion License that requires a paid company license above small-team thresholds. It's a great product with a real team behind it — but if open-source licensing matters to you (OSI compliance, redistribution rights, no per-use fees), that's a first-order decision point.\n\nFull write-up with benchmarks, an honest list of where each tool wins, and a GSAP side-by-side: **[Hyperframes vs Remotion guide](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion)**.\n\n## How It Works\n\nDefine your video as HTML with data attributes:\n\n```html\n\u003cdiv id=\"stage\" data-composition-id=\"my-video\" data-start=\"0\" data-width=\"1920\" data-height=\"1080\"\u003e\n  \u003cvideo\n    id=\"clip-1\"\n    data-start=\"0\"\n    data-duration=\"5\"\n    data-track-index=\"0\"\n    src=\"intro.mp4\"\n    muted\n    playsinline\n  \u003e\u003c/video\u003e\n  \u003cimg\n    id=\"overlay\"\n    class=\"clip\"\n    data-start=\"2\"\n    data-duration=\"3\"\n    data-track-index=\"1\"\n    src=\"logo.png\"\n  /\u003e\n  \u003caudio\n    id=\"bg-music\"\n    data-start=\"0\"\n    data-duration=\"9\"\n    data-track-index=\"2\"\n    data-volume=\"0.5\"\n    src=\"music.wav\"\n  \u003e\u003c/audio\u003e\n\u003c/div\u003e\n```\n\nPreview instantly in the browser. Render to MP4 locally or in Docker.\n\n## Catalog\n\n50+ ready-to-use blocks and components — social overlays, shader transitions, data visualizations, and cinematic effects:\n\n```bash\nnpx hyperframes add flash-through-white   # shader transition\nnpx hyperframes add instagram-follow      # social overlay\nnpx hyperframes add data-chart            # animated chart\n```\n\nBrowse the full catalog at **[hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)**.\n\n## Documentation\n\nFull documentation at **[hyperframes.heygen.com/introduction](https://hyperframes.heygen.com/introduction)** — [Quickstart](https://hyperframes.heygen.com/quickstart) | [Guides](https://hyperframes.heygen.com/guides/gsap-animation) | [API Reference](https://hyperframes.heygen.com/packages/core) | [Catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)\n\n## Packages\n\n| Package                                                          | Description                                                 |\n| ---------------------------------------------------------------- | ----------------------------------------------------------- |\n| [`hyperframes`](packages/cli)                                    | CLI — create, preview, lint, and render compositions        |\n| [`@hyperframes/core`](packages/core)                             | Types, parsers, generators, linter, runtime, frame adapters |\n| [`@hyperframes/engine`](packages/engine)                         | Seekable page-to-video capture engine (Puppeteer + FFmpeg)  |\n| [`@hyperframes/producer`](packages/producer)                     | Full rendering pipeline (capture + encode + audio mix)      |\n| [`@hyperframes/studio`](packages/studio)                         | Browser-based composition editor UI                         |\n| [`@hyperframes/player`](packages/player)                         | Embeddable `\u003chyperframes-player\u003e` web component             |\n| [`@hyperframes/shader-transitions`](packages/shader-transitions) | WebGL shader transitions for compositions                   |\n\n## Skills\n\nHyperFrames ships [skills](https://github.com/vercel-labs/skills) that teach AI agents framework-specific patterns that generic docs don't cover.\n\n```bash\nnpx skills add heygen-com/hyperframes\n```\n\n| Skill                     | What it teaches                                                                                                     |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| `hyperframes`             | HTML composition authoring, captions, TTS, audio-reactive animation, transitions                                    |\n| `hyperframes-cli`         | Dev-loop CLI: init, lint, inspect, preview, render, doctor                                                          |\n| `hyperframes-media`       | Asset preprocessing: tts (Kokoro), transcribe (Whisper), remove-background (u2net) — voice/model/codec selection    |\n| `hyperframes-registry`    | Block and component installation via `hyperframes add`                                                              |\n| `website-to-hyperframes`  | Capture a URL and turn it into a video — full website-to-video pipeline                                             |\n| `remotion-to-hyperframes` | Translate a Remotion (React) composition into a HyperFrames HTML composition                                        |\n| `gsap`                    | GSAP timelines for HyperFrames: paused registration, deterministic seeking, easing, sequencing, performance         |\n| `animejs`                 | Anime.js animations and timelines registered on `window.__hfAnime` for deterministic HyperFrames seeking            |\n| `css-animations`          | CSS keyframe animation patterns that HyperFrames can discover, pause, and seek                                      |\n| `lottie`                  | `lottie-web` and dotLottie players registered on `window.__hfLottie` with local assets and paused playback          |\n| `three`                   | Three.js scenes that render from HyperFrames `hf-seek` events and `window.__hfThreeTime` instead of wall-clock time |\n| `waapi`                   | Web Animations API `element.animate()` patterns seeked through `document.getAnimations()`                           |\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n### Cloning the repo\n\nThe repo uses [Git LFS](https://git-lfs.com) for golden regression-test baselines under `packages/producer/tests/**/output.mp4` (~240 MB of `.mp4` files). If you're cloning the full repo for development, install Git LFS first:\n\n```bash\n# macOS\nbrew install git-lfs\n\n# Ubuntu/Debian\nsudo apt install git-lfs\n\n# Windows\nwinget install GitHub.GitLFS\n# (or install Git for Windows, which bundles Git LFS as an optional component)\n\n# Then (once, per machine)\ngit lfs install\n```\n\nIf you hit `git-lfs filter-process: command not found` during `git clone` or `npx skills add heygen-com/hyperframes`, install Git LFS and retry. You can also skip LFS content if you only need the source files:\n\n```bash\nGIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git\n```\n\n## License\n\n[Apache 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheygen-com%2Fhyperframes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheygen-com%2Fhyperframes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheygen-com%2Fhyperframes/lists"}