用同一份生产契约驱动 Remotion 与 HyperFrames,比较从预览到成片验收的完整路径。
pnpm --filter @yanimation/remotion devpnpm --filter @yanimation/hyperframes dev时长
36 秒
帧率
30 FPS
横版
1920 × 1080
竖版
1080 × 1920
音频
48 kHz / 单声道
场景
5 个连续章节
修改契约
先改共享 brief、场景时间、安全区与资产清单。
同步输入
生成确定性音轨,并把同一输入送入两个独立工程。
分别预览
在各自 Studio 中检查时间轴、横竖构图与关键帧。
执行渲染
四条命令输出两种运行时的横版与竖版成片。
媒体验收
用 ffprobe 校验尺寸、时长、帧率、视频与音频编码。
| 维度 | Remotion | HyperFrames |
|---|---|---|
| 创作模型 | React 组件 + 帧 | HTML + data attributes + 秒 |
| 动画驱动 | useCurrentFrame / interpolate | 可 seek 的 GSAP 时间轴 |
| 类型边界 | TypeScript props 天然完整 | 数据契约在生成阶段校验 |
| 本地预览 | Remotion Studio | HyperFrames Studio + 可视时间轴 |
| 复用优势 | 复用 React 组件与前端工程能力 | 复用 HTML、CSS、GSAP 与 Agent 产出 |
| 当前成熟度 | 生态成熟、渲染与云端路径清晰 | 迭代活跃、HTML 与 Agent 工作流突出 |
| 本项目默认结论 | 生产型 React 视频的默认方案 | HTML/Agent 视频管线的重点观察方案 |
pnpm video:prepare校验契约并同步两套工程输入
pnpm video:check枚举 Composition 并检查 HTML 时间轴
pnpm video:render渲染四条横竖版 MP4
pnpm video:inspect核对尺寸、时长、帧率与音轨