remotion-code-motion-explainer

Remotion 代码动态解说

将抽象概念构建为一个连续且可编辑的视觉系统。展示每个概念如何变化，而不是用无关的动态效果装饰旁白。

由 Bingo（@DWCD-Bingo）创建，并由 Vibe Motion 组织维护。

加载相关指南

• 每次制作都阅读 references/code-motion-design.md。
• 每次制作都阅读 references/motion-production-patterns.md。
• 实施前和最终交付前阅读 references/production-and-qc.md。
• 对于 UI、产品、AI 工作流、霓虹焦点、波形、仪表盘、设计工具或高保真界面相关工作，阅读 references/ui-motion-shot-library.md。
• 研究或重现参考视频、After Effects 渲染、原型或屏幕录制时，阅读 references/reference-reconstruction.md。
• 将 assets/shot-library 用作随附的可编辑入门素材库。设计新镜头前，先搜索 assets/shot-library/shot-library.json。如果素材库中的可复用组件符合语义需求，请将素材库复制到目标项目中；不要直接修改已安装的 Skill。
• 使用不熟悉的 API 前，先查阅已安装的 Remotion 文档或最佳实践技能。

确立制作规范

1. 确认获批的脚本或解说内容、旁白状态、字幕依据、宽高比、帧率、时长、品牌体系、技术事实和交付格式。
2. 有旁白时，以人工核验过的字幕作为时间依据。没有旁白时，创建明确的节拍时间线，并确保视频静音时仍易于理解。
3. 只使用用户提供、已获授权、属于公有领域或明确可再分发的素材。
4. 绝不编造产品行为、数值数据、科学关系或交互结果。
5. 优先采用参数化视觉系统，而非一次性硬编码场景。

执行工作流

1. 将语言转化为视觉状态

• 将解说拆分为分句级的语义节拍。
• 对每个节拍记录：
  • 旁白或屏幕上的陈述；
  • 叙事目的；
  • 输入状态；
  • 主导动词；
  • 可见的变化；
  • 输出状态；
  • 观众关注点；
  • 与下一节拍的衔接。
• 将名词、动作、数字、关系和状态变化编译为独立的视觉元素。
• 确定会贯穿多个节拍的持久对象。
• 选择最简单且准确的呈现方式：UI、流程、图表、波形、公式、空间模型或 3D。
• 将计划写入 src/data/choreography-plan.json。

关卡：每个陈述都有可见的推理作用、呈现主体、结果和衔接。

2. 锁定视觉系统

• 定义网格、安全区域、间距、字体排印、色彩语义、景深、摄像机和运动曲线。
• 用一句概念角度描述视觉世界。
• 为开场钩子、最复杂的机制和结尾设计具有代表性的静帧。
• 设计元素入场前，先构建信息量最大的主视觉画面。
• 创建持久对象清单和世界坐标规划。
• 将复杂对象拆解为有意义的运动部件，而不是对静态截图做动画。
• 在整个过程中保持相同概念的视觉表现一致。

关卡：静帧看起来属于同一个系统，复杂画面也能由可编辑组件组装而成。

3. 实现确定性的 Remotion 动效

• 使用 useCurrentFrame()、interpolate()、spring() 和明确的帧范围驱动动画。
• 不要使用 CSS 过渡、CSS 关键帧、未经种子控制的随机值或单独计时的浏览器动画。
• 在适用时，通过 props 和 Zod schemas 参数化取值。
• 优先使用 React、SVG 和 HTML。只有当概念需要时，才使用 Canvas、WebGL 或 Three.js。
• 测量文本、限制范围、验证数值输入，并避免依赖帧的副作用。
• 保持持久对象处于挂载状态，并在各个节拍间改变其状态。
• 在每个 4 至 6 秒的审核窗口中组合 2 至 4 个兼容的动效原子。
• 为每个窗口设置铺垫、动作、可见结果和交接阶段。
• 结束画面需要定格时，确保所有依赖时间的子组件都冻结在同一个显示帧。

门槛：渲染必须确定、可编辑、技术准确，并且在任意帧上都稳定。

4. 保持连续性与因果关系

• 在转场中复用位置、对象身份、缩放、遮罩、方向和音频主题。
• 在引入下一个元素之前，先变换或交接一个有意义的元素。
• 仅在需要展现层级关系或关联时使用镜头移动。
• 避免反复全屏淡入淡出并缩放重置。
• 除非有意重置章节，否则相邻节拍之间至少保留一个视觉不变量。
• 让因果关系清晰可辨：输入发生变化，过程作出响应，输出变得可见，镜头再展示更大的系统。

门槛：静音视频仍能作为一个连续的讲解被理解。

5. 对齐旁白、标签和声音

• 在精确的字幕提示点触发标签、数值、状态和交互反馈。
• 确保旁白的音量明显高于音乐和音效。
• 仅针对可见事件，克制地使用滴答声、冲击声、扫掠声和音调点缀。
• 在动效计划之外，同时创建音频事件映射。
• 让音乐和动效以有意设计的方式收尾，而不是硬切。

6. 审核、渲染并总结经验

• 优先渲染开场钩子、最复杂的机制、公式／数据状态、转场和结尾。
• 检查入场帧、中间帧、信息量最大帧、交接帧和定格帧。
• 审核连续的动效窗口及其重叠部分，而不只是孤立截图。
• 创建覆盖完整时间线的联系表。
• 逐像素比较两个靠后的帧，以验证最终帧定格。
• 检查文本裁切、安全区域、色彩对比度、波形／数据准确性、缺失资源、音频峰值、时长、帧率和编解码器。
• 将审核证据保存在 qc/workflow-evidence.json 中。
• 在 qc/production-learning.json 中记录修复项和可复用组件。

门槛：完整渲染必须通过语义、连续性、因果关系、构图、时序、技术和许可检查。

拒收标准

拒绝不准确的交互、虚构的数据、随意的运动、难以辨认的标签、被简化成扁平图形的流程图、通用幻灯片式重置、旁白／字幕不匹配、未获许可的资源、硬编码的个人路径、非确定性渲染、缺少动效窗口审核、跳过最终帧定格检查，或将带品牌标识的参考副本作为可复用模板。

交付内容

交付最终视频、可编辑的 Remotion 项目、时间线、组件参数、获批的输入资源、使用时的音频分轨、联系表、QC 证据，以及一份简短的可复用组件清单。

附带示例

• assets/showcase/code-motion-promo-30s.mp4：30 秒能力预告片。
• assets/showcase/ac-to-dc-explainer.mp4：科学讲解示例。
• assets/shot-library：可编辑的 Remotion 镜头库及可搜索目录。