remotion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to Use

使用场景

Use this skill when:

Creating a new Remotion video from scratch
Generating video brief variants for a content asset
Modifying an existing Remotion composition
Debugging Remotion animation or rendering issues
Working with any Remotion-specific APIs or components

在以下场景中使用本技能：

从零开始创建新的Remotion视频
为内容资产生成多种视频简报变体
修改现有的Remotion合成内容
调试Remotion动画或渲染问题
使用任何Remotion专属API或组件

Video Creation Process

视频创作流程

When creating a new Remotion video, follow this 8-step process. Step 2 selects 3-5 concepts from the catalog based on the brief and cold audience optimization. Steps 4 and 5 are approval gates. Do not write code until both are approved.

For the full process document with templates and decision matrices, read references/video-creation-process.md.

创建新Remotion视频时，请遵循以下8步流程。步骤2会根据简报和冷受众优化从概念目录中选择3-5个概念。步骤4和5为审批节点，在两者均获批准前请勿编写代码。

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

Step 0: Brand Identification

步骤0：品牌识别

Before any creative work, identify the brand. Ask the user: "What brand is this video for?"

If the brand has a preset below, use it directly. No further brand questions needed.

If the brand is not listed, ask the user to provide a brand website URL or brand guidelines. Extract: background color, primary accent, secondary accent, text colors, font family, and theme (light/dark). If no guidelines exist, ask for at minimum: primary color, background color, and font preference.

开展任何创意工作前，先明确品牌。询问用户：“该视频是为哪个品牌制作的？”

如果以下存在该品牌的预设，直接使用即可，无需再询问品牌相关问题。

如果品牌未在列表中，请用户提供品牌官网URL或品牌指南。提取以下信息：背景色、主强调色、次强调色、文字颜色、字体家族以及主题（亮色/暗色）。若没有品牌指南，至少要求提供：主色调、背景色和字体偏好。

Step 1: Creative Brief

步骤1：创意简报

Gather and lock before any creative work:

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]

开展任何创意工作前，先收集并锁定以下信息：

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]

Step 2: Concept Selection (3-5 Recommended Concepts)

步骤2：概念选择（推荐3-5个概念）

After locking the creative brief, analyze it to select the best video concepts for this specific use case. Do not present a fixed set of variants. Draw from the concept catalog in references/concept-catalog.md.

The catalog contains 18 primary concepts, 8 visual style modifiers, and 5 cold audience hook patterns. Read it before generating recommendations.

锁定创意简报后，分析简报以选择最适合该特定场景的视频概念。请勿呈现固定的变体集合，请从references/concept-catalog.md的概念目录中选取。

该目录包含18个核心概念、8种视觉风格修饰符以及5种冷受众钩子模式。生成推荐前请先阅读该目录。

Selection Process

选择流程

Score concepts against the brief. For each concept in the catalog, evaluate:
- Does the concept's "Best For" match the content type?
- Can the core message land in 15-30 seconds with this structure?
- Does the concept work at the target duration and dimensions?
- Does the brief provide the data/visuals this concept needs?
Apply the cold audience filter. For each scored concept, evaluate:
- Can a viewer with ZERO prior context understand the value in the first 3 seconds?
- Does the concept create scroll-stopping visual motion in the opening beat?
- Does the concept avoid requiring prior knowledge of the brand, product, or problem space?
- If the concept naturally front-loads a result or data point (metric-counter, animated-infographic, before-after), it is inherently stronger for cold audiences than narrative concepts that need setup time.
Select a hook pattern. For each recommended concept, pair it with a hook pattern from the catalog:
- Content with data → result-first
- Product launches and tools → pattern-interrupt
- Thought leadership and education → curiosity-gap
- Trust-building content → social-proof-hook
- Competitive and pricing content → loss-aversion
Present 3-5 recommended concepts as one-page briefs. For each:
- Concept name (from the catalog) and one-sentence description
- Why it fits this brief (1-2 sentences referencing the specific content and audience)
- Recommended hook pattern and opening beat description
- Scene-by-scene table (from the catalog template, customized for this content)
- Optional visual style modifier if one enhances the concept
Rank the recommendations. Mark the top recommendation and explain why.
User selects one (or a hybrid of two). Lock the selected concept before proceeding to Step 3.

