[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3872":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":15,"starSnapshotCount":15,"syncStatus":40,"lastSyncTime":41,"discoverSource":42},3872,"hyperframes","heygen-com\u002Fhyperframes","heygen-com","Write HTML. Render video. Built for agents.",null,"TypeScript",26786,2510,73,4,0,342,2535,9503,1794,120,"Apache License 2.0",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36],"ai","animation","ffmpeg","framework","gsap","html","mcp","puppeteer","rendering","typescript","video","2026-06-12 04:00:19","\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"docs\u002Flogo\u002Fdark.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"docs\u002Flogo\u002Flight.svg\">\n    \u003Cimg alt=\"HyperFrames\" src=\"docs\u002Flogo\u002Flight.svg\" width=\"300\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fhyperframes\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fhyperframes.svg?style=flat\" alt=\"npm version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fhyperframes\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fhyperframes.svg?style=flat\" alt=\"npm downloads\">\u003C\u002Fa>\n  \u003Ca href=\"LICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache%202.0-blue.svg\" alt=\"License\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fnodejs.org\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnode-%3E%3D22-brightgreen\" alt=\"Node.js\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FEbK98HBPdk\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Join-5865F2?logo=discord&logoColor=white\" alt=\"Discord\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\u003Cb>Write HTML. Render video. Built for agents.\u003C\u002Fb>\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Freadme-demo.gif\" alt=\"HyperFrames demo — HTML code on the left transforms into a rendered video on the right\" width=\"800\">\n\u003C\u002Fp>\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\u002Fhyperframes\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 `\u002Fhyperframes` to author compositions, `\u002Fhyperframes-cli` for the dev-loop commands (init, lint, preview, render), `\u002Fhyperframes-media` for asset preprocessing (TTS, transcription, background removal), `\u002Ftailwind` for `init --tailwind` projects, `\u002Fgsap` for timeline animation help, or the adapter skills (`\u002Fanimejs`, `\u002Fcss-animations`, `\u002Flottie`, `\u002Fthree`, `\u002Fwaapi`) when a composition uses those runtimes.\n\nFor Claude Design, open [`docs\u002Fguides\u002Fclaude-design-hyperframes.md`](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002Fmain\u002Fdocs\u002Fguides\u002Fclaude-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:\u002F\u002Fhyperframes.heygen.com\u002Fguides\u002Fclaude-design).\n\nFor Codex specifically, the same skills are also exposed as an [OpenAI Codex plugin](.\u002F.codex-plugin\u002Fplugin.json) — sparse-install just the plugin surface:\n\n```bash\ncodex plugin marketplace add heygen-com\u002Fhyperframes --sparse .codex-plugin --sparse skills --sparse assets\n```\n\nFor Claude Code, the repo also ships a [Claude Code plugin manifest](.\u002F.claude-plugin\u002Fplugin.json): test it locally with `claude --plugin-dir .`. The manifest intentionally omits `skills` because Claude Code auto-discovers the root `skills\u002F` directory by convention, and for marketplace submission use the title `HyperFrames by HeyGen` plus the black\u002Fwhite icon assets at [`assets\u002Fclaude-code-icon-dark.svg`](.\u002Fassets\u002Fclaude-code-icon-dark.svg) and [`assets\u002Fclaude-code-icon-light.svg`](.\u002Fassets\u002Fclaude-code-icon-light.svg) for the two theme slots.\nFor Cursor, the same skills are packaged as a [Cursor plugin](.\u002F.cursor-plugin\u002Fplugin.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 `\u002Fhyperframes` prefix loads the skill context explicitly so you get correct output the first time.\n\n**Cold start — describe what you want:**\n\n> Using `\u002Fhyperframes`, 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> Take a look at this GitHub repo https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes and explain its uses and architecture to me using `\u002Fhyperframes`.\n\n> Summarize the attached PDF into a 45-second pitch video using `\u002Fhyperframes`.\n\n> Turn this CSV into an animated bar chart race using `\u002Fhyperframes`.\n\n**Format-specific:**\n\n> Make a 9:16 TikTok-style hook video about [topic] using `\u002Fhyperframes`, with bouncy captions synced to a TTS narration.\n\n**Iterate — talk to the agent like a video editor:**\n\n> Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.\n\n> 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:\u002F\u002Fhyperframes.heygen.com\u002Fguides\u002Fprompting) 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 >= 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:\u002F\u002Fwww.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 \u002F 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:\u002F\u002Fwww.remotion.pro\u002Flicense).** 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:\u002F\u002Fhyperframes.heygen.com\u002Fguides\u002Fhyperframes-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\">\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  >\u003C\u002Fvideo>\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  \u002F>\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  >\u003C\u002Faudio>\n\u003C\u002Fdiv>\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\u002Fcatalog](https:\u002F\u002Fhyperframes.heygen.com\u002Fcatalog\u002Fblocks\u002Fdata-chart)**.\n\n## Documentation\n\nFull documentation at **[hyperframes.heygen.com\u002Fintroduction](https:\u002F\u002Fhyperframes.heygen.com\u002Fintroduction)** — [Quickstart](https:\u002F\u002Fhyperframes.heygen.com\u002Fquickstart) | [Guides](https:\u002F\u002Fhyperframes.heygen.com\u002Fguides\u002Fgsap-animation) | [API Reference](https:\u002F\u002Fhyperframes.heygen.com\u002Fpackages\u002Fcore) | [Catalog](https:\u002F\u002Fhyperframes.heygen.com\u002Fcatalog\u002Fblocks\u002Fdata-chart)\n\n## Packages\n\n| Package                                                          | Description                                                 |\n| ---------------------------------------------------------------- | ----------------------------------------------------------- |\n| [`hyperframes`](packages\u002Fcli)                                    | CLI — create, preview, lint, and render compositions        |\n| [`@hyperframes\u002Fcore`](packages\u002Fcore)                             | Types, parsers, generators, linter, runtime, frame adapters |\n| [`@hyperframes\u002Fengine`](packages\u002Fengine)                         | Seekable page-to-video capture engine (Puppeteer + FFmpeg)  |\n| [`@hyperframes\u002Fproducer`](packages\u002Fproducer)                     | Full rendering pipeline (capture + encode + audio mix)      |\n| [`@hyperframes\u002Fstudio`](packages\u002Fstudio)                         | Browser-based composition editor UI                         |\n| [`@hyperframes\u002Fplayer`](packages\u002Fplayer)                         | Embeddable `\u003Chyperframes-player>` web component             |\n| [`@hyperframes\u002Fshader-transitions`](packages\u002Fshader-transitions) | WebGL shader transitions for compositions                   |\n\n## Skills\n\nHyperFrames ships [skills](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fskills) that teach AI agents framework-specific patterns that generic docs don't cover.\n\n```bash\nnpx skills add heygen-com\u002Fhyperframes\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\u002Fmodel\u002Fcodec 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:\u002F\u002Fgit-lfs.com) for golden regression-test baselines under `packages\u002Fproducer\u002Ftests\u002F**\u002Foutput.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\u002FDebian\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\u002Fhyperframes`, 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:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes.git\n```\n\n## License\n\n[Apache 2.0](LICENSE)\n","HyperFrames 是一个用于创建、预览和渲染基于HTML的视频合成的开源框架，特别支持AI代理。它通过结合使用TypeScript、GSAP、Puppeteer等技术，提供了一种将HTML代码直接转换为高质量视频输出的方法。核心功能包括支持多种动画库如GSAP、AnimeJS、Lottie等，并且能够处理文本转语音(TTS)、转录和背景移除等媒体预处理任务。该项目非常适合需要快速生成动态内容视频的场景，例如在线教育、数字营销或是任何希望利用自动化工具简化视频制作流程的应用场合。",2,"2026-06-11 02:56:48","top_language"]