Remotion 视频
使用 Remotion 创建动画短格式视频（1080×1920）。六种视频类型，每种都遵循“先研究后动画”的工作流。
为什么选择 Remotion
Remotion 渲染的是代码，而非像素。AI 原生理解代码——更改一个不透明度变量是明确无误的，而决定哪几个像素构成一帧中的“标题”则非常模糊。代码还意味着：分辨率无关的输出、可复用组件、即时预览以及基于 Git 的版本控制。
前置条件
本技能需要 Remotion 最佳实践技能。开始之前，请检查项目中是否已安装 Remotion 技能。如果未安装，请让用户运行：
npx skills add remotion-dev/skills
详情请参阅 Remotion Agent 技能文档。
类型选择
根据用户输入判断视频类型：
| 用户提供的内容 | 视频类型 | 加载的参考文件 |
|---|---|---|
| 要讲解的主题 | 教育解说 | education-explainer.md |
| 产品 URL | 产品演示 + 发布 | product-demo.md |
| Google 商家 / 地图链接 | 客户推荐 / 社会证明 | testimonial.md |
| 讲话人视频文件（9:16） | 头像 + 动画叠加 | avatar-overlays.md |
| CSV 或数据文件 | 数据可视化仪表板 | data-viz.md |
| 频道/品牌/社交 URL | 下部三分之一 / 叠加 | lower-thirds.md |
请仅加载对应的类型参考文件以及 defaults.md（用于共享配置：安全区域、字体、动画规则、视觉风格）。
附加参考文件（按需加载）
以下文件并非每个视频都需要。仅在需要时才加载：
- integrations.md — 当用户需要 Playwright（网页抓取）、Lottie 动画、3D 资源、配音或 AI 生成图像时加载。某些集成需要 API 密钥——请先征得用户同意。
- advanced-patterns.md — 当用户希望添加时间滑块、每个合成的控制项、多视频批量生成、透明渲染、自定义转场或基于 Git 的保存工作流时加载。
通用工作流
所有类型都遵循相同的两步模式：
步骤 1：调研 / 抓取 / 分析
根据视频类型收集信息（调研主题、抓取网页、抓取评论、转录视频或分析数据）。展示发现结果并提出分镜大纲。在编写代码之前等待用户批准。
步骤 2：设计与动画化
获得批准后，将所有场景构建为 Remotion React 组件。遵循 defaults.md 中的动画规则：
- 弹簧入场（
damping: 200），无线性运动 - 相关元素间隔 8-12 帧
- 场景之间使用
TransitionSeries配合 12 帧淡入淡出过渡 - 使用 SVG
stroke-dashoffset实现图表/流程图的绘制效果 - 使用
interpolate()结合tabular-nums实现计数动画 - 在庆祝/结尾时刻使用粒子效果
步骤 3：打磨（可选）
视频播放正确后，主动提供添加控制项：
- 时间滑块 — 参考 advanced-patterns.md 为合成添加实时控制
- 集成 — 参考 integrations.md 添加 Lottie 动画、3D 效果、配音等
预览
构建完成后，启动 Remotion Studio：
npx remotion studio
设计原则
- 每个场景需要清晰的视觉隐喻——图表、流程图、图标、分步动画
- 避免文字堆砌——信息密集、动画优美、节奏明快
- 风格类似 Kurzgesagt 与 Fireship 的结合：用直观的视觉方式呈现复杂概念
- 默认所有图形构建为 SVG 组件；Lottie 和 3D 可通过 integrations.md 使用
- 尊重安全区域（参见 defaults.md）——重要内容不要靠近边缘
致谢
基于 Sabrina Ramonov 的视频提示和 Remotion AI 视频编辑教程 的制作经验。通过可配置的默认值和渐进式披露适配为代理技能。