根据简报为概念评分。针对目录中的每个概念，评估：
- 该概念的“适用场景”是否匹配内容类型？
- 采用该结构能否在15-30秒内传递核心信息？
- 该概念是否适配目标时长和尺寸？
- 简报是否提供该概念所需的数据/视觉素材？
应用冷受众筛选器。针对每个已评分的概念，评估：
- 完全没有前置背景知识的观看者能否在前3秒内理解其价值？
- 该概念能否在开场部分创造吸引用户停止滚动的视觉动态效果？
- 该概念是否无需观看者预先了解品牌、产品或相关问题领域？
- 如果该概念自然地将结果或数据点前置（如指标计数器、动态信息图、前后对比），那么相比需要铺垫的叙事类概念，它对冷受众的吸引力天生更强。
选择钩子模式。为每个推荐概念搭配目录中的一种钩子模式：
- 含数据的内容 → 结果前置
- 产品发布与工具类 → 模式中断
- 思想领导力与教育类 → 好奇心缺口
- 信任构建类内容 → 社交证明钩子
- 竞品与定价类内容 → 损失厌恶
呈现3-5个推荐概念，每个概念以单页简报形式展示：
- 概念名称（来自目录）及一句话描述
- 适配本简报的原因（1-2句话，提及具体内容和受众）
- 推荐的钩子模式及开场部分描述
- 分场景表格（基于目录模板，针对本内容定制）
- 可选的视觉风格修饰符（若能增强概念效果）
为推荐概念排序。标记首选推荐并说明原因。
用户选择一个（或两个概念的混合体）。锁定所选概念后再进入步骤3。

Cold Audience Optimization Rules

冷受众优化规则

These rules apply to all concept recommendations and override content-type defaults when they conflict:

Default assumption: cold audience. Unless the brief explicitly states the audience is warm (retargeting, existing users, newsletter subscribers), assume zero brand awareness.
First scene requirements for cold audiences:
1. A visual pattern interrupt (motion, color contrast, or scale change)
2. Text that names a problem or result the viewer recognizes WITHOUT knowing the brand
3. No brand identification in scene 1 (save brand card for scene 2 or later)
Hook pattern restrictions for cold audiences: Use pattern-interrupt, result-first, or loss-aversion. Avoid curiosity-gap unless the stat/claim is universally relatable without brand context.
Concept flexibility: If no concept in the catalog fits the brief well for a cold audience, create a hybrid or adapt an existing concept. The catalog is a starting library, not a constraint.

以下规则适用于所有概念推荐，与内容类型默认规则冲突时优先适用：

默认假设：冷受众。除非简报明确说明受众为暖受众（重定向用户、现有用户、通讯订阅者），否则默认用户对品牌完全不了解。
冷受众的开场场景要求：
1. 视觉模式中断（动态效果、色彩对比或尺寸变化）
2. 文字内容需点明观看者熟悉的问题或结果，无需知晓品牌
3. 开场场景中不出现品牌标识（品牌卡片留到第2场景或之后）
冷受众的钩子模式限制：使用模式中断、结果前置或损失厌恶。除非统计数据/声明无需品牌背景也具有普遍相关性，否则避免使用好奇心缺口模式。
概念灵活性：如果目录中没有完全适配简报的冷受众概念，可创建混合概念或改编现有概念。目录仅作为起始库，而非约束条件。

Step 3: Format and Specs

步骤3：格式与规格

Resolve from the brief and selected variant using the format decision matrix:

Channel	Dimensions	Duration
LinkedIn/Instagram feed	1080x1080	15-30s
Website/presentation	1920x1080	15-60s
Reels/TikTok/Stories	1080x1920	15-60s
Email (GIF)	600x600 or 800x450	5-10s

