Remotion Best Practices

Remotion Best Practices 是什么

这是 Remotion 官方技能仓库中的总路由 Skill，用于让代理按任务加载正确的专项规则，而不是把所有视频知识塞进一次提示。它覆盖项目创建、React 标记、媒体处理、字幕、地图、交互结构、渲染、Studio 预览、SaaS 集成、文档检索和版本升级。

适用场景与不适用场景

适合创建或维护基于 React 的 Remotion 视频、批量渲染、字幕动画和媒体编排。不适合普通剪辑软件操作，也不是现成模板库；如果只需要导出一个既有项目，应直接进入 render 子技能。它强调保留用户并发修改，适合共享工作区。

核心能力与工作机制

入口根据意图选择子技能；标记规范要求动画由 useCurrentFrame 与 interpolate 驱动，避免 CSS transition、CSS animation 和 Tailwind 动画，因为它们不能保证逐帧确定性。媒体应使用 Remotion 组件和 public/staticFile 管理，视频、音频、图片、字体、转场与 3D 都有独立规则。

实际工作流与产物

先识别创建、编辑、预览或渲染任务，再加载对应子技能；实现时把时间换算为帧，使用组件属性控制变换和裁剪。预览可启动 Studio，验收关键帧；最终渲染前检查 composition、尺寸、帧率、持续时间和资源可访问性。新增 Remotion 包应使用兼容当前版本的安装命令。

安装、依赖与权限

需要 Node.js、React、Remotion 项目及相应 npm 依赖。视频编码、字体或媒体格式可能依赖浏览器、FFmpeg 和系统能力。上游主 Skill 版本为 4.0.526，但仓库未在所核验位置声明许可证，因此导航条目不把它标成开源许可。

限制、风险与使用建议

普通网页动画在实时浏览器中看似正常，却可能在离线渲染时错帧，这是最常见风险。外部媒体会造成网络不确定性，应冻结为本地资产并确认授权。升级 Remotion 或插件前要检查版本兼容；遇到工作区中非本任务产生的改动不能覆盖。

上手建议

从明确输出规格开始：画布尺寸、帧率、时长、音轨、字幕格式和交付编码。先在少数关键帧验证布局，再看完整预览，最后才跑高成本渲染。把复杂场景拆成可复用组件，并确保任意帧都能从 frame 与 props 重现。

来源、版本与许可

依据 remotion-dev/skills 固定提交的总路由与完整 Markup 参考整理。核验时未发现仓库级许可证声明，故许可证状态记为未声明。

常见问题

1. 为什么不能直接用 CSS transition？

Remotion 必须在任意帧得到确定结果，CSS transition、CSS animation 和 Tailwind 动画依赖浏览器经过时间，离线跳帧渲染时可能不一致。应由 useCurrentFrame 读取帧号，再用 interpolate 计算样式。

2. 入口 Skill 会完成所有视频工作吗？

它主要负责路由：根据任务加载 create、markup、captions、multimedia、render 等更具体的规则。实际实现仍依赖对应子技能和项目环境，不能只读总入口就猜测所有命令。

3. 媒体文件应放在哪里？

通常放在 public 目录并通过 staticFile 引用，再用 Remotion 的 Video、Audio、CanvasImage 或 AnimatedImage 等组件承载。这样能减少远程网络波动，并让预览与最终渲染使用同一资源路径。

4. 如何裁剪视频或音频片段？

使用序列的 from、durationInFrames 以及媒体组件的 trimBefore 等帧级参数，而不是依赖播放器实时拖动。所有时间应基于 composition 的 fps 换算，避免秒数和帧数混用。

5. 如何预览而不自动打开浏览器？

可启动 Remotion Studio 并使用不自动打开选项，再由用户访问本地地址。自动化环境中还应选择关键帧截图或单帧渲染，确认字体、媒体和布局没有在无头浏览器中变化。

6. 安装 Remotion 扩展包要注意什么？

应使用 Remotion 提供的添加命令，让扩展版本与当前核心包匹配。直接安装最新版本可能造成依赖错位；升级前先记录现有版本并运行预览与渲染回归。

7. 为什么要保留用户的并发修改？

共享仓库里可能有用户或其他任务同时改动。规则要求遇到意外变化先调查，不能用覆盖文件的方式恢复自己预期的状态；视频工程中的素材、时间线和配置同样属于用户工作。

8. 许可证是什么？

本次核验没有在仓库许可证接口和所读文件中找到明确声明，因此只能标记为未声明，不能自行推断为 MIT。使用代码或素材前，应再次检查上游最新许可及各媒体资产授权。