Remotion视频开发规范

技能简介

本技能汇总了Remotion框架的开发规范与常用模式，覆盖从基础动画到复杂音视频处理的完整工作流。内容以独立规则文件形式组织，便于按需查阅具体场景的实现方案。

能做什么

• 掌握Remotion核心概念：Composition、Sequence、帧时序控制
• 实现3D内容集成（Three.js/React Three Fiber）、图表可视化、Lottie动画嵌入
• 处理多媒体资源：图片、视频、音频、GIF、字体的导入与动态调整
• 完成字幕全流程：SRT导入、语音转写、逐词高亮、TikTok风格分页
• 应用高级技巧：DOM测量、文本自适应、转场动画、TailwindCSS集成

使用说明

本技能为知识参考型，无需安装步骤。使用时直接引用对应规则文件：

1. 根据开发场景定位规则文件（如动画需求查阅rules/animations.md）
2. 阅读文件内的代码示例与解释说明
3. 将推荐模式应用到当前Remotion项目

典型引用路径示例：skills/am-will/remotion-best-practices/rules/audio.md

输入与输出

见下方输入与输出表格。

风险提示

• 部分功能依赖Mediabunny等外部库，需确认浏览器解码兼容性
• 动态元数据计算可能影响渲染性能，复杂场景建议预生成
• 音视频同步处理时注意帧率与采样率匹配
• 3D渲染对硬件要求较高，需测试目标设备的WebGL支持

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/am-will/remotion-best-practices/SKILL.md
来源类型：GitHub仓库