remotion

适用场景

在以下情况下使用此技能：

• 从零开始创建 Remotion 视频
• 为内容素材生成多个视频简介方案
• 修改现有的 Remotion 合成
• 调试 Remotion 动画或渲染问题
• 使用任何 Remotion 专用 API 或组件
• 在视频中展示真实网站、工具或产品 UI（使用 rules/site-ui-from-code.md）

视频创作流程

创建新的 Remotion 视频时，请遵循以下 8 个步骤。第 2 步会根据简介和面向陌生受众的优化，从目录中选出 3-5 个概念。第 4 步和第 5 步是审批关卡。两步均获批准前，不要编写代码。

如需查看包含模板和决策矩阵的完整流程文档，请阅读 references/video-creation-process.md。

步骤 0：品牌识别

在进行任何创意工作之前，先确定品牌。询问用户：“这段视频是为哪个品牌制作的？”

如果品牌是 MIA，使用下方的 MIA 主题。无需再询问其他品牌相关问题。

如果品牌未列出，请用户提供品牌网站 URL 或品牌指南。提取以下信息：背景颜色、主强调色、次强调色、文本颜色、字体系列和主题（浅色/深色）。如果没有品牌指南，至少询问主色、背景颜色和字体偏好。

步骤 1：创意简介

在进行任何创意工作之前，收集并确定以下内容：

Purpose: [Why this video exists]
Audience: [Who is watching]
Core message: [One sentence]
Content type: [blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
Channels: [Where it will be distributed]
CTA: [What the viewer should do next]
Source assets: [Files, components, or URLs to reference]
Tone: [Descriptive words for the feel]
Brand: [Brand name from Step 0]

步骤 2：概念选择（建议选择 3-5 个概念）

确定创意简介后，分析简介，为此特定用例选出最合适的视频概念。不要提供一组固定的方案。请从 references/concept-catalog.md 中的概念目录选择。

目录包含 18 个主要概念、8 个视觉风格修饰项和 5 种面向陌生受众的吸引模式。 生成建议前请先阅读目录。

选择流程

1. 根据简介为概念评分。 对目录中的每个概念进行评估：

   • 概念的“最适用场景”是否与内容类型相符？
   • 这种结构能否在 15-30 秒内传达核心信息？
   • 该概念是否适用于目标时长和尺寸？
   • 简介是否提供了此概念所需的数据/视觉素材？

2. 应用陌生受众筛选条件。 对每个已评分的概念进行评估：

   • 完全不了解背景的观众能否在前 3 秒内理解其价值？
   • 该概念能否在开场节拍中创造让人停下滚动的视觉动态效果？
   • 该概念是否无需观众预先了解品牌、产品或问题领域？
   • 如果概念本身会优先呈现结果或数据点（数字计数器、动画信息图、前后对比），那么相较于需要铺垫时间的叙事型概念，它对陌生受众天然更有吸引力。

3. 选择一种吸引模式。 为每个推荐概念搭配目录中的一种吸引模式：

   • 数据类内容 → 结果优先
   • 产品发布和工具 → 打破常规
   • 思想领导力和教育 → 好奇心缺口
   • 建立信任的内容 → 社会认同吸引
   • 竞争和定价类内容 → 损失厌恶

4. 提供 3-5 个推荐概念，并为每个概念撰写一页简介。每份简介包括：

   • 概念名称（取自目录）和一句话描述
   • 说明其适合此简介的原因（1-2 句话，提及具体内容和受众）
   • 建议的吸引模式和开场节拍描述
   • 分镜表（根据目录模板，并针对本内容定制）
   • 如有助于强化概念，可选用视觉风格修饰项

5. 为建议排序。 标出首选方案并说明原因。

6. 由用户选择一个概念（或结合两个概念）。 进入步骤 3 前，先确定所选概念。

面向冷受众的优化规则

这些规则适用于所有创意推荐；若与内容类型默认设置冲突，则以这些规则为准：

• 默认假设：冷受众。 除非需求明确说明受众是暖受众（再营销、现有用户、新闻简报订阅者），否则假设受众对品牌毫无认知。
• 面向冷受众的首个场景要求：
  1. 视觉上的模式打断（动态、色彩对比或尺度变化）
  2. 文案点明观众能够识别的问题或结果，且无需了解品牌
  3. 场景 1 不展示品牌标识（品牌卡片留到场景 2 或之后）
• 面向冷受众的钩子模式限制： 使用模式打断、结果优先或损失规避。避免使用悬念式钩子，除非相关数据或主张无需品牌背景也能引起广泛共鸣。
• 创意灵活性： 如果目录中没有适合冷受众需求的创意，可以创建混合创意或改编现有创意。目录是起始素材库，而非限制。

第 3 步：格式与规格

根据需求和选定的变体，使用格式决策矩阵确定规格：

渠道	尺寸	时长
LinkedIn/Instagram 信息流	1080x1080	15-30s
网站/演示文稿	1920x1080	15-60s
Reels/TikTok/Stories	1080x1920	15-60s
电子邮件（GIF）	600x600 或 800x450	5-10s

默认帧率：30。仅在流畅动态至关重要时使用 60。

Dimensions: [width]x[height]
Duration: [X] seconds ([X * fps] frames)
FPS: 30
Composition ID: [PascalCase]
Loop: [yes/no]
Output formats: [mp4, gif, webm]
Selected concept: [concept-id from catalog, or hybrid]

第 4 步：场景拆解（审批关卡）

编写代码前定义每个场景。以选定变体的场景模板为起始结构，再根据具体内容进行定制。

提交场景表以供审批。

场景表格式：

#	名称	时间	文案	动画	用途
1	钩子	0-3s	准确文本	动态描述	存在目的

时长指南：

时长	场景数量	每个场景平均时长
10s	3-4	2.5-3.3s
15s	4-6	2.5-3.75s
30s	8-12	2.5-3.75s
60s	12-20	3-5s

继续之前，先敲定文案、时长和叙事结构。

第 5 步：视觉设计（审批关卡）

实施前敲定：

配色方案（至少包含以下角色）：

• 背景、主强调色、次强调色
• 主文本、次文本、三级文本
• 边框/分隔线

品牌主题预设（仅适用于 MIA，跳过配色问题）：

品牌	背景	主强调色	次强调色	主文本	弱化文本	字体	主题
MIA	#F7F4FA / #1c1422（深色）	#F1DE71（黄色）	#7184F1（紫色）	#1c1422 / #f7f4fa（深色）	rgba(28,20,34,0.62)	system-ui, -apple-system, Segoe UI	浅色

MIA 强调色板：蓝色 #71C4F1、紫色 #7184F1、粉色 #F171C4、绿色 #71F19E

自定义品牌：颜色取自产品自身界面或品牌素材包，绝不凭空猜测。根据第 0 步提供的品牌网站或指南确定颜色。填写相同角色：背景、主强调色、次强调色、主文本、弱化文本、字体、主题。

排版：字体系列、字重层级、目标分辨率下的字号。

动画风格：弹簧式（弹跳/平滑/利落）、线性或缓动式。选定一种主导风格。

事实来源：如果要匹配现有设计，请注明源文件。

第 6 步：架构决策

Agent 会根据场景复杂度确定方案：

条件	方案
少于 15 个场景	单文件
15 个或更多场景，或包含可复用部分	多文件，并使用 scenes/ 目录
多个场景共享元素	使用带不透明度包络的持久图层

始终使用集中管理的时间常量（const T = { ... }）。

当场景展示真实网站、工具或产品 UI 时，必须使用网站自身的代码构建，不要手工重绘。遵循 rules/site-ui-from-code.md：对于 React 产品，导入其组件；对于普通 HTML 网站，使用 site motion kit 捕获并重建。屏幕上的每个结果都必须是真实输出。

第 7 步：实现

根据已确定的决策编写代码。所有动画都必须遵循 Remotion 规则（参见下方的技术参考）。

第 8 步：输出文档

生成一份参考文档，涵盖：规格、选定的变体、预览／渲染命令、场景分解、调色板、时间配置、架构说明和迭代指南。

---

技术参考

有关 API 详情和代码示例，请阅读各规则文件。

核心动画和时间控制

• rules/animations.md - 动画基础。所有动效都通过 useCurrentFrame() 实现。禁止使用 CSS 过渡
• rules/timing.md - interpolate()、spring()、缓动函数、弹簧配置
• rules/sequencing.md - 使用 <Sequence> 和 <Series> 控制时间、延迟和持续时间
• rules/trimming.md - 修剪开头（负数 from）和结尾（durationInFrames）
• rules/transitions.md - 使用 <TransitionSeries> 实现淡入淡出、滑动、擦除、翻转和时钟擦除

媒体

• rules/assets.md - 使用 staticFile() 加载 public 文件夹中的资源
• rules/videos.md - <Video> 的修剪、音量、速度、循环和音高控制
• rules/audio.md - <Audio> 的修剪、音量、速度和音高控制
• rules/images.md - <Img> 组件（确保加载完成后再渲染）
• rules/gifs.md - 用于 GIF/APNG/AVIF/WebP 的 <AnimatedImage>
• rules/fonts.md - 通过 @remotion/google-fonts 使用 Google Fonts，通过 @remotion/fonts 使用本地字体

文本和字幕

• rules/text-animations.md - 打字机效果、单词高亮模式
• rules/measuring-text.md - measureText()、fitText()、fillTextBox()
• rules/display-captions.md - TikTok 风格字幕、逐词高亮
• rules/import-srt-captions.md - 使用 parseSrt() 解析 .srt 文件
• rules/transcribe-captions.md - Whisper.cpp、Whisper Web、OpenAI API

合成与元数据

• rules/compositions.md - <Composition>、<Still>、<Folder>、defaultProps
• rules/calculate-metadata.md - 动态设置时长、尺寸和 props

高级

• rules/3d.md - 使用 React Three Fiber 的 <ThreeCanvas>
• rules/charts.md - 使用 useCurrentFrame() 动画化 SVG/D3.js 图表
• rules/lottie.md - 搭配 @remotion/lottie 使用的 <Lottie> 组件
• rules/tailwind.md - TailwindCSS（禁止使用 transition-* 或 animate-* 类）
• rules/site-ui-from-code.md - 使用网站自身的 HTML 和 CSS 构建真实的网站和工具 UI，并呈现真实输出（site motion kit）

媒体工具（Mediabunny）

• rules/extract-frames.md - 提取指定时间戳的视频帧
• rules/can-decode.md - 检查视频/音频是否可解码
• rules/get-video-duration.md - 视频时长（秒）
• rules/get-video-dimensions.md - 视频宽度和高度
• rules/get-audio-duration.md - 音频时长（秒）

布局

• rules/measuring-dom-nodes.md - 使用 useCurrentScale() 精确测量

---

参考资料

• references/concept-catalog.md - 概念目录，包含 18 个主要概念、8 种视觉风格修饰、5 种面向陌生受众的吸引模式、选择标准和内容类型适配矩阵
• references/video-creation-process.md - 完整流程文档，包含模板、决策矩阵和详细指导

---

硬性规则

这些规则适用于所有 Remotion 代码。违反规则会导致输出错误。

1. 所有动画均由 useCurrentFrame() 驱动。不得使用 CSS 过渡、Tailwind 的 animate-* 或 transition-* 类，也不得使用 React Three Fiber 的 useFrame()
2. 使用 Remotion 组件（<Img>、<Video>、<Audio>），而非原生 HTML 元素
3. public/ 文件夹中的所有素材都使用 staticFile()
4. 时间以秒为单位：乘以 useVideoConfig() 返回的 fps，换算为帧数
5. 不得使用第三方动画库驱动动态效果（禁用其动画，改用 useCurrentFrame()）
6. 每个概念都必须能自我说明。即使观众毫无背景信息，只是刷到视频，也应仅凭视频理解其价值。任何场景都不得依赖外部知识。文案必须能够独立传达完整信息。除非需求说明另有要求，否则始终假设受众不了解背景。

---

制作规则

这些规则适用于任何配音视频或匹配参考视频的视频。如果提供了完整的发布视频和录制剪辑工作流，请遵循该工作流。

1. 先制作配音轨。 在构建场景前录制或生成配音：使用 Google Cloud Text-to-Speech Studio 的语音、付费版 ElevenLabs，或由演示者录制。场景时间应跟随配音，而不是反过来。
2. 使用 Whisper 生成逐词定时字幕。 将配音轨转录为 words.json（参见 rules/transcribe-captions.md 和 rules/display-captions.md），并为每个字幕词逐一标注时间。字幕样式应照搬参考视频。始终遵循以下安全规则：字幕不得覆盖人脸，且 9:16 画面的底部五分之一须留空。
3. 音乐音量低于配音。 音乐音量应明显低于配音，并在配音响起时进一步降低。
4. 在剪切点加入音效。 每个硬切和关键的屏幕变化都要配上音效。
5. 除非参考视频使用淡入淡出过渡，否则不得使用。 匹配参考视频的剪切和过渡风格。
6. 最终混音响度约为 -16 LUFS。
7. 颜色取自产品界面或品牌套件。 这是硬性规则。不得自行编造配色方案。
8. 风格模板模式。 对参考视频进行一次测量（剪切节奏、字幕外观、动态效果、声音位置），并将其记录为风格规范。将该规范制作成可复用的合成，并把各项数值设为属性，这样，同一风格下的下一个视频只需换用新的脚本和屏幕内容，即可沿用该合成。