remotion-motion-graphics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Motion Graphics

Remotion 动态图形

Remotion renders React components frame-by-frame into video. Code quality is not the bottleneck — motion design craft is. Untrained generation produces linear easing, opacity-only fades, simultaneous entrances, flat colors, and no texture. That is the "generic AI video" look. This skill exists to prevent it.

Remotion 将 React 组件逐帧渲染为视频。代码质量并非瓶颈——动态设计技巧才是。未经训练生成的内容会出现线性缓动、仅透明度淡入淡出、元素同步入场、纯色无纹理等问题，这就是“通用AI视频”的典型外观。本技能的存在正是为了避免这种情况。

Non-negotiable rules (apply to EVERY composition)

不可妥协的规则（适用于所有合成内容）

NEVER use linear interpolation. Every
```
interpolate()
```
gets an easing curve; every entrance prefers
```
spring()
```
. Always
```
extrapolateLeft/Right: "clamp"
```
.
Entrances animate 2–3 properties together (opacity + translateY + scale). A lone fade is forbidden.
Stagger everything. Lists, words, rays, cards: 3–6 frame offsets. Nothing enters simultaneously.
Exits exist and are faster than entrances (~10 frames vs ~20).
Five-layer stack in every scene, bottom to top: background mesh → assets → graphics/type → color grade → grain + vignette. Never a flat solid background.
Every still image gets Ken Burns (slow scale 1→1.08 + pan). Every video asset uses
```
<OffthreadVideo>
```
, never
```
<Video>
```
.
Idle elements breathe: anything on screen >2s gets sin-wave micro-motion.
All timing derives from
fps
via
```
useVideoConfig()
```
. No magic frame numbers.
One theme object at the top of the project (colors, easings, spring presets, fonts). Never inline a hex color or easing in a component.
Render, extract frames, LOOK at them, fix, re-render. Never deliver an unverified render. This loop is mandatory — see Verification below.

绝对不要使用线性插值。每个
```
interpolate()
```
都要设置缓动曲线；每个入场动画优先使用
```
spring()
```
。始终设置
```
extrapolateLeft/Right: "clamp"
```
。
入场动画同时带动2-3个属性（透明度 + Y轴位移 + 缩放）。单独的淡入效果是禁止的。
所有元素都要错开动画时机。列表、文字、光线、卡片：设置3-6帧的偏移量。绝对不能让元素同步入场。
退场动画必须存在且比入场动画更快（约10帧 vs 约20帧）。
每个场景都要有五层堆叠结构，从下到上：背景网格 → 素材 → 图形/文字 → 颜色分级 → 颗粒 + 暗角。绝对不能使用纯色平背景。
每张静态图片都要添加Ken Burns效果（缓慢缩放1→1.08 + 平移）。每个视频素材都使用
```
<OffthreadVideo>
```
，绝对不要用
```
<Video>
```
。
闲置元素要有呼吸效果：任何在屏幕上停留超过2秒的元素都要添加正弦波微动效。
所有时间参数都通过
useVideoConfig()
从
fps
派生。禁止使用魔法帧数值。
项目顶部要有一个主题对象（颜色、缓动效果、弹簧预设、字体）。绝对不要在组件中直接内联十六进制颜色或缓动参数。
渲染、提取帧、查看、修复、重新渲染。绝对不要交付未验证的渲染结果。此循环是强制性的——请参阅下方的“验证”部分。

Workflow

工作流程

Step 1 — Scope

步骤1 — 确定范围

Determine: duration, fps (30 default; 60 only for heavy fast motion), dimensions (1080×1920 Reels/Shorts, 1920×1080 landscape), what assets exist (images, footage, audio, logos), and whether this is a new composition or an edit to an existing project. If editing an existing project: read

src/

fully first, find the theme (or create one), and refactor violations of the rules above before adding features.

确定：时长、帧率（默认30；仅在高速动态场景下使用60）、尺寸（竖屏Reels/短视频为1080×1920，横屏为1920×1080）、现有素材（图片、视频片段、音频、Logo），以及这是新合成项目还是对现有项目的编辑。如果是编辑现有项目：先完整阅读

src/

目录内容，找到主题（或创建一个主题），在添加新功能之前先重构违反上述规则的代码。

Step 2 — Setup

步骤2 — 搭建项目

New project:

bash

npm install remotion @remotion/cli react react-dom

新项目：

bash

npm install remotion @remotion/cli react react-dom

optional: @remotion/transitions @remotion/motion-blur @remotion/google-fonts

Copy `assets/theme.ts` from this skill into `src/theme.ts` and adjust the palette to
the user's brand. Structure: `src/index.ts` (registerRoot) → `src/Root.tsx`
(Composition, duration/fps/size) → `src/scenes/*.tsx` → `src/components/*.tsx`.
User assets go in `public/`, loaded via `staticFile()`.

