REMOTION VS HYPERFRAMES
Remotion 和 HyperFrames：用代码做视频的两条路
两者都把代码渲染成 MP4，也都能在 Claude Code 和 Codex 里用。Remotion 把视频写成 React 组件；HyperFrames 渲染普通的 HTML、CSS 和可定位播放的动画。下面讲清区别，以及 Claude Motion 在其中的位置。
信息于 2026 年 10 月 26 日对照两个 GitHub 仓库核实 · Claude Motion 独立运营，与 Anthropic、HeyGen、Remotion 均无关
使用 Claude Motion 必须订阅付费的 Creator 或 Studio 套餐，不提供 Free 免费版。
REMOTION
- 视频写成 React 组件
- Remotion Studio 预览
- 个人和 3 人以内团队免费
- 超过需买公司许可
HYPERFRAMES
- 视频写成普通 HTML 和 CSS
- HyperFrames Studio 时间线
- Apache-2.0 开源，HeyGen 出品
- 自带 agent Skill
REMOTION：REACT，REMOTION 许可证 · HYPERFRAMES：HTML，APACHE-2.0 · CLAUDE MOTION 基于 HYPERFRAMES 渲染
逐项对比
最大的区别在于 agent 写的是什么。用 Remotion，它写 React：组件、props，以及用 useCurrentFrame 这类 hook 做的帧计算。用 HyperFrames，它写一个普通 HTML 页面，每个片段带上时间属性，GSAP、CSS 等任何可定位播放的动画都按这条时间线播放。
Remotion
团队本来就用 React 思考、想要带类型可复用的视频组件时最合适。
HyperFrames
想让任何网页、图表或动画库直接变成视频、不要构建步骤时最合适。
共同点
都在本地渲染 MP4，都能在 Claude Code、Codex 或 Cursor 里运行。
| REMOTION | HYPERFRAMES | |
|---|---|---|
| agent 写的是 | React 组件 | HTML、CSS 和 JS |
| 时间控制 | 代码里算帧 | 每个片段上的属性 |
| 预览与编辑 | Remotion Studio | HyperFrames Studio 时间线 |
| 现成积木 | 模板和扩展包 | 约 450 个 registry 积木 |
| agent Skill | Remotion 官方 Skill | 仓库自带 7 个 Skill |
| 许可证 | 3 人以内免费，之上需公司许可 | Apache-2.0 |
| 依赖 | Node.js 和 React 项目 | Node.js 22+ 和 FFmpeg |
哪个适合你
没有绝对的好坏。看你从什么开始，以及代码之后归谁维护。
许可证
员工超过 3 人的营利公司使用 Remotion 需要公司许可；HyperFrames 对所有人都是 Apache-2.0。
迁移
HyperFrames 提供 /remotion-to-hyperframes Skill，能移植 Remotion 代码并逐帧核对。
不只是视频
HyperFrames 本身就是 HTML，同一份作品也能作为可交互网页运行。
简单判断
- 01已有 Remotion 代码库或 React 设计系统 → 继续用 Remotion。
- 02需要带类型的组件和大规模服务端渲染 → Remotion。
- 03公司超过 3 人、不想付许可费 → HyperFrames。
- 04想让 agent 把网页、图表或文档变成视频 → HyperFrames。
Claude Motion 在哪一层
Claude Motion 是一套跑在 HyperFrames 之上的 Skill 和命令行工具。你把文档、脚本或想法交给 agent，它按一种动效风格规划场景，写出 HyperFrames 作品，按需加配音和音乐，然后在你自己的电脑上渲染 MP4。你拿到的仍是可以打开、可以改的普通 HTML。
从文档开始
文档、幻灯片、课程笔记或博客，而不是一张空白场景。
在时间线上改
在 HyperFrames Studio 里调时长、剪片段，或直接让 agent 改。
可交互输出
分享链接里有图表、测验和筛选，同时有 MP4。
浏览风格对任何已连接的账号开放；创建、渲染、配音和分享需要 Creator（$19.9/月）或 Studio 计划。HyperFrames 和 Remotion 本身不需要 Claude Motion 也能用。
安装 Claude Motion
在 HyperFrames 上渲染
每张卡片都是 agent 按需求做出的真实 HyperFrames 渲染。点开看它是怎么做的。
Why your coffee costs twice as much风格 · 纸墨编辑15 秒查看案例
Sprout — plant care, softly风格 · 柔软黏土15 秒查看案例
How Seeds Travel — a watercolor story风格 · 水彩绘本15 秒查看案例
一幅画里的四季风格 · Huashu Art Motion15 秒查看案例alchaincyf/huashu-art-motion· MIT
Record Store Day — Halftone Records风格 · Bang Motion14 秒查看案例bangtutorial/bang-motion· MIT
Weekly review in five minutes风格 · Notion16 秒查看案例
HALO — Silence, redesigned.风格 · Apple15 秒查看案例
Think it through风格 · Claude15 秒查看案例
Breeze to grid — the power path of a wind turbine风格 · 工程蓝图16 秒查看案例
SOUNDWAVE '26 — Line-up drop风格 · 动态海报15 秒查看案例
Voltline — Q3 2026 results风格 · 安静发布会15 秒查看案例
Fix a bug in 30 seconds风格 · Cursor14 秒查看案例
Claude Motion 在 HyperFrames 之上加了什么
动效风格
选一个风格，或让 agent 自由设计。
动态图表
内置 ECharts，风格统一。
测验与拖拽
默认可交互。
HyperFrames 时间线
编辑片段、时长和积木。
配音
中英文，品牌名念得准。
音乐
现在生成，或以后再加。
分享链接
公开或加密码，带数据统计。
MP4 渲染
本地渲染，结果稳定。
3 步用 Claude Motion 做出第一条 HyperFrames 视频
- 1把安装指南里的一行安装命令粘进 Claude Code 或 Codex。
- 2放入文档，选一个动效风格；音乐现在选或以后加都行。
- 3在 HyperFrames 时间线上微调，然后渲染 MP4 或分享链接。
第一次运行会打开浏览器登录，点一下就好，不用碰终端。
常见问题
HyperFrames 能替代 Remotion 吗？
对大多数 agent 做的视频来说可以。两者都把代码渲染成 MP4。HyperFrames 用普通 HTML 而不是 React，并且是 Apache-2.0，不用买公司许可。如果你想要 React 组件，Remotion 更成熟。
HyperFrames 免费吗？
免费。HyperFrames 以 Apache-2.0 开源，在你自己的电脑上渲染，需要 Node.js 22 或更高版本和 FFmpeg。
Remotion 免费吗？
个人、非营利组织和员工不超过 3 人的营利公司免费，包括商用。更大的营利公司需要购买 Remotion 公司许可。
能把 Remotion 项目转成 HyperFrames 吗？
HyperFrames 为 coding agent 提供了 /remotion-to-hyperframes Skill，可以移植 Remotion 代码并逐帧对比结果。替换生产管线之前，请自己检查一遍输出。
用 HyperFrames 一定要装 Claude Motion 吗？
不用。从 GitHub 安装 HyperFrames 和它的 Skill，直接让 agent 做视频即可。Claude Motion 在此之上加了动效风格、从文档到视频的规划、配音、图表、测验和分享链接。