项目简介
Hyperframes 允许开发者用 HTML 和 CSS 制作视频，通过无头 Chrome 确定性渲染导出 MP4。它内置 CLI 支持预览和渲染，并提供技能插件与 AI 编程代理深度集成。支持 GSAP、Lottie 等动画运行时，采用帧适配器模式。
README 预览
\n \n \n \n \n \n\n\n\n \n \n \n \n \n\n\nWrite HTML. Render video. Built for agents.\n\n\n \n\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 m
常见问题 (3)
故障排除为什么在 hyperframes 中，GSAP tweens 在 1700 秒后不会在渲染的视频中显示？
故障排除
为什么在 hyperframes 中，GSAP tweens 在 1700 秒后不会在渲染的视频中显示？已知 hyperframes 0.6.52 中的错误：起始时间 > 约1700秒（绝对）的GSAP补间动画在渲染期间不会被应用。解决方法：重新组织动画，使补间从时间0开始，并使用持续时间控制可见性，或者将合成拆分为较短片段。从t=0开始的连续补间可以正常工作。关注 issue #1107 以获取永久修复。
故障排除将HyperFrames升级到v0.6.11后，为什么我渲染的视频底部会出现白色或黑色的条？
故障排除
将HyperFrames升级到v0.6.11后，为什么我渲染的视频底部会出现白色或黑色的条？这是HyperFrames v0.6.11+（包括最新的v0.6.31）中的一个已知回归问题。在1080x1920纵向构图的开始约37秒内，底部条带未被视频元素覆盖。目前唯一的解决方法是降级到v0.6.10，该版本能正确渲染。使用：npx --yes hyperframes@0.6.10 render --output out.mp4。关注问题#1009以获取永久修复。
故障排除如何在Studio中选择被另一个元素隐藏的元素？
故障排除
如何在Studio中选择被另一个元素隐藏的元素？目前，点击预览仅能选中最上层的元素。若要选中被遮挡的元素，请使用“图层”面板手动选取该图层。已提议通过重复点击或修饰键+点击来循环切换堆叠图层（参见 issue #1125），但该功能尚未实现。