Name: remotion-video
Author: iart-ai/motion-design-skills

1实现原理 · 为什么它能做到

立论基础是 Remotion 的帧确定性：动画是当前帧的纯函数，因此可精确渲染任意帧、可 diff、可进 CI——这也是它敢「不设 seek harness」直接渲染精确帧的原因。

skills/remotion-video/SKILL.md

Build real MP4/GIF/WebM videos in React. Every frame is a pure function of `useCurrentFrame()`, so output is deterministic, scrubbable, diffable, and renderable in CI. The code-first alternative to After Effects for templated and data-driven motion graphics.

注：这里在做什么：把「视频」变成「可重放的函数」后，验证方式就从「看渲染出来的片子」变成「渲染指定帧的 PNG 逐个检查」——既便宜又快，是整条 verify loop 的前提。

核心 API 面被压缩成 4 个原语：interpolate（时间→值且必须 clamp）、spring（物理缓动）、Sequence/Series（时间轴排布）、Composition+zod schema（参数化与可编辑 props）。

skills/remotion-video/SKILL.md

Always clamp `interpolate` unless an intentional overshoot is desired — by default it extrapolates linearly past the range, which produces opacity > 1 or negative values.

注：每个原语都给了最小代码与一个明确的坑（interpolate 默认外推、spring 不需再除时长、Sequence 内 useCurrentFrame 是局部的）。这种「原语 + 已知坑」的写法比罗列 API 更省 token 也更不容易踩雷。

数据驱动是其差异化卖点：durationInFrames 可由 props 计算（calculateMetadata），数据一次定义、多输出渲染，适合「一行 CSV/一条记录一条视频」。

skills/remotion-video/SKILL.md

To make duration data-dependent, use `calculateMetadata` on the Composition to compute `durationInFrames` from props (e.g. number of rows × frames per row) before render.

注：配套给了批量渲染的工程姿势：Node 里用 @remotion/bundler 打包一次 + @remotion/renderer 渲染多次（'bundle once, render many'），避免每条记录都重新打包。

音频与节拍同步被要求「离线检测、把时间戳烘进 props」，因为无头渲染没有实时音频时钟。

skills/remotion-video/SKILL.md

Detect beats offline (e.g. with `web-audio-beat-detector` or aubio) and bake the timestamps into props — never analyze audio at render time, since headless rendering has no realtime audio clock.

注：示例用 BEATS_SEC 数组 + frame/fps 比对来实现「落拍缩放」，把不可控的运行时分析换成确定性的常量表。

确定性纪律被写成禁止清单：不能用 Math.random / Date.now / 定时器，随机必须用 Remotion 的 random(seed)。

skills/remotion-video/SKILL.md

- Never use `Math.random()`, `Date.now()`, or animation timers — they break determinism. Use `random(seed)` from Remotion for stable per-frame randomness.

注：同段还有字体/资源加载纪律：统一走 staticFile() 并用 delayRender/continueRender 等待，否则渲染中途字体跳变。

验证回路刻意分两段以省钱：先渲染起始/中段/末帧的 PNG 逐张检查，确认无误才编码整片；且要用「实际要发布的 props」而不是 defaultProps。

skills/remotion-video/SKILL.md

**Verify loop — render stills → inspect → encode.** Render single frames first (cheap, no video encode), inspect them, and encode the full video only once the frames are right.

注：给出确切命令（`npx remotion still Promo out/f-start.png --frame=0`、--frame=75、--frame=149）与末帧取值规则（durationInFrames - 1），并用 `npx remotion compositions` 反查时长/fps 来定末帧——避免凭猜。

「渲染器会撒谎，文件不会」：验证最终交付物时直接读编码后的 MP4 元数据并断言分辨率/fps（仓库脚本 probe-mp4.sh 用 ffprobe 实现）。

scripts/probe-mp4.sh

# Renders lie; the file doesn't. This reads resolution / codec / fps / duration straight from the

注：实现细节：q(){ ffprobe -v error -select_streams v:0 -show_entries "$1" -of csv=p=0 "$mp4" | head -1; }，再对期望值做断言（分辨率不等即 fail，fps 容差 0.5，非 h264 仅告警）。SKILL.md 给的调用示例是 `scripts/probe-mp4.sh out/short.mp4 1080x1920 30 # vertical short contract`。

数据驱动/批量作业有专门的中间验收：先用一套代表性 props 跑 still 检查，再批量渲染，避免把同一个布局 bug 复制 N 份。

skills/remotion-video/SKILL.md

**Data-driven / batch**: verify ONE representative props set via stills *before* batch-rendering all rows — catch a layout bug once instead of N times.

注：还有一条轻量附加收益：`npx remotion render Promo out/demo.gif --codec=gif` 可顺手产出 README 演示 GIF（它明确标为 'README demo GIF for free'）。

reference 文件补齐了工程化面：CLI 旗标、programmatic 渲染循环、GLSL/Three.js 嵌入、确定性 checklist。

