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。当可复用组件与语义任务匹配时，将库复制到目标项目中；不要就地编辑已安装的技能。 - 在使用的API不熟悉时，参考已安装的Remotion文档或最佳实践技能。
建立生产合同
- 确定已批准的脚本或解释、旁白状态、字幕权限、宽高比、帧率、时长、品牌体系、技术事实和交付格式。
- 当有旁白时，将人工验证的字幕作为时间权威。如果没有旁白，创建明确的节拍时间线，并设计视频在静音状态下仍能理解。
- 仅使用用户提供、许可、公共领域或明确可重新分发的资产。
- 从不虚构产品行为、数值数据、科学关系或交互结果。
- 优先使用参数化视觉系统，而非一次性硬编码场景。
执行工作流
1. 将语言转化为视觉状态
- 将解释拆分为子句级别的语义节拍。
- 为每个节拍记录：
- 旁白或屏幕文本；
- 叙事目的；
- 输入状态；
- 主导动词；
- 可见变换；
- 输出状态；
- 观看者焦点；
- 传递到下一个节拍。
- 将名词、动作、数字、关系和状态变化编译为独立的视觉演员。
- 识别跨越节拍持续存在的持久对象。
- 选择最简单的准确表示形式：UI、流程图、图表、波形、公式、图表、空间模型或3D。
- 将计划写入
src/data/choreography-plan.json。
关卡：每个陈述都有可见的推理工作、执行者、结果和传递。
2. 锁定视觉系统
- 定义网格、安全区域、间距、排版、颜色语义、深度、相机和运动曲线。
- 写一句话的概念角度描述视觉世界。
- 为钩子、最复杂机制和结尾设计代表性静态帧。
- 在设计入场前先构建最大信息量的主角帧。
- 创建持久对象注册表和世界坐标计划。
- 将复杂对象分解为有意义的运动部件，而非给平面截图添加动画。
- 在整个过程中保持相同概念在视觉上一致。
关卡：静态帧读取为一个系统，复杂帧可由可编辑组件组装。
3. 实现确定性的Remotion运动
- 使用
useCurrentFrame()、interpolate()、spring()和显式的帧范围驱动动画。 - 不要使用CSS过渡、CSS关键帧、无种子确定性的随机值或独立计时的浏览器动画。
- 在有用时通过props和Zod模式保持值参数化。
- 优先使用React、SVG和HTML。仅在概念需要时使用Canvas、WebGL或Three.js。
- 测量文本、限制范围、验证数值输入，并避免帧相关的副作用。
- 保持持久对象挂载，并跨节拍改变其状态。
- 在每个四到六秒的检查窗口中组合两到四个兼容的运动原子。
- 为每个窗口设置设置、动作、可见结果和传递阶段。
- 当结尾需要保持时，从同一显示帧冻结所有时间依赖的子元素。
关卡：渲染是确定性的、可编辑的、技术准确的，并且在任意帧上稳定。
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镜头库和可搜索目录。