remotion

Remotion 入口

Remotion 使用 React 渲染视频——合成是一个 React 组件，它接收 frame 和 fps 作为上下文，根据这些值确定性地计算布局和样式，再由无头浏览器逐帧捕获。完整的创作规范位于 /remotion-core；编写合成代码前请先阅读。

1. 从项目状态开始

应用第一个匹配的行；不要评估状态表中更靠后的行：

状态	操作
明确要求将现有 HyperFrames HTML 迁移到 Remotion	阅读 references/routes/hyperframes-to-remotion.md，然后直接转到该工作流。跳过意图层。
对现有 Remotion 项目执行特定操作：检查、诊断、验证、预览、渲染或部署	仅执行该操作。跳过意图和工作流路由；加载 /remotion-cli 及所需的领域技能。
对现有项目进行特定编辑	执行编辑。不要运行意图层。
存在 BRIEF.md	阅读 workflow 和 flow。执行该工作流。不要询问简报相关问题。
没有简报，但存在 remotion.config.ts 或 src/Root.tsx	根据项目文件继续工作。根据现有合成推断所属工作流。如果无法唯一确定，只问一个仅用于路由的问题；不要进行意图访谈。
全新创建	运行意图层——references/intent-interview.md——然后根据第 2 节的表格进行一次路由。

如果全新创建请求没有说明主题或输入，请在路由前询问视频的主题。提出任何问题前先检查偏好（references/intent-interview.md，步骤 1）。figma.com 输入会改变信息收集流程，而不会改变路由。

保持项目使用最新 Remotion 版本

脚手架生成的项目会在 package.json 中锁定 remotion@<version>。继续处理项目时，在首次执行会影响渲染的命令之前检查一次：

npx remotion upgrade --dry-run

该检查为只读操作，并会报告可用的升级。当项目版本落后时，运行 npx remotion upgrade 应用升级，然后运行 npx remotion studio，确认合成仍能加载。在运行摘要中注明旧版本和新版本。如果升级后任何合成出现问题，恢复 package.json，并继续使用锁定的版本。

2. 路由全新创建

使用第一个匹配的行。匹配所请求的交付内容，而不是顺带提及的单词或文件类型。

优先级	请求	工作流
1	明确要求迁移现有的 HyperFrames HTML 合成	/hyperframes-to-remotion
2	创作演示文稿、路演演示文稿或逐页幻灯片	/remotion-slideshow
3	为现有的对话视频添加字幕	/remotion-captions
4	为现有视频添加设计过的图形叠加层，但不修改视频本身	/remotion-overlay
5	根据音乐曲目制作节拍同步视频，不含旁白	/remotion-music-video
6	创作时长不到 10 s、无旁白且以动效为主的短片	/remotion-motion-graphics
7	可视化数据——图表、计数器、图形及动态信息图	/remotion-data-viz
8	宣传或展示网站、产品或应用	/remotion-product-launch
9	用原创视觉素材讲解主题、概念或文章	/remotion-explainer
10	其他任何自定义视频或合成	/remotion-general

确定最终路由前，阅读 references/routes/<workflow>.md。如果候选工作流不符合其规范，继续路由。只阅读匹配的路由文件。

解决常见歧义

• 无旁白、且动态效果本身就是表达内容的短动画标题、Logo 演绎、数据强调动画或独立的下三分之一字幕，应归入 /remotion-motion-graphics。
• 为现有素材添加字幕，应归入 /remotion-captions；添加设计精美的信息卡片，则应归入 /remotion-overlay。
• 只有当节拍网格主导整个作品时，才应根据音乐文件选择 /remotion-music-video。
• 当数据是主要信息时，数据图表应归入 /remotion-data-viz。
• 专业叙事工作流支持最长约 3 分钟的作品；更长的作品应归入 /remotion-general。

3. 路由一次，然后继续

对于全新创作，意图层（references/intent-interview.md）会在结束时写入 BRIEF.md。工作流仅读取简报作为路由依据；之后不会再打开此技能或进行访谈。

4. 搭建项目框架

# Interactive scaffold (recommended for first-time)
npx create-video@latest

# Non-interactive blank scaffold
npx create-video@latest --blank ./

# Start Studio dev server
npm run dev

继续创作前，请阅读匹配工作流的 SKILL.md。

5. 按需加载领域技能

需求	技能
合成结构、useCurrentFrame、interpolate、spring、Sequence、时序约定	/remotion-core
动效规则、动画模式、弹簧物理、插值方案、缓动	/remotion-animation
spring、interpolate、时序曲线、关键帧错开模式	/remotion-keyframes
设计规范、调色板、字体排版、旁白、节拍规划	/remotion-creative
图片、音频、视频素材、字幕、调色、TTS	/remotion-media
CLI：render、studio、lambda、bundle、upgrade、still	/remotion-cli
数据图表、D3、recharts、自定义 SVG 动画	/remotion-data-viz

领域技能不会负责端到端交付。只加载当前工作流所需的技能。