HyperFrames：用 HTML 写视频，让 Claude Code 等编程智能体直接渲染 MP4

01它是什么、适合谁

你描述视频的方式是：一个 div 作为舞台，里面的 video、音频、文字元素用 data-start、data-duration、data-track-index 标明开始时间、时长和轨道，动画交给 GSAP、CSS、Lottie、Three.js、Anime.js 或 WAAPI 等能“按时间点定位”的动画库。预览时可直接在浏览器里打开，渲染时由无头 Chrome 逐帧定位并截图，再由 FFmpeg 合成并混音。

适合想批量、自动化生成产品介绍、数据图表动画、字幕视频、文档转视频的开发者，也适合想让编程智能体直接产出视频的人。项目 README 列出的用途包括产品发布视频、带动画代码差异的 PR 讲解、图表竞赛和地图动画等。

02上手

手动使用 CLI（要求 Node.js 22+ 和 FFmpeg，以下命令来自 README，本站未实际运行）：

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器实时预览
npx hyperframes render    # 渲染成 MP4

让智能体来做：Claude Code 可以安装插件，其他智能体用 npx 安装技能。

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# 或者给任意支持技能的智能体安装核心技能
npx hyperframes skills update

装好后用 /hyperframes 描述需求即可，例如“做一个 10 秒的产品介绍，带淡入标题、背景视频和轻音乐”（README 的示例提示）。核心技能共四个：hyperframes、hyperframes-cli、hyperframes-registry（约 450 个现成的转场、字幕、图表等积木）和 media-use；另有 figma、slideshow、remotion-to-hyperframes 三个按需安装。

03和 Remotion 的差别

以上对比出自 HyperFrames 自己的 README，立场是项目方的，选型前建议对照 Remotion 官方许可条款。

04使用前要知道

• 仓库约 6,000 次提交、95 个未关闭 issue，持续在更新；README 中 Studio 标注为“可用，仍在演进”。
• 渲染依赖本机 Chrome 和 FFmpeg，大批量渲染要自己规划算力，或使用 AWS Lambda 方案。
• 示例里的动画库通过 CDN 引入，离线环境需要自行放入本地文件。
• 技能中的素材生成（配音、数字人等）可用 HeyGen 或免费本地工具，使用 HeyGen 服务的部分是否收费以其官方为准。
• 本文基于 10 月 25 日 README，未创建或查询仓库创建日期与具体版本号。