将本技能中的`assets/theme.ts`复制到项目的`src/theme.ts`中，并根据用户品牌调整调色板。项目结构：`src/index.ts`（注册根组件）→ `src/Root.tsx`（合成组件，设置时长/帧率/尺寸）→ `src/scenes/*.tsx` → `src/components/*.tsx`。用户素材放在`public/`目录下，通过`staticFile()`加载。

Step 3 — Build

步骤3 — 构建内容

Read

references/motion-patterns.md

for the reusable component implementations (BgMesh, Grade, Grain, Vignette, KenBurns, WordReveal, Stagger, Counter, Spark, transitions, parallax). Compose scenes from those patterns. For pacing, rhythm, typography, color palettes, and sound design rules, read

references/design-rules.md

Scene rhythm: HIT → hold (15–20 still frames) → build → HIT. Something must move in the first 15 frames. Never >90 frames without a new visual element.

阅读

references/motion-patterns.md

获取可复用组件的实现代码（BgMesh、Grade、Grain、Vignette、KenBurns、WordReveal、Stagger、Counter、Spark、转场、视差效果）。使用这些模式组合场景。关于节奏、韵律、排版、调色板和音效设计规则，请阅读

references/design-rules.md

。

场景节奏：突出展示 → 保持（15-20帧静止）→ 推进 → 突出展示。前15帧必须有元素动起来。绝对不要超过90帧没有新视觉元素出现。

Step 4 — Render

步骤4 — 渲染

bash

npx remotion render src/index.ts <CompId> out/video.mp4 --codec h264 --crf 17

Remotion needs a Chromium binary. If its auto-download fails (sandboxes, offline CI), find one and pass it explicitly:

bash

which chromium chromium-browser google-chrome 2>/dev/null
ls /opt/pw-browsers 2>/dev/null   # Playwright installs live here
npx remotion render ... --browser-executable=<path>

If full Chrome errors with "Old Headless mode has been removed", use a

headless_shell