Default FPS: 30. Only use 60 if smooth motion is critical.

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]

根据简报和所选变体，使用格式决策矩阵确定以下内容：

渠道	尺寸	时长
LinkedIn/Instagram动态	1080x1080	15-30秒
网站/演示文稿	1920x1080	15-60秒
Reels/TikTok/快拍	1080x1920	15-60秒
邮件（GIF）	600x600 或 800x450	5-10秒

默认帧率：30FPS。仅当需要流畅动态效果时才使用60FPS。

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]

Step 4: Scene Breakdown (APPROVAL GATE)

步骤4：场景分解（审批节点）

Define every scene before writing code. Use the selected variant's scene template as the starting structure, then customize for the specific content.

Present the scene table for approval.

Scene table format:

#	Name	Time	Copy	Animation	Purpose
1	Hook	0-3s	Exact text	Motion description	Why it exists

Timing guidelines:

Duration	Scene Count	Avg Per Scene
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

Lock copy, timing, and narrative structure before proceeding.

编写代码前先定义所有场景。以所选变体的场景模板为基础结构，再针对具体内容进行定制。

提交场景表格供审批。

场景表格格式：

#	名称	时间	文案	动画	目的
1	钩子	0-3秒	精确文字	动态效果描述	设计意图

时长指南：

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

锁定文案、时长和叙事结构后再继续。

Step 5: Visual Design (APPROVAL GATE)

步骤5：视觉设计（审批节点）

Lock before implementation:

Color palette (minimum required roles):

Background, Primary accent, Secondary accent
Text primary, Text secondary, Text tertiary
Border/divider

Brand theme presets (use for known brands, skip color questions):

Brand	Background	Primary Accent	Secondary Accent	Text Primary	Text Muted	Font	Theme
FunnelEnvy	`#FFFFFF` / `#1a1a2e` (terminal)	`#3B82F6` (Blue)	`#8B5CF6` (Purple)	`#000000`	`#6B7280`	Inter, system	Light
Reform	`#FFFFFF` / `#1a1a2e` (terminal)	`#48EC80` (Green)	`#EDE630` (Yellow)	`#000000`	`#6B7280`	Inter, system	Light
GrowthNode	`#0f0a1a` (all scenes)	`#8B5CF6` (Purple)	`#3B82F6` (Blue)	`#FFFFFF`	`#a1a1aa`	Inter, system	Dark
MIA	`#F7F4FA` / `#1c1422` (dark)	`#F1DE71` (Yellow)	`#7184F1` (Purple)	`#1c1422` / `#f7f4fa` (dark)	`rgba(28,20,34,0.62)`	system-ui, -apple-system, Segoe UI	Light

MIA accent palette: Blue

#71C4F1

, Purple

#7184F1

, Pink

#F171C4

, Green

#71F19E

Custom brands: If the brand is not listed above, define colors from the brand website or guidelines provided in Step 0. Fill the same roles: background, primary accent, secondary accent, text primary, text muted, font, theme.

Typography: Font family, weight hierarchy, sizes at target resolution.

Animation style: Spring (bouncy/smooth/snappy), linear, or ease-based. Pick a dominant style.

Source of truth: If matching an existing design, reference the source file.

锁定以下内容后再开始实现：

调色板（至少需包含以下角色）：

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

品牌主题预设（已知品牌使用此预设，无需询问颜色问题）：

品牌	背景色	主强调色	次强调色	主文字色	弱化文字色	字体	主题
FunnelEnvy	`#FFFFFF` / `#1a1a2e` (终端)	`#3B82F6` (蓝色)	`#8B5CF6` (紫色)	`#000000`	`#6B7280`	Inter, system	亮色
Reform	`#FFFFFF` / `#1a1a2e` (终端)	`#48EC80` (绿色)	`#EDE630` (黄色)	`#000000`	`#6B7280`	Inter, system	亮色
GrowthNode	`#0f0a1a` (所有场景)	`#8B5CF6` (紫色)	`#3B82F6` (蓝色)	`#FFFFFF`	`#a1a1aa`	Inter, system	暗色
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中提供的品牌官网或指南定义颜色，填充相同角色：背景色、主强调色、次强调色、主文字色、弱化文字色、字体、主题。

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

