Remotion 制作
将 Remotion 视频构建为确定性的帧渲染器。将资产几何、视觉锚定、时间线时序和最终媒体验证作为独立关注点处理。
路由任务
- 对于精灵图表提取、帧溢出、主体偏移、截断的作品或不自然的循环,请阅读 references/sprite-sheets.md。
- 对于合成结构、场景时序、实时坐标面板或过渡设计,请阅读 references/scene-architecture.md。
- 对于视频内开场封面、独立缩略图合成、品牌结局或最终定格画面,请阅读 references/covers-and-endings.md。
- 对于资源加载、音频、
delayRender失败、内存不足渲染或导出验证,请阅读 references/rendering-and-audio.md。 - 对于封面图提示、缩略图方向、短视频描述或发布标签,请阅读 references/publishing-copy.md。
仅阅读与请求相关的参考资料。在导入资源前检查已安装的 Remotion 版本,因为旧项目可能从 remotion 暴露媒体组件,而当前项目使用 @remotion/media。
制作工作流程
1. 确立渲染契约
在编辑前检查现有项目。记录:
- 合成 ID、宽度、高度、帧率(FPS)和时长;
- 场景边界以及帧是全局还是属于某个
Sequence的局部; - 源资产尺寸、透明度、帧元数据和音频时长;
- 所需的输出编码格式、目标路径和可用渲染资源;
- 交付物是否包含开场封面场景、独立封面图像、结束卡片、可听音频、有意静音或发布文案。
保留不相关的工作区更改。倾向于进行小而精准的更改,而不是重构一个运行中的项目。
2. 显式建模时间
将场景时长和剪切帧定义为命名常量或数据。动画状态通过 useCurrentFrame() 和 useVideoConfig() 派生。
const spriteIndex =
Math.floor((frame * spriteFps) / compositionFps) % sequence.length;
使用带钳制范围的 interpolate() 处理连续运动。不要使用 CSS 过渡、CSS 关键帧、挂钟计时器、随机值或可变播放状态来驱动渲染动画。
3. 分离源几何与呈现
将裁剪矩形、动画顺序、内容边界和视觉锚点存储在类型化数据中。使渲染组件消费这些数据,而不是在 CSS 或标签中重复坐标。
对以下所有内容使用相同的计算出的当前帧对象:
- 可见裁剪区;
- 帧计数器和高亮显示的单元格;
- JSON/坐标面板;
- 描述当前帧的标题文本。
这可以防止出现正确的动画与过时的解释性 UI 并存的情况。
当展示胶片条时,生成一个包含确切当前帧的窗口。不要在渲染不同裁剪区域时高亮显示最近的采样帧。
4. 稳定主体
对动画使用固定视口。首先裁剪精确的源矩形,然后在视口内使用基于帧的视觉锚点或可见内容框平移该裁剪帧。当作品在单个单元格内移动时,不要仅居中原始单元格矩形。
对于精灵图表,验证每个边缘帧以及包含长尾部、头发、阴影或运动轨迹等长延伸部分的帧。遵循 references/sprite-sheets.md 中的详细工作流程。
5. 构建场景连续性
为合成提供所有场景序列之外的持久不透明基色背景。场景背景也可保持不透明。过渡效果作为帧驱动的覆盖层应用于场景之上,并位于任何最终暗角或安全覆盖层之下。
保持装饰效果从属于解释内容。过渡应隐藏剪切,而不是暴露透明度、棋盘格、相邻精灵单元格或未挂载的内容。
当请求包含封面或结局时,将它们作为一级场景实现,并在有用时渲染一个独立的封面合成。遵循 references/covers-and-endings.md。不要用封面生成提示代替实际的 Remotion 封面,除非用户仅要求一个提示。
6. 添加和混音音频
使用 staticFile() 引用本地音频。通过选择足够长的轨道、有意循环或有意裁剪来覆盖整个合成。对于用户提供的长轨道,检查其时长、静音和响度,然后将所需片段放入 public/audio/。选择一个音乐上自然的边界,而不是仅依赖响度。
使用基于帧的音量回调处理淡入淡出,并保持背景音乐足够低,以不影响旁白或教学文本。当 Remotion 本身已拥有音量包络时,避免将淡入淡出硬编码到音频片段中。
不要仅凭 Studio 预览就断言音频完成。验证导出的文件包含可测量的非静音音频流。
7. 逐步扩大验证范围
按以下顺序进行检查:
- 对项目进行类型检查。
- 在封面处、每个剪切的两侧、代表性精灵帧处、结局入口处和最终定格画面处渲染静帧。
- 渲染完整的合成。
- 如果 Chrome 耗尽 RAM 或临时磁盘,在更改应用程序代码之前先降低渲染并发数。
- 检查最终容器文件的时长、视频流和所需的音频流。
导出后使用内置验证器:
node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio
即使目标路径存在文件,也将部分或失败的输出视为无效。
8. 在要求时准备发布文案
封面提示和视频描述应基于最终合成、已验证的主体、教学要点、视觉风格、时长和受众。直接在与用户的对话中输出这些交付物。除非用户明确要求,否则不要创建提示或描述文件、调用图像生成工具或生成封面图像。
遵循 references/publishing-copy.md。确保产出内容可直接复制、对目标平台简洁明了,并使用用户的语言编写。
完成标准
在满足以下条件之前不要声称完成:
- 动画由帧确定性派生;
- 主体边界在循环中保持完整且视觉稳定;
- 解释性坐标随渲染的精灵帧更新;
- 场景切换从不暴露透明或棋盘格伪影;
- 媒体资产加载无泄漏的渲染句柄;
- 完整渲染在稳定的并发数下成功;
- 导出的文件具有期望的时长、所需的音频/视频流,并且当需要音乐时音频非静音;
- 请求的封面和结束场景在完整状态、过渡边界和最终帧处都经过视觉检查;
- 独立封面作品包含自己的不透明背景并与视频层级匹配;
- 请求的封面提示和发布描述准确反映最终视频,并直接在对话中交付。
报告输出路径、渲染命令、验证结果以及任何有意降低的并发数。