binary instead (Playwright ships one as

chromium_headless_shell-*/chrome-linux/headless_shell

bash

npx remotion render src/index.ts <CompId> out/video.mp4 --codec h264 --crf 17

Remotion需要Chromium二进制文件。如果自动下载失败（沙箱限制、离线CI环境），请找到一个可用的二进制文件并显式指定：

bash

which chromium chromium-browser google-chrome 2>/dev/null
ls /opt/pw-browsers 2>/dev/null   # Playwright安装的浏览器位于此处
npx remotion render ... --browser-executable=<path>

如果完整Chrome浏览器报错“Old Headless mode has been removed”，请改用

headless_shell

二进制文件（Playwright会附带此文件，路径为

chromium_headless_shell-*/chrome-linux/headless_shell

）。

Step 5 — VERIFY (mandatory, never skip)

步骤5 — 验证（强制性，绝对不能跳过）

Extract frames at key moments and visually inspect each one. The portable method — works on machines with no system ffmpeg, renders the exact frame:

bash

for f in 15 45 90 150; do
  npx remotion still src/index.ts <CompId> out/check_$f.png --frame $f --overwrite
done

If system ffmpeg IS available, extracting from the finished mp4 also verifies the encode itself (

-ss

seeking is more portable than

select=

filters, whose quoting breaks in some shells and in Remotion's bundled ffmpeg):

bash

ffmpeg -v error -ss 1.5 -i out/video.mp4 -frames:v 1 check_1.png

Look for, and fix, in order of frequency:

Spacing bugs:
```
gap
```
/
```
margin
```
in
```
em
```
resolves against the PARENT font-size (often 16px), not the text size — use px values in flex containers around big type.
Text overflowing or touching frame edges (keep critical content in middle 75% vertically for 9:16 — platform UI covers top/bottom).
Elements visible before their entrance or after their exit (missing clamp).
Color/contrast failures: hero color on >1 element per frame, dim text unreadable over the grade.
Layer order mistakes (grain/vignette must be on top, grade above content). Fix → re-render → re-extract → re-inspect. Only deliver after a clean pass. Then run the final checklist at the bottom of
```
references/design-rules.md
```
.

提取关键帧并逐一视觉检查。以下是通用方法——在没有系统ffmpeg的机器上也能运行，可渲染精确帧：

bash

for f in 15 45 90 150; do
  npx remotion still src/index.ts <CompId> out/check_$f.png --frame $f --overwrite
done

如果系统已安装ffmpeg，也可以从已完成的mp4中提取帧，同时验证编码本身（

-ss

定位比

select=

滤镜更通用，后者的引号在某些shell和Remotion捆绑的ffmpeg中会失效）：

bash

ffmpeg -v error -ss 1.5 -i out/video.mp4 -frames:v 1 check_1.png

按出现频率排序，查找并修复以下问题：

间距错误：
```
gap
```
/
```
margin
```
使用
```
em
```
单位时，是相对于父元素的字体大小（通常为16px），而非文本本身的大小——在大字体周围的flex容器中使用px值。
文本溢出或触碰帧边缘（竖屏9:16格式下，关键内容要保持在垂直方向中间75%的区域——平台UI会遮挡顶部和底部）。
元素在入场前或退场后仍可见（缺少clamp设置）。
颜色/对比度问题：单帧中有多个元素使用主色调，暗淡的文字在颜色分级后无法辨认。
图层顺序错误（颗粒/暗角必须在最顶层，颜色分级层在内容层上方）。修复 → 重新渲染 → 重新提取帧 → 重新检查。只有在全部检查通过后才能交付。然后运行
```
references/design-rules.md
```
底部的最终检查清单。

Editing the user's existing footage

编辑用户现有视频素材

To enhance an existing mp4 (captions, grade, intro/outro) rather than build from scratch: put the file in

public/

, render it as the asset layer with

<OffthreadVideo src={staticFile("clip.mp4")} />

, set composition duration from the clip length, and stack graphics/grade/grain above it. Get the clip's duration and fps with

ffprobe

before setting up the composition. For word-synced captions over speech, see the captions section of

references/motion-patterns.md

如果是增强现有mp4（添加字幕、颜色分级、片头/片尾）而非从头构建：将文件放入

public/

目录，使用

<OffthreadVideo src={staticFile("clip.mp4")} />

将其渲染为素材层，根据视频片段长度设置合成时长，并在其上方堆叠图形/颜色分级/颗粒层。在设置合成之前，使用

ffprobe

获取视频片段的时长和帧率。如需为语音添加同步文字字幕，请参阅

references/motion-patterns.md

中的字幕部分。

Reference files

参考文件

```
references/motion-patterns.md
```
— copy-paste component library: backgrounds, grade/grain/vignette, Ken Burns, text reveals, counters, transitions, parallax, audio sync, captions. Read before writing components.
```
references/design-rules.md
```
— palettes, typography rules, scene architecture, sound design, pre-delivery checklist. Read before designing scenes and before final delivery.
```
assets/theme.ts
```
— the theme template to copy into every project.

```
references/motion-patterns.md
```
— 可复制粘贴的组件库：背景、颜色分级/颗粒/暗角、Ken Burns效果、文字揭示、计数器、转场、视差、音频同步、字幕。编写组件前请阅读此文件。
```
references/design-rules.md
```
— 调色板、排版规则、场景架构、音效设计、交付前检查清单。设计场景和最终交付前请阅读此文件。
```
assets/theme.ts
```
— 可复制到每个项目中的主题模板。

Common failure modes to actively avoid

需要主动避免的常见错误模式

Emoji as icons. Emoji render as full-color platform glyphs (green ✳️, blue 🌐) that ignore your palette and silently break the one-hero-color rule, and they sit on whatever background you gave them (orange mascot on orange tile = invisible). Draw glyphs with CSS/SVG in theme colors, or verify every emoji against the extracted frames.
No SFX assets is not a reason to ship silent. Synthesize a minimal kit as 16-bit WAVs from a Node script (noise-burst whoosh, pitch-drop pop, sine-thump kick/bass, detuned-sine pad) into
```
public/sfx/
```
— see
```
examples/scripts/
```
in the repo. Zero downloads, fully deterministic.
Generating one giant component instead of themed, reusable pieces.
```
durationInFrames
```
mismatch between Composition and scene content (dead air).
Forgetting
```
--overwrite
```
on re-renders, then inspecting the stale file.
Fonts: never rely on system defaults for hero text; load a display font via
```
@remotion/google-fonts
```
or
```
@font-face
```
+
```
staticFile
```
.
Trying to "describe" the result to the user instead of rendering and verifying it.

用表情符号作为图标。表情符号会渲染为全色平台字形（绿色✳️、蓝色🌐），它们会忽略你的调色板，悄悄违反“单主色调”规则，而且会直接显示在你设置的背景上（橙色吉祥物在橙色背景上会变得不可见）。用CSS/SVG绘制符合主题颜色的字形，或者在提取的帧中逐一验证每个表情符号。
没有音效素材不是交付静音视频的理由。通过Node脚本合成一套最小化音效包，保存为16位WAV文件到
```
public/sfx/
```
目录——请参阅仓库中的
```
examples/scripts/
```
。无需下载，完全可确定效果。
将所有内容生成一个巨型组件，而非主题化的可复用模块。
Composition的
```
durationInFrames
```
与场景内容不匹配（出现空白画面）。
重新渲染时忘记添加
```
--overwrite
```
参数，导致检查的是旧文件。
字体：标题文本绝对不要依赖系统默认字体；通过
```
@remotion/google-fonts
```
或
```
@font-face
```
+
```
staticFile
```
加载显示字体。
试图向用户“描述”结果，而非实际渲染并验证。