remotion-motion-graphics

用途

Remotion Motion Graphics 是一个用于创建和编辑专业动态图形视频的技能。它基于 Remotion——一个用 React 组件逐帧渲染视频的框架。该技能的核心目标不是解决代码质量问题，而是提升“动效设计”水平，避免未经训练的生成结果出现线性缓动、仅透明度淡入淡出、元素同时入场、扁平色彩、缺乏纹理等“通用 AI 视频”特征。

主要能力

该技能定义了一套不可协商的规则，适用于每一个合成：

禁止使用线性插值，每个 interpolate() 必须搭配缓动曲线，入场优先使用 spring()，并始终设置 extrapolateLeft/Right: "clamp"。
入场动画需同时动画 2-3 个属性（如 opacity + translateY + scale），禁止单独淡入。
所有元素错开入场，列表、单词、光线、卡片等使用 3-6 帧偏移，不允许同时进入。
退出动画存在且比入场更快（约 10 帧 vs 约 20 帧）。
每个场景使用五层堆叠，从下到上：背景网格 → 素材 → 图形/文字 → 调色 → 颗粒 + 暗角。禁止纯色背景。
每张静态图片应用 Ken Burns 效果（缓慢缩放 1→1.08 并平移）。每个视频素材使用 <OffthreadVideo>，而非 <Video>。
屏幕上停留超过 2 秒的元素需有正弦波微动，使其“呼吸”。
所有时间基于 fps 通过 useVideoConfig() 推导，不使用魔法帧号。
项目顶部有一个主题对象（颜色、缓动、弹簧预设、字体），禁止在组件中内联十六进制颜色或缓动。
渲染后必须提取帧并目视检查，修复后重新渲染，绝不交付未验证的渲染结果。

使用方式

工作流分为五步：

确定范围：明确时长、fps（默认 30，仅高速运动用 60）、尺寸（1080×1920 竖屏或 1920×1080 横屏）、现有素材（图片、视频、音频、Logo），以及是新建合成还是编辑现有项目。若编辑现有项目，先完整阅读 src/，找到或创建主题，并重构违反上述规则的代码。
设置：新项目安装依赖：

npm install remotion @remotion/cli react react-dom
# 可选：@remotion/transitions @remotion/motion-blur @remotion/google-fonts

将技能中的 assets/theme.ts 复制到 src/theme.ts 并按品牌调整调色板。结构为：src/index.ts (registerRoot) → src/Root.tsx (Composition，时长/fps/尺寸) → src/scenes/.tsx → src/components/.tsx。用户素材放在 public/，通过 staticFile() 加载。

构建：阅读 references/motion-patterns.md 获取可复用组件实现（BgMesh、Grade、Grain、Vignette、KenBurns、WordReveal、Stagger、Counter、Spark、转场、视差）。阅读 references/design-rules.md 了解节奏、韵律、排版、调色板和声音设计规则。场景节奏：HIT → 保持（15-20 静止帧）→ 构建 → HIT。前 15 帧必须有运动，超过 90 帧必须出现新视觉元素。
渲染：

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

Remotion 需要 Chromium 二进制文件。若自动下载失败，可手动指定路径：

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 二进制文件。

验证（强制）：提取关键帧并目视检查。便携方法：

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 提取：

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

按频率检查并修复：间距错误（em 相对于父字体大小）、文字溢出或触碰边缘、元素在入场前或退出后可见（缺少 clamp）、颜色/对比度问题、图层顺序错误。修复后重新渲染、重新提取、重新检查，只有通过后才交付。

适用场景

创建新的动态图形视频，支持竖屏（Reels/Shorts）和横屏。
编辑现有视频：将 mp4 放入 public/，用 <OffthreadVideo> 作为素材层，根据片段长度设置合成时长，在上方堆叠图形/调色/颗粒。可用 ffprobe 获取片段时长和 fps。支持为语音添加逐词同步字幕。
处理图片、视频、音频、Logo 等素材。

限制

需要安装 Remotion 及相关依赖，并需要 Chromium 二进制文件。
渲染和验证过程需要手动提取帧并目视检查，无法完全自动化。
技能本身不提供收费、价格或平台信息，这些事实暂未提供。
需要遵循严格的规则集，否则可能产生“通用 AI 视频”效果。
字体方面，英雄文字不能依赖系统默认，需通过 @remotion/google-fonts 或 @font-face + staticFile 加载显示字体。
避免使用 Emoji 作为图标，因为 Emoji 渲染为全彩平台字形，会忽略调色板并破坏单主色规则。
若没有音效素材，可用 Node 脚本合成 16 位 WAV 最小音效包，无需下载。
常见失败模式包括：生成一个巨大组件而非主题化可复用组件、Composition 与场景内容 durationInFrames 不匹配、重新渲染时忘记 --overwrite 导致检查旧文件、试图向用户“描述”结果而不渲染验证。

技能介绍

用途

主要能力

使用方式

适用场景

限制