
今天拆的是 HyperFrames:让编码 Agent 直接写 HTML、再用无头 Chrome 逐帧拍成 mp4 的开源渲染底座;文章给全它在链条上的层级、三条上手路径、九处已知阻塞,以及本地渲染免费与托管渲染收费之间那条线。

.claude-plugin、.codex-plugin、.cursor-plugin、.agents/skills 与 registry 占了靠前的几行,这个仓库把相当一块面积花在「让 Agent 接得上」这件事上。1index.html 打开就能放)、交给 Agent 的是普通 HTML 文件,以及许可上的差别:这边是 Apache-2.0,那边是源码可见的 Remotion 许可 25。project.json,capcut-cli 交一份剪映草稿,Diffusion Studio 交一份可执行的 JSX,你要回到那些文件上继续改;HyperFrames 交的是一份网页工程加一支 mp4,改动发生在 HTML 里,改完重渲一遍 2。官方文档把它的位置写得更直接:它也可以是别人家托管创作流程背后的渲染核心 6。data-start、data-duration、data-track-index 决定;带 class="clip" 的元素才算进时间线。下面是 README 里的例子,一个 1920×1080 的合成,一段引子视频打底,标题在第 1 秒淡入、第 5 秒淡出,配一条音量压到一半的音乐 2。<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>
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>window.__timelines 上,渲染器按需要把它暂停、seek 到某一刻再取画面。GSAP、CSS 关键帧、Lottie、Three.js、Anime.js、WAAPI 都各有适配器,也可以用自己写的 26。init 建项目、lint 查工程结构、check 开浏览器查运行时与版面问题、snapshot 抽几帧看画面、preview 本地预览、render 出片、doctor 体检本机环境,另有一个 benchmark 用来调并行参数 78。npx hyperframes add flash-through-white 一条命令装进来 9。品牌一侧另有一份 frame.md:把网页语境里的 design.md 翻成镜头能用的规格,官方把它描述成一份 Agent 可以照着重组成片子的 DESIGN.md 超集 2。studio_look 找元素、studio_select 把目标指给人看、studio_inspect 读样式、studio_set_style 改样式、studio_frame 抽某一秒的画面——官方说最后这个最要紧,它让 Agent 能自己看结果,而不是猜 11。
npx skills add heygen-com/hyperframes,和一句「Using /hyperframes, make a 10-second product intro for https://example.com」。页头右上角的 star 徽章显示 53,638。12/hyperframes 先确认你要什么,再决定进哪条创作流程 2。media-use 技能或你自己接的服务,HyperFrames 只负责把这些文件摆到时间线上 2。/hyperframes:hyperframes 触发:claude plugin marketplace add heygen-com/hyperframes、claude plugin install hyperframes@hyperframes。插件把整套技能打包带进来,跟着 Agent 自己的更新机制走 214。npx skills add heygen-com/hyperframes,选择器里选 Core Skills 组;非交互环境或 Agent 自己跑的时候用 npx hyperframes skills update,它只装核心那一组,而且要的是当前 main 分支的版本。README 在这里提醒了一句:skills add 解析的是 skills.sh 上的注册表快照,可能比 main 落后几小时 2。https://mcp.heygen.com/mcp/hyperframes/,在 Claude 的自定义连接器、ChatGPT 的应用或 Grok 的 Connectors 里填进去,走一次 HeyGen 的 OAuth 登录,之后在对话里描述你要什么就能建和渲 15。hyperframes.dev,挑一个模板改文案、填网址就能出片,注册过的项目也能在那里重渲 16。npx hyperframes init my-video 建一个空项目,npx hyperframes preview 在浏览器里打开预览,npx hyperframes render --output final.mp4 出片。渲染之前跑一次 lint 和 check,前者查工程结构,后者开浏览器查运行时、版面、运动和对比度问题 7。

