Remotion 网页视频迁移助手

Remotion 网页视频迁移助手

这个 Skill 能做什么

把现有 Remotion React Composition 迁移为浏览器原生的 HTML、CSS 与 JavaScript 时间线视频工程。

完成任务时重点处理：

• Composition、帧率、尺寸和序列结构
• React 组件、动画、媒体和字体迁移
• 帧级对照、确定性和渲染兼容

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 明确需要转换已有 Remotion 源码，而不是从参考视频重新创作。
• 用户需要把现有 Remotion React Composition 迁移为浏览器原生的 HTML、CSS 与 JavaScript 时间线视频工程。
• 任务需要同时控制Composition、帧率、尺寸和序列结构、React 组件、动画、媒体和字体迁移。

如果只有视频成品没有源码时改为重制任务并明确无法精确迁移，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 目标、输入文件与预期输出
2. 运行环境、依赖、版本和目录约束
3. 已有代码、接口、样例和错误信息
4. 安全、性能、兼容性和测试要求
5. Remotion 项目源码、入口 Composition 和依赖
6. 目标网页视频运行时、输出规格与允许的替代实现

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 确认迁移边界

只处理明确指定的 Composition、尺寸、帧率和时长。

2. 分析源结构

读取 Sequence、帧计算、插值、媒体、字体和组件依赖。

3. 建立对应表

把 React 组件与 Remotion 时间语义映射到 DOM 和确定性时间线。

4. 迁移视觉与资产

重建布局、样式、SVG、图片、视频、音频和字体。

5. 迁移动画

保持关键帧、缓动、序列边界和同一帧输出一致。

6. 帧级验证

对比代表帧、完整时长、音画同步和最终渲染。

输出格式

至少交付以下内容：

• 迁移映射：源组件、时间语义、资产和目标实现
• 网页视频工程：可运行的 HTML/CSS/JS 版本
• 对照报告：关键帧差异、替代实现和未迁移能力

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

用户提供一个含三个 Sequence 的产品片头；先映射帧范围和插值，再逐帧对比开场、转折与结尾。

合理处理顺序：

1. 确认迁移边界
2. 分析源结构
3. 建立对应表
4. 迁移视觉与资产
5. 迁移动画
6. 帧级验证

交付时应重点展示迁移映射、网页视频工程、对照报告，并说明尚未验证的部分。

质量检查清单

• [ ] 命令、脚本和依赖在目标环境可运行
• [ ] 输入、输出、错误和边界情况均被处理
• [ ] 关键步骤可重复执行且不会意外覆盖原件
• [ ] 完成最小测试并记录验证命令与结果
• [ ] 目标帧率与时长和源 Composition 一致
• [ ] 未支持能力使用明确替代方案而非静默丢失

信息不足时怎么处理

• 缺少依赖或权限时先给出可验证的替代路径。
• 环境未知时避免绑定单一工具，明确适配点。
• 只有视频成品没有源码时改为重制任务并明确无法精确迁移。