skills/remotion-video/references/api-and-patterns.md

import {bundle} from '@remotion/bundler';

注：同文件还给出重 WebGL 的渲染旗标建议：'Heavy WebGL benefits from `--gl=angle` (or `swangle` for headless servers without a GPU) on the render command.'，以及 `renderStill({composition, serveUrl, output, frame})` 的 still 快捷方式。

2核心能力

01用 React 写程序化视频（MP4/GIF/WebM），帧由 useCurrentFrame 驱动

02参数化/数据驱动模板：<Composition> + zod schema + defaultProps + calculateMetadata 动态时长

03时间轴排布：<Sequence from durationInFrames> 与 <Series>（含 offset 制造交叠/交叉溶解）

04帧级确定性验证：精确渲染任意帧的 PNG（起始/中段/末帧），末帧由 compositions 反查确定

05成片规格断言（真实 ffprobe 读数 + 可选期望值校验）

06离线节拍检测 + 时间戳烘进 props 的音画同步做法

07CI/批量渲染：@remotion/bundler 打包一次 + @remotion/renderer 多次渲染

08进阶嵌入：GLSL shader 背景与 @remotion/three 驱动 Three.js 场景（按帧取 uTime，保证确定性）

3外部依赖

类型	依赖
cli	npx remotion（studio / still / render / compositions），远程拉取 Remotion 工具链
package	remotion（运行时）/ @remotion/renderer / @remotion/bundler
package	zod + @remotion/zod-types（props 类型安全与 Studio 可编辑）
package	@remotion/three + three（在视频里驱动 Three.js 场景）
package	@remotion/google-fonts（无头渲染下预载字体，避免字体跳变）
package	web-audio-beat-detector / aubio（离线节拍检测，产出烘进 props 的时间戳）
cli	ffprobe（probe-mp4.sh 读取成片真实规格）/ ffmpeg（contact-sheet.sh 拼接 still）
network	iart.ai 引流链接（文档内，非运行时调用）

4风险提醒风险提醒：橙色 · 评估后使用

风险提醒：橙色 · 评估后使用

依赖远程包与本地执行渲染链（供应链 + 执行面） — 使用即 `npx remotion …`（从 npm 获取并执行 CLI），并在无头浏览器里 bundle 执行项目代码；版本受项目 package.json 影响。锁定版本、离线安装或用本地 node_modules 可收敛该面。
渲染开销可能远超预期 — Remotion 渲染是 Chromium 逐帧渲染，长视频/高分辨率/Three.js 场景成本高；skill 虽给了 --concurrency/--scale 与 still 先行策略，但未给任何预算或时长估算，容易在批量（N 行数据 → N 条视频）时失控。
scripts/ 路径依赖仓库根工作目录 — SKILL.md 称 'Packaged helper (`scripts/`)'，脚本实际在仓库根 motion-design/scripts/；按单 skill 粒度安装后照抄 `scripts/probe-mp4.sh` 可能找不到文件（同仓库 after-effects 的 .jsx 却在 skill 内）。
渲染期网络依赖可能破坏可重复性 — reference 建议用 @remotion/google-fonts 预载字体，即在渲染时访问 Google Fonts；无网络环境会失败或字体回退，导致成片与预期不一致（字体/文本溢出正是 checklist 要查的项）。
验收仍是「看图判断」为主 — 除成片 spec 断言（分辨率/fps/codec）可机械校验外，「文本是否溢出、安全区是否被压、数据绑定是否正确」由人/模型看图判断，没有自动断言；批量场景下依赖代表性样本抽样。
文档含商业引流 — reference 末尾含 iart.ai 的 UTM 链接，属该 14-pack 开源集合的统一转化位；不影响功能。

风险提醒：橙色，评估后使用。理由：skill 本体是提示词+reference，但使用它必然执行远程获取的工具链与本地渲染链——`npx remotion …`（从 npm 拉取并执行 Remotion CLI，进而 bundle 并在无头浏览器中运行项目代码）、@remotion/* 与 zod/three 等远程包，依赖面符合分级范式「依赖第三方插件、镜像、远程包」→ 橙档。无凭证读取、无环境变量读取、无业务 API、无绕过/采集行为，故非红档。触发条件：只要真的渲染视频就会发生（纯代码编写不触发）。若团队已把 remotion 锁定在本地 node_modules 且离线渲染，接触面收敛为「本地执行项目代码」。

5第二遍独立确认

[ok] 「无 seek harness、可直接渲染精确帧」的前提是否成立 — SKILL.md 与 reference 一以贯之地把确定性建立在「每帧是 useCurrentFrame 的纯函数」上，并用禁止清单（Math.random/Date.now/timers）+ random(seed) + delayRender/continueRender 兜住例外；因此 still --frame=N 能精确复现该帧。逻辑自洽，非空话。
[ok] verify loop 的命令是否可执行（含末帧取值） — 命令为 `npx remotion still Promo out/f-start.png --frame=0` / --frame=75 / --frame=149，并注明「last frame = durationInFrames - 1」，另给 `npx remotion compositions` 用于反查 durationInFrames/fps。无未定义变量。
[ok] probe-mp4.sh 的断言语义（首遍称「读真实 spec 并断言」） — 实读脚本：分辨率不等即 fail=1；fps 用 awk 容差 0.5 判定；codec 非 h264 只告警不 fail；末尾按 fail 决定 exit 0/1。首遍描述准确（未夸大「强制 h264」）。
[discrepancy] scripts/ 路径语义（是否 skill 内自带） — SKILL.md 写 'Packaged helper (`scripts/`)'，实际脚本在**仓库根** motion-design/scripts/，skills/remotion-video/ 目录内没有 scripts/（同仓库 after-effects 却自带 skills/after-effects/scripts/*.jsx）。按单 skill 粒度安装时，`scripts/contact-sheet.sh`、`scripts/probe-mp4.sh` 的相对路径可能解析不到；在仓库根工作则成立。属文档/打包口径问题，非功能缺陷。
[ok] 外部依赖是否完整（含 reference 里的隐性依赖） — SKILL.md 显式提及 remotion、zod、@remotion/renderer、web-audio-beat-detector、aubio、staticFile；reference 补充 @remotion/bundler、@remotion/zod-types、@remotion/three、three、@remotion/google-fonts 与 --gl=angle/--scale/--concurrency 等旗标。已全部逐条登记；无未登记的第三方服务。
[ok] 安全面：有无凭证/环境变量/隐蔽外发 — 全目录对 API_KEY/token/secret/env/curl/requests 零命中；脚本只做 ffprobe/ffmpeg 本地操作；网络面仅来自 npx 拉包与（reference 建议的）Google Fonts 预载。第一遍 orange 判定的依据（远程包依赖）成立，且未发现应升档的凭证/绕过行为。
[ok] 数据驱动「先验一套代表 props」是否真的写进流程 — 'Data-driven / batch: verify ONE representative props set via stills before batch-rendering all rows' 位于 verify loop 小节内，且 Output contract 要求「渲染时用实际要发布的 props，而不是 defaultProps」（'render with the SAME props you'll ship'）。流程上有落点。
[ok] 与 logo-animation 的 tier 路由一致性 — 本 skill 自述 'this is the heavy-tier counterpart to a web scene's ?t=N'；logo-animation 侧写 'For web/SVG/Lottie delivery use this standalone-HTML loop; for a video logo sting, render via the remotion-video verify loop instead.'。两端互指一致。

6结论

把视频做成确定性函数，验证因此变得便宜且可自动化：先渲染 3 张 still 检查，再编码整片，最后断言成片真实 spec。

数据驱动/批量是原生能力：calculateMetadata 动态时长 + zod schema + bundler/renderer 分离，天然适合「一条记录一条视频」。

坑位密度高、可省大量试错：interpolate 必须 clamp、Sequence 内帧是局部的、字体/资源必须 delayRender、节拍必须离线检测。

交付契约清晰：项目 + 成片 + 用实际 props 验证 + 末帧规则，收尾 checklist 5 条可逐条核对。

reference 覆盖工程化细节（批量渲染循环、Three.js/GLSL、GL 后端旗标），把 skill 从「教程」推到「可交付」。

适合：适合：需要把视频生产纳入代码仓库与 CI 的团队（模板化营销片、数据可视化动画、逐记录生成的个性化视频、社交短片）；也适合单个开发者用 React 技能栈产出可版本化的动效，而不必打开 AE。配合本 skill 的 still 先行 + probe 断言，能把「渲染出来的到底对不对」变成可核对流程。

不适合：不适合：① 纯手工创意剪辑、需要真实素材剪辑/调色/混音的项目（Remotion 是代码渲染路线，剪辑类工作应走别的 skill/工具）；② 无 npm 出网且未预装依赖的环境；③ 一次性、不需要模板化的短动效（走 standalone HTML 更轻）；④ 希望 skill 直接给成片而不写代码的用户——它交付的是项目与渲染流程；⑤ 超大规模批量渲染而不评估算力的场景（成本风险）。

安装 agent 直装可复制

① 本站镜像更新 2026-09-15

方式 A · 人下载镜像包下载 remotion-video.tar.gz

sha256: 3d9caacebfc580bf…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit 3c129f769d；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库iart-ai / iart-ai/motion-design-skills

原始 GitHubiart-ai/motion-design-skills ↗

Stars29

最近推送2026-06-22

本 skill commit3c129f769d

本站信息

收录日期2026-09-06

分类内容创作

侦查报告AI 侦查 · 2 遍 · 2026-09-06

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

remotion-video

1实现原理 · 为什么它能做到

2核心能力

3外部依赖

4风险提醒 风险提醒：橙色 · 评估后使用

5第二遍独立确认

6结论

4风险提醒风险提醒：橙色 · 评估后使用