动画风格：弹簧（弹性/流畅/利落）、线性或缓动。选择一种主导风格。

参考基准：如果需要匹配现有设计，请参考源文件。

Step 6: Architecture Decision

步骤6：架构决策

Agent resolves this based on scene complexity:

Condition	Approach
Under 15 scenes	Single file
15+ scenes or reusable parts	Multi-file with `scenes/` directory
Shared elements across scenes	Persistent layer with opacity envelope

Always use a centralized timing constant (

const T = { ... }

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

条件	方案
场景少于15个	单文件
15+个场景或存在可复用部分	多文件，使用 `scenes/` 目录
场景间存在共享元素	带透明度包络的持久层

始终使用集中式时间常量（

const T = { ... }

）。

Step 7: Implementation

步骤7：实现

Write code against locked decisions. All animation must follow Remotion rules (see Technical Reference below).

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

Step 8: Output Documentation

步骤8：输出文档

Generate a reference doc covering: specs, selected variant, preview/render commands, scene breakdown, color palette, timing config, architecture notes, iteration guide.

生成包含以下内容的参考文档：规格、所选变体、预览/渲染命令、场景分解、调色板、时间配置、架构说明、迭代指南。

Technical Reference

技术参考

Read individual rule files for API details and code examples.

阅读单个规则文件获取API详情和代码示例。

Core Animation and Timing

核心动画与计时

rules/animations.md - Animation fundamentals. All motion via
```
useCurrentFrame()
```
. No CSS transitions
rules/timing.md -
```
interpolate()
```
,
```
spring()
```
, easing functions, spring configs
rules/sequencing.md -
```
<Sequence>
```
and
```
<Series>
```
for timing, delay, and duration control
rules/trimming.md - Trim beginnings (negative
```
from
```
) and ends (
```
durationInFrames
```
)
rules/transitions.md -
```
<TransitionSeries>
```
with fade, slide, wipe, flip, clockWipe

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

Media

媒体

rules/assets.md -
```
staticFile()
```
for public folder assets
rules/videos.md -
```
<Video>
```
with trimming, volume, speed, looping, pitch
rules/audio.md -
```
<Audio>
```
with trimming, volume, speed, pitch
rules/images.md -
```
<Img>
```
component (ensures load before render)
rules/gifs.md -
```
<AnimatedImage>
```
for GIF/APNG/AVIF/WebP
rules/fonts.md - Google Fonts via
```
@remotion/google-fonts
```
, local fonts via
```
@remotion/fonts
```

rules/assets.md - 使用
```
staticFile()
```
加载public文件夹中的资源
rules/videos.md -
```
<Video>
```
组件的裁剪、音量、速度、循环、音调控制
rules/audio.md -
```
<Audio>
```
组件的裁剪、音量、速度、音调控制
rules/images.md -
```
<Img>
```
组件（确保渲染前加载完成）
rules/gifs.md - 使用
```
<AnimatedImage>
```
处理GIF/APNG/AVIF/WebP
rules/fonts.md - 通过
```
@remotion/google-fonts
```
加载谷歌字体，通过
```
@remotion/fonts
```
加载本地字体

Text and Captions

文字与字幕

rules/text-animations.md - Typewriter, word highlighting patterns
rules/measuring-text.md -
```
measureText()
```
,
```
fitText()
```
,
```
fillTextBox()
```
rules/display-captions.md - TikTok-style captions, word-by-word highlighting
rules/import-srt-captions.md - Parse
```
.srt
```
files with
```
parseSrt()
```
rules/transcribe-captions.md - Whisper.cpp, Whisper Web, OpenAI API

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

Composition and Metadata

合成与元数据

rules/compositions.md -

<Composition>

<Still>

<Folder>

defaultProps

rules/calculate-metadata.md - Dynamic duration, dimensions, and props

rules/compositions.md -

<Composition>

、

<Still>

、

<Folder>

、

defaultProps

rules/calculate-metadata.md - 动态时长、尺寸和属性

Advanced

进阶内容

rules/3d.md -
```
<ThreeCanvas>
```
with React Three Fiber
rules/charts.md - SVG/D3.js charts animated via
```
useCurrentFrame()
```
rules/lottie.md -
```
<Lottie>
```
component with
```
@remotion/lottie
```
rules/tailwind.md - TailwindCSS (no
```
transition-*
```
or
```
animate-*
```
classes)

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-*
```
类）

Media Utilities (Mediabunny)

媒体工具（Mediabunny）

rules/extract-frames.md - Extract video frames at timestamps
rules/can-decode.md - Check video/audio decodability
rules/get-video-duration.md - Video duration in seconds
rules/get-video-dimensions.md - Video width and height
rules/get-audio-duration.md - Audio duration in seconds

rules/extract-frames.md - 按时间戳提取视频帧
rules/can-decode.md - 检查视频/音频的可解码性
rules/get-video-duration.md - 获取视频时长（秒）
rules/get-video-dimensions.md - 获取视频宽高
rules/get-audio-duration.md - 获取音频时长（秒）

Layout

布局

rules/measuring-dom-nodes.md -
```
useCurrentScale()
```
for accurate measurements

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

References

参考资料

references/concept-catalog.md - Concept catalog with 18 primary concepts, 8 visual style modifiers, 5 cold audience hook patterns, selection criteria, and content-type affinity matrix
references/video-creation-process.md - Full process document with templates, decision matrices, and detailed guidance

references/concept-catalog.md - 概念目录，包含18个核心概念、8种视觉风格修饰符、5种冷受众钩子模式、选择标准及内容类型适配矩阵
references/video-creation-process.md - 完整流程文档，包含模板、决策矩阵和详细指导

Hard Rules

硬性规则

These apply to all Remotion code. Violations will produce incorrect output.

All animation driven by
useCurrentFrame()
. No CSS transitions, no Tailwind
```
animate-*
```
or
```
transition-*
```
classes, no React Three Fiber
```
useFrame()
```
Use Remotion components (
```
<Img>
```
,
```
<Video>
```
,
```
<Audio>
```
) not native HTML elements
Use
staticFile()
for all assets in the
```
public/
```
folder
Time in seconds: multiply by
```
fps
```
from
```
useVideoConfig()
```
to get frames
No third-party animation libraries driving motion (disable their animations, use
```
useCurrentFrame()
```
instead)
Every concept must be self-explanatory. A viewer scrolling with zero context should understand the value from the video alone. No scene should depend on external knowledge. Copy must carry the full message independently. Always assume a cold audience unless the brief says otherwise.

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

所有动画由
useCurrentFrame()
驱动。禁止使用CSS过渡、Tailwind的
```
animate-*
```
或
```
transition-*
```
类、React Three Fiber的
```
useFrame()
```
使用Remotion组件（
```
<Img>
```
、
```
<Video>
```
、
```
<Audio>
```
）而非原生HTML元素
**使用
```
staticFile()
```
**加载
```
public/
```
文件夹中的所有资源
时间单位转换：将秒数乘以
```
useVideoConfig()
```
中的
```
fps
```
得到帧数
禁止使用第三方动画库驱动动态效果（禁用其动画，改用
```
useCurrentFrame()
```
实现）
每个概念必须自解释。完全没有前置背景的滚动观看者应仅通过视频理解其价值。任何场景都不应依赖外部知识。文案必须独立传递完整信息。除非简报另有说明，否则始终默认受众为冷受众。