snapshot --at 抽帧比对两次结果;确实要求一帧不差的交付,先做小样再上量。drawElement 的 PSNR 自校验抓不到低对比度内容的缺失 23。你能怎么办:提速先跑 benchmark 找可用并行度,出片后逐帧抽查或对关键秒数抽帧核对,别只看「渲染成功」。spawn EBUSY 失败,没有重试也没有上下文。现状:#4058 同样在 2026 年 9 月 18 日提交、open 25。你能怎么办:Windows 上先小片试跑、留足磁盘,或者改用 --docker 走容器里的固定环境。player-ready-timeout,默认 45 秒,降低画质或缩小素材都不会缩短这段等待。触发条件:静态画面、简单的文字卡、只放视频不写动画的合成。现状:官方故障排查页把这条写成了正式条目,并给出解法——在合成根元素上加 data-no-timeline,lint 会以 missing_data_no_timeline 提醒你漏了它 13。你能怎么办:给没有时间线的合成补上这个属性,批量渲染时这一条能省掉成分钟的空转。z-index: -1 的元素在快照和渲染里都静默不出现;CSS transition 这种与逐帧寻址冲突的写法没有被 lint 拦下;只有单个关键帧的视频被稀疏关键帧检查跳过。触发条件:用了上面这几类写法,而画面看起来「没报错」。现状:#4366 在 2026 年 9 月 23 日提交、open 26;#3493 与 #3460 分别是 2026 年 8 月 26 日与 8 月 24 日的 lint 缺口,都还挂着 2728。你能怎么办:官方自己给的建议是「始终看导出的那个文件」,预览只证明工程能放,导出文件才证明交付对不对 7。libvpx-vp9 解码器抽一帧,放到棋盘格背景上看 730。你能怎么办:交付前按官方给的方法抽帧验颜色,HDR 只在确认整条链路都支持时开。hyperframes_version 永远写成 0.0.0-dev 33;安装命令本身也有两处写法,README 给的是 npx skills add heygen-com/hyperframes,快速上手页上写的是带 --full-depth 的版本 212。你能怎么办:以本机实际装的版本和官方文档站为准,需要最新技能时用 npx hyperframes skills update 从 main 拉。hyperframes cloud render 要先用 HeyGen 账号登录,把工程打包上传(压缩包上限 200 MB),4K 按 1.5 倍计费,设备码登录在 CI 里会被拒绝、得改用长期 API key 34;官方没有公开单次渲染的价目,只说套餐、额度与计费会随 HeyGen 独立变动,要自己在账号里确认 15。HeyGen 面向个人用户的公开价目是 Free 0 美元、Creator 每月 29 美元(600 积分)、Pro 每月 49 美元(1,000 积分),但这份价目页没有说明哪一档能开通 HyperFrames 连接器,官方 HyperFrames 文档也没有给出对照 35。自己开云是第三处:AWS Lambda 与 Google Cloud Run 两条托管方案要你自己准备账号、S3 或 GCS 存储与并发配置,包里的 SDK 只负责把成本估算报给你,账单是你自己的 3637。--quality draft 的审片版本、把大图缩到实际投放尺寸、少用大面积模糊与阴影,把完整画质留到最后一版 8。换句话说,用编码 Agent 写 HTML 再反复重渲这条工作方式,真正的账单是你机器上的时间和 Agent 的 token。
| 方案 | 你给它什么 | 它给你什么 | 它在这一层 | 许可与公开体量 |
|---|---|---|---|---|
| HyperFrames(本期) | 一句需求加网址 / 剧本 / PR / 音乐,或一份现成的网页工程 | 可继续编辑的网页工程,加一支 mp4 / webm / mov | 渲染底座,同时自带 HTML 工作流描述、技能包与资产目录 | Apache-2.0,53,638 star、4,888 fork、432 个 release 1 |
| Remotion | React 组件 | React 工程渲染出的视频 | 同一层的另一种写法,HyperFrames 官方拿它当对照 | 源码可见的 Remotion 许可,60,759 star 38 |
| hypit(配置钉住的参照) | 一条要复刻的原片与生成额度 | 克隆出来的一批变体 | 以原片为模板的批量生成 | 自订许可,16,680 star 39 |
| video-shotcraft(第 1 期) | 一句产品说明与模板指令 | 157 张镜头卡排出的宣传片 | 装进 Agent 的镜头资产库 | Apache-2.0,9,704 star 40 |
| OpenStoryline(第 6 期) | 素材与剪辑意图 | 18 个工具节点串出的剪辑产线 | 剪辑编排产线 | Apache-2.0,3,442 star 41 |
| Diffusion Studio(第 13 期) | 一个项目文件夹与能连 MCP 的 Agent | 可继续改的 JSX 时间线工程 | 合成文档与剪辑环境 | MPL-2.0,3,111 star 42 |
| OpenChatCut | 本机工程与对话 | 多轨时间线工程,可导出剪映草稿 | 本地优先的对话式剪辑器 | AGPL-3.0,2,025 star 43 |
| capcut-cli(第 10 期) | 本机剪映草稿库 | 还能继续编辑的剪映工程 | 草稿文件读写 CLI | MIT,789 star 44 |
| Comfy MCP(第 9 期) | 提示词与工作流模板 | 生成的素材 | 生成底座 | AGPL-3.0 或商用许可,238 star 45 |
github.com
raw.githubusercontent.com
raw.githubusercontent.com
github.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
hyperframes.dev
github.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
hyperframes.heygen.com
github.com
npmjs.com
github.com
hyperframes.heygen.com
heygen.com
hyperframes.heygen.com
hyperframes.heygen.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
github.com
This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.