remotion-video

使用 Remotion 框架以编程方式创建视频。Remotion 让你用 React 组件定义视频内容，支持动画、字幕、音乐可视化等。 触发词： - "用代码做视频"、"编程视频"、"React 视频" - "Remotion"、"remotion" - "/remotion-video" 适用场景： - 程序化视频：(1) 批量生成 (2) 数据驱动（如年度总结）(3) 音乐可视化 (4) 自动字幕 - 教程讲解视频：(5) 技术概念可视化（如 CNN、算法）(6) 分层递进讲解 (7) AI 配音教程 - 3D 视频：(8) 产品展示/模型动画 (9) 卡通角色讲解 (10) 3D 数据可

By wshuyi · 997 installs

npx skills add wshuyi/remotion-video-skill --skill remotion-video

Source repository · Upstream listing

Remotion Video 用 React 以编程方式创建 MP4 视频的框架。 核心概念 1. Composition 视频的定义（尺寸、帧率、时长） 2. useCurrentFrame() 获取当前帧号，驱动动画 3. interpolate() 将帧号映射到任意值（位置、透明度等） 4. spring() 物理动画效果 5. <Sequence 时间轴上排列组件 快速开始 创建新项目 选择模板后： 项目结构 基础组件示例 最小视频组件 注册 Composition 动画技巧 interpolate 值映射 spring 物理动画 Sequence 时间编排 AI 语音解说集成 为视频添加 AI 语音解说，实现音视频同步。支持两种方案： 方案 优点 缺点 硬件要求 推荐度 MiniMax TTS 云端克隆、速度极快（<3秒）、音质优秀 按字符计费 无 ⭐⭐⭐ 首选 Edge TTS 零配置、免费 固定音色、无法自定义 无 ⭐⭐ 方案选择流程 方案一：MiniMax TTS（推荐） 云端 API 方案，无需本地 GPU，生成速度极快，音色克隆效果优秀。 配置 1. 注册 https://www.minimax.io （国际版）或 https://platform.minimaxi.com （国内版） 2. 获取 API Key 3. 在 MiniMax Audio 上传音频克隆音色，获取 voice id API 差异 版本 API 域名 说明 国际版 api.minimax.io 推荐，稳定 国内版 api.minimaxi.com 需国内账号 ⚠️ 常见错误 ： api.minimax.chat 是 错误的域名 ，会返回 "invalid api key"。请确认使用上表中的正确域名。 生成脚本 使用 scripts/generate audio minimax.py 生成音频，支持： 断点续作 ：已存在的音频文件自动跳过 实时进度 ：显示生成进度，避免茫然等待 自动更新配置 ：生成完成后自动更新 Remotion 的场景配置 价格参考（2025年） 模型 价格 speech 02 hd ¥0.1/千字符 speech 02 turbo ¥0.05/千字符 ⚠️ MiniMax TTS 踩坑经验 问题 原因 解决方案 invalid api key 使用了错误的 API 域名 国际版用 api.minimax.io ，国内版用 api.minimaxi.com config.ts 语法错误 Syntax error "n" Python 脚本在 f string 中用 ",\\n".join() 产生了字面量 \n 而非真正换行 见下方「Python 生成 TypeScript 注意事项」 长时间无进度显示 后台执行命令看不到输出 前台执行脚本，或用 tail f 实时查看日志 Python 生成 TypeScript 注意事项 ❌ 错误写法 ：在 f string 中使用 \n 会产生字面量字符 ✅ 正确写法 ：分开处理字符串拼接 方案二：Edge TTS 无需特殊硬件，完全免费，适合不需要克隆音色的场景。 安装 推荐语音 语音 ID 名称 风格 zh CN YunyangNeural 云扬 专业播音腔（推荐） zh CN XiaoxiaoNeural 晓晓 温暖自然 zh CN YunxiNeural 云希 阳光少年 生成脚本 使用 scripts/generate audio edge.py 生成音频： Remotion 音频同步 教程类视频架构（场景驱动） 教程、讲解类视频的核心架构： 音频驱动场景切换 。 架构概览 关键思想： 1. 音频决定时长 ：每个场景的持续时间由音频长度决定 2. 场景即章节 ：一个概念 = 一个场景 = 一段音频 3. 配置即真理 ： audioConfig.ts 是音画同步的单一数据源 audioConfig.ts 模板 参见 templates/audioConfig.ts ，包含： SceneConfig 接口定义 SCENES 数组 getSceneStart() 计算函数 TOTAL FRAMES 和 FPS 常量 场景切换 Hook 主场景组件模式 Root.tsx 使用动态帧数 ⚠️ 教程视频踩坑经验 问题 原因 解决方案 场景切换生硬 直接切换无过渡 用 spring/interpolate 添加入场动画 3D 内容与音频不同步 硬编码帧数 所有时长从 audioConfig 读取 渲染时 WebGL 崩溃 多个 ThreeCanvas 同时存在 用 sceneIndex 条件渲染，同时只有一个 3D 场景 视频太简略 只有一个大场景 一个概念 = 一个场景组件 ，分层讲解 场景组件设计原则 1. 单一职责 ：每个场景组件只负责一个概念 2. 独立动画 ：每个场景有自己的 useCurrentFrame()，动画从 0 开始 3. 延迟出现 ：用 delay 参数控制元素依次出现 4. 相机适配 ：不同场景可能需要不同相机位置 相机控制器模式 ⚠️ 不要用 position += (target position) factor 这种写法 ，永远无法精确收敛，会导致画面持续抖动。详见「🚨 3D 场景常见陷阱 陷阱1」。 常用功能 添加视频/音频 添加图片 参数化视频（动态数据） 渲染输出 CLI 渲染 常用渲染参数 参数 说明 codec h264, h265, vp8, vp9, gif, mp3, wav 等 crf 质量 (0 51，越小越好，默认18) props JSON 格式传入 props scale 缩放因子 concurrency 并行渲染数 高级功能 字幕 (@remotion/captions) 播放器嵌入 Web 应用 AWS Lambda 渲染 3D 视频制作（@remotion/three） 使用 React Three Fiber 在 Remotion 中创建 3D 动画视频。 适用场景 场景 说明 示例 产品展示 3D 模型旋转、拆解动画 手机产品宣传片 角色动画 卡通角色讲解、故事叙述 育儿科普视频 数据可视化 3D 图表、空间数据 地理信息、建筑展示 Logo 动画 品牌 3D Logo 入场 片头片尾 安装 官方模板 （推荐新手）： 基础示例 加载 GLTF 模型 安装 drei （React Three Fiber 工具库）： 视频作为 3D 纹理 渲染时使用 useOffthreadVideoTexture() 确保帧精确： 3D 角色组合技巧 用基础几何体组合角色（无需专业建模）： ⚠️ 踩坑经验 WebGL 上下文溢出 问题 ：多个 3D 场景同时渲染时报错 Error creating WebGL context 原因 ：浏览器限制 WebGL 上下文数量（通常 8 16 个） 解决方案 ： 1. 渲染配置 ：使用 angle OpenGL 引擎 CLI 渲染时： 2. 懒加载场景 ：只渲染当前帧附近的 3D 内容 服务端渲染配置 服务端渲染（SSR）必须配置 gl 选项： Sequence 内的 useCurrentFrame <Sequence 内部的 useCurrentFrame() 返回的是 相对于 Sequence 开始的帧号 ，不是全局帧号。 进阶资源 资源 用途 链接 Mixamo 免费骨骼动画库 https://www.mixamo.com Sketchfab 免费/付费 3D 模型 https://sketchfab.com Ready Player Me 虚拟人物生成 https://readyplayer.me Spline 在线 3D 设计工具 https://spline.design gltfjsx GLTF 转 React 组件 npx gltfjsx model.glb 进阶方向 1. Blender → GLTF ：用 Blender 建模，导出 GLTF 格式，用 useGLTF 加载 2. Mixamo 动画 ：下载 FBX 动画，转换为 GLTF，用 useAnimations 播放 3. Spline 设计 ：在 Spline 设计 3D 场景，用 @splinetool/r3f spline 导入 3Blue1Brown 风格指南（教程类视频） 针对教程、讲解类视频，借鉴 3Blue1Brown 的可视化设计原则。 核心理念 原则 说明 示例 Why → What 先提问为什么，再展示是什么 "如何识别手写数字？" → 展示神经网络 逐步构建 元素一个个出现，不要整体淡入 神经元依次点亮，而非同时出现 颜色有语义 颜色传达信息，不是装饰 蓝=正、红=负、黄=高亮 数值具象化 显示具体数字让抽象概念落地 像素值 0.7、激活值 0.92 2D 优先 清晰优先于炫酷，必要时才用 3D 网络结构用 2D，空间数据用 3D 配色方案 2D/3D 混合策略 内容类型 推荐维度 原因 网络结构图 2D 层次清晰，易于标注 数据流向 2D + 动画箭头 强调顺序和因果 卷积操作 2D 俯视图 网格对齐，数值可见 特征图堆叠 2.5D（透视） 展示深度/通道数 3D 物体识别 3D 内容本身是 3D 2D 模式实现 ：使用正交相机 + 扁平几何体 逐步构建动画 核心 ：用 delay 参数控制元素依次出现 数值标签组件 高亮焦点组件 脚本撰写指南（教程类） ❌ 宣布式（避免） ： ✅ 探索式（推荐） ： 脚本结构模板 ： ⚠️ 常见误区 误区 问题 改进 3D 炫技 旋转、透视分散注意力 用最简单的视角表达 颜色随意 红绿蓝只是装饰 建立颜色 含义映射 整体出现 观众不知道看哪里 逐个元素 + 高亮引导 只说 What 观众不理解设计动机 先问 Why 再展示 What 信息过载 一个场景塞太多概念 一个场景一个概念 过程动画模式（Process Animation） 核心理念 ：不只展示「是什么」，更要展示「怎么算」。让观众亲眼看到数据如何流动、计算如何发生。 适用场景 场景 说明 示例 算法可视化 展示每一步操作 排序、搜索、图遍历 数学公式推导 逐项展开计算 矩阵乘法、卷积运算 数据处理流程 输入→变换→输出 CNN 前向传播、数据清洗 决策过程 比较、筛选、最终选择 池化取最大值、softmax 动画模式分类 过程动画组件库 1. 计算步骤展示（StepByStep） 2. 数值飞入动画（ValueFlyIn） 3. 区域高亮比较（CompareHighlight） 4. 滑动窗口（SlidingWindow） 脚本撰写指南（过程动画版） 关键转变 ：脚本需要配合动画节奏，给动画「留白时间」。 ❌ 传统脚本（信息密集） ： ✅ 过程动画脚本（留白配合） ： 时间分配建议 详细程度 首次完整展示 重复加速 适用场景 极详细 3 4 秒/步 0.5 秒/步 核心概念首次出现 中等 2 秒/步 0.3 秒/步 辅助概念 快速 1 秒/步 闪过 已解释过的重复 示例：卷积场景时间分配 ⚠️ 过程动画踩坑经验 问题 原因 解决方案 动画太快看不清 时间分配不足 增加关键步骤的帧数 解说与动画不同步 脚本没有留白 重写脚本，加入停顿标记 信息过载 一次展示太多 分阶段：先结构，再过程 重复内容无聊 每次都详细展示 首次详细 + 后续加速 数值太小看不见 3D 文字渲染问题 用 2D HTML overlay 相机持续抖动 插值永不收敛 见下方「相机控制陷阱」 图像旋转90度 行列坐标映射反了 见下方「网格坐标陷阱」 进度显示好几千% progress 变量未 clamp Math.min(1, (frame start) / duration) 特征图只有色块无数值 组件缺少数值显示功能 添加 values + showValues 参数 进度变量必须 clamp 特征图显示计算结果 🚨 3D 场景常见陷阱 陷阱 1：相机持续抖动 症状 ：画面一直微微放大 缩小抖动 错误写法 ： 正确写法 ： 陷阱 2：网格图像旋转90度 症状 ：本应显示为正常方向的图像（如数字7）被旋转了90度 根因 ：图像处理中 row 对应 y 轴（从上到下）， col 对应 x 轴（从左到右）， 但代码里把行索引映射到了 x 坐标，列索引映射到了 y 坐标。 错误写法 ： 正确写法 ： 记忆口诀 ： 图像坐标： image[row][col] = image[y][x] （行是y，列是x） 3D 坐标：x 向右，y 向上 翻转 row：图像 row=0 在顶部，3D y=max 在顶部 工作流最佳实践 推荐的 npm scripts 配置 实时进度显示 音频生成和视频渲染都可能耗时较长， 务必使用前台执行 以便看到进度： render.sh 示例 ： 断点续作设计原则 长时间任务（如批量生成音频）应支持断点续作： 1. 检查已存在文件 ：跳过已完成的项目 2. 原子操作 ：单个文件生成失败不影响已完成的 3. 进度保存 ：失败时保留已完成的部分 4. 幂等执行 ：重复运行产生相同结果 调试技巧 1. Studio 热重载 ： npm run dev 实时预览 2. 检查帧 ：Studio 中拖动时间轴逐帧检查 3. 性能 ：避免在组件内做重计算，用 useMemo 4. 静态文件 ：放在 public/ 目录，用 staticFile() 引用 常见问题 Q: 视频渲染很慢？ 使用 concurrency 增加并行数 降低分辨率测试： scale=0.5 考虑 AWS Lambda 分布式渲染 Q: 字体不显示？ 使用 @remotion/google fonts 或本地加载 确保字体在渲染前已加载 Q: 视频素材不播放？ 检查视频编码格式（推荐 H.264） 使用 <OffthreadVideo 替代 <Video 提升性能 参考资源 官方文档：https://remotion.dev/docs 模板库：https://remotion.dev/templates GitHub：https://github.com/remotion dev/remotion