Communitygithub.com

讲解视频:Remotion 精修、封面与校验导出

Remotion 制作 Skill,把草稿打磨成精致的 React 视频:确定性的逐帧动效、场景节奏、精灵图清理、开场封面与品牌片尾、转场、配乐截取、渲染报错修复以及导出校验。

讲解视频:Remotion 精修、封面与校验导出 是什么?

「讲解视频」配方第 2 步(让它像专业出品),来自 10and01/10and01-remotion-skill。Agent 把 Remotion 当作确定性的逐帧渲染器:先记录渲染约定(画布尺寸、FPS、时长、场景边界、素材、编码),用命名常量建模时间,所有动画都由 useCurrentFrame 和带钳制的 interpolate 驱动,不用 CSS 计时器,裁切、锚点和字幕都放在类型化数据里。它按需读取精灵图、场景架构、封面与片尾、渲染与音频故障(delayRender、内存溢出)和发布文案等专项参考,最后校验导出的文件,并根据成片写出封面图提示词和短视频文案。

兼容平台~Claude Code✓Codex CLI~Cursor
npx skills add 10and01/10and01-remotion-skill

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Remotion 制作

将 Remotion 视频构建为确定性的帧渲染器。将资产几何、视觉锚定、时间线时序和最终媒体验证作为独立关注点处理。

路由任务

仅阅读与请求相关的参考资料。在导入资源前检查已安装的 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. 逐步扩大验证范围

按以下顺序进行检查:

  1. 对项目进行类型检查。
  2. 在封面处、每个剪切的两侧、代表性精灵帧处、结局入口处和最终定格画面处渲染静帧。
  3. 渲染完整的合成。
  4. 如果 Chrome 耗尽 RAM 或临时磁盘,在更改应用程序代码之前先降低渲染并发数。
  5. 检查最终容器文件的时长、视频流和所需的音频流。

导出后使用内置验证器:

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。确保产出内容可直接复制、对目标平台简洁明了,并使用用户的语言编写。

完成标准

在满足以下条件之前不要声称完成:

  • 动画由帧确定性派生;
  • 主体边界在循环中保持完整且视觉稳定;
  • 解释性坐标随渲染的精灵帧更新;
  • 场景切换从不暴露透明或棋盘格伪影;
  • 媒体资产加载无泄漏的渲染句柄;
  • 完整渲染在稳定的并发数下成功;
  • 导出的文件具有期望的时长、所需的音频/视频流,并且当需要音乐时音频非静音;
  • 请求的封面和结束场景在完整状态、过渡边界和最终帧处都经过视觉检查;
  • 独立封面作品包含自己的不透明背景并与视频层级匹配;
  • 请求的封面提示和发布描述准确反映最终视频,并直接在对话中交付。

报告输出路径、渲染命令、验证结果以及任何有意降低的并发数。

相关技能