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外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| 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管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: npx remotion …（studio / still / render / compositions）：按需从 npm 获取并执行 Remoti
- 网络端点: 声明外部网络访问: 本次共享的脚本自身无业务 API 调用；网络面来自工具链：npx 从 npm 获取 remotion 及相关包（registry.npmjs.org，
- 本地工作目录: 文件读写与工件输出: out/*.mp4、out/*.gif、out/*.webm（成片）
审计说明： 。理由：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结论
适合： 适合：需要把视频生产纳入代码仓库与 CI 的团队（模板化营销片、数据可视化动画、逐记录生成的个性化视频、社交短片）；也适合单个开发者用 React 技能栈产出可版本化的动效，而不必打开 AE。配合本 skill 的 still 先行 + probe 断言，能把「渲染出来的到底对不对」变成可核对流程。
不适合： 不适合：① 纯手工创意剪辑、需要真实素材剪辑/调色/混音的项目（Remotion 是代码渲染路线，剪辑类工作应走别的 skill/工具）；② 无 npm 出网且未预装依赖的环境；③ 一次性、不需要模板化的短动效（走 standalone HTML 更轻）；④ 希望 skill 直接给成片而不写代码的用户——它交付的是项目与渲染流程；⑤ 超大规模批量渲染而不评估算力的场景（成本风险）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload remotion-video.tar.gz
sha256:
Option B · Copy Guide for Agent3d9caacebfc580bf…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3c129f769d.