Content & Media Creation · iart-ai/motion-design-skills
remotion-video
This skill should be used when the user asks to "make a video with Remotion", "create a programmatic/data-driven video in React", "render an MP4/GIF from code", "animate with useCurrentFrame/interpolate/spring", "sync video to audio/beats", or "render a templated video per record headlessly". Covers building React compositions and rendering them via CLI or @remotion/renderer.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The theoretical foundation is Remotion's frame determinism: animation is a pure function of the current frame, allowing any frame to be rendered accurately, diffed, and integrated into CI—which is why it dares to render exact frames directly without a 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.
What is happening here: turning "video" into a "replayable function" shifts verification from "watching the rendered footage" to "rendering PNGs of designated frames and inspecting them one by one"—cheap and fast, serving as the premise of the entire verification loop.
The core API surface is condensed into 4 primitives: interpolate (time to value, must clamp), spring (physics-based easing), Sequence/Series (timeline arrangement), and Composition + zod schema (parameterization and editable 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.
Each primitive comes with minimal code and an explicit pitfall (interpolate extrapolates by default, spring does not need duration division, and useCurrentFrame is local inside Sequence). This "primitive + known pitfall" format saves tokens and prevents mistakes better than merely enumerating APIs.
Data-driven workflow is its differentiating selling point: durationInFrames can be computed from props (calculateMetadata), defining data once for multi-output rendering, ideal for "one CSV row/record per video".
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.
It provides the production engineering posture for batch rendering: bundle once with @remotion/bundler in Node and render multiple times with @remotion/renderer ('bundle once, render many'), avoiding rebundling for every record.
Audio and beat synchronization require "detecting offline and baking timestamps into props" because headless rendering lacks a real-time audio clock.
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.
The example uses a BEATS_SEC array and compares frame/fps to implement beat-drop scaling, replacing uncontrollable runtime analysis with deterministic constant tables.
Determinism discipline is written as a checklist of prohibitions: Math.random, Date.now, and timers are forbidden; randomness must use Remotion's 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.
The same section covers font/asset loading discipline: uniformly route through staticFile() and wait with delayRender/continueRender to avoid mid-render font shifts.
The verification loop is intentionally split into two stages to save costs: first render PNGs for the start/middle/end frames to inspect individually, and only encode the full video after confirming accuracy; and always use the "actual production props" rather than 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.
Exact commands are provided (`npx remotion still Promo out/f-start.png --frame=0`, --frame=75, --frame=149) along with the end frame rule (durationInFrames - 1), using `npx remotion compositions` to verify duration/fps and determine the last frame without guessing.
"Renderers can lie, files don't": final deliverables are verified by directly reading encoded MP4 metadata and asserting resolution/fps (implemented via ffprobe in the repo script probe-mp4.sh).
scripts/probe-mp4.sh
# Renders lie; the file doesn't. This reads resolution / codec / fps / duration straight from the
Implementation detail: q(){ ffprobe -v error -select_streams v:0 -show_entries "$1" -of csv=p=0 "$mp4" | head -1; }, followed by assertions against expected values (resolution mismatch fails, fps tolerance ±0.5, non-h264 triggers a warning only). The call example in SKILL.md is `scripts/probe-mp4.sh out/short.mp4 1080x1920 30 # vertical short contract`.
Data-driven/batch tasks include a dedicated intermediate check: run still verification on a representative set of props first, then batch render, avoiding replicating the same layout bug N times.
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.
There is also a lightweight bonus: `npx remotion render Promo out/demo.gif --codec=gif` conveniently produces a README demo GIF (explicitly marked as 'README demo GIF for free').
The reference file completes the engineering aspects: CLI flags, programmatic rendering loops, GLSL/Three.js embedding, and a determinism checklist.
skills/remotion-video/references/api-and-patterns.md
import {bundle} from '@remotion/bundler';
The same file suggests render flags for heavy WebGL: 'Heavy WebGL benefits from `--gl=angle` (or `swangle` for headless servers without a GPU) on the render command.', as well as the still shortcut `renderStill({composition, serveUrl, output, frame})`.
2Core Capabilities
01Author programmatic video (MP4/GIF/WebM) in React, driven frame-by-frame by useCurrentFrame
02Parameterized/data-driven templates: <Composition> + zod schema + defaultProps + calculateMetadata dynamic duration
03Timeline orchestration: <Sequence from durationInFrames> and <Series> (including offset for overlap/crossfade)
04Frame-level determinism verification: precisely render PNGs of any frame (start/middle/end), with the end frame resolved via compositions
05Final video spec assertions (real ffprobe readings + optional expected value validation)
06Audio-visual sync via offline beat detection and baking timestamps into props
07CI/batch rendering: bundle once with @remotion/bundler + render multiple times with @remotion/renderer
08Advanced embedding: GLSL shader backgrounds and Three.js scenes driven by @remotion/three (fetching uTime frame-by-frame for determinism)
3External Dependencies
| 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 引流链接（文档内，非运行时调用） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Execute local script or command: npx remotion … (studio / still / render / compositions): fetch and execute Remotion from npm on demand
- 网络端点: Declare external network access: The shared scripts contain no business API calls; network activity stems from the toolchain: npx fetching remotion and related packages from npm (registry.npmjs.org)
- 本地工作目录: File read/write and artifact output: out/*.mp4, out/*.gif, out/*.webm (rendered videos)
Audit Notes: . Reason: The skill itself consists of prompts and references, but using it inherently executes remotely fetched toolchains and local rendering pipelines—`npx remotion …` (pulling and executing the Remotion CLI from npm to bundle and run project code in a headless browser), @remotion/*, and remote packages like zod/three. This dependency footprint aligns with the grading standard "relies on third-party plugins, images, or remote packages" -> Orange tier. There is no credential access, no environment variable reading, no business APIs, and no bypass/scraping behavior, so it is not Red tier. Trigger condition: Occurs whenever actual video rendering takes place (does not trigger during code writing alone). If the team pins remotion inside local node_modules and renders offline, the attack surface reduces to "local project code execution".
5Second-Pass Verification
- [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.'。两端互指一致。
6Verdict & Scenarios
Best for: Best for: teams looking to integrate video production into code repositories and CI (templated marketing videos, data visualization animations, per-record personalized videos, social shorts); individual developers leveraging React skills to produce version-controlled motion graphics without opening After Effects. Paired with this skill's still-first approach and probe assertions, verifying whether the rendered output is correct becomes an auditable process.
Not for: Not suitable for: ① purely manual creative editing projects requiring live-action footage cutting, color grading, or audio mixing (Remotion is code-rendered; video editing tasks should use other skills/tools); ② environments without outbound npm access and lacking preinstalled dependencies; ③ one-off short animations that do not require templating (standalone HTML is lighter); ④ users expecting final video outputs without writing code—it delivers the project and rendering pipeline; ⑤ massive-scale batch rendering without computing capacity evaluations (cost risk).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload remotion-video.tar.gz
sha256:
Option B · Copy Guide for Agent3d9caacebfc580bf…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3c129f769d.