1仕組みと動作原理

立脚する基盤は Remotion のフレーム決定性です。アニメーションは現在フレームの純粋関数であるため、任意のフレームを正確にレンダリング、diff、CI への統合が可能であり、シーク用ハーネスを設けずに正確なフレームを直接レンダリングできます。

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 をレンダリングして 1 枚ずつ検査する」へと変わり、安価かつ高速な検証ループ全体の前提となります。

コア 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 を網羅するよりもトークン効率が高く、ミスを大幅に抑制できます。

データ駆動は本技術の差別化ポイントです：durationInFrames は props から動的に計算でき（calculateMetadata）、データを一度定義すれば複数出力のレンダリングに対応し、「CSV 1 行／レコード 1 件につき動画 1 本」のユースケースに最適です。

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 によるバンドルを 1 回だけ行い、@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 で待機することを求めています。

コスト削減のため、検証ループは意図的に 2 段階に分割されています。まず開始／中間／終了フレームの PNG をレンダリングして個別に検査し、問題がないことを確認してから動画全体のエンコードを実施します。また、defaultProps ではなく「実際にリリースする props」を使用します。

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 検査を実施した後に一括レンダリングを行うことで、同一のレイアウトバグが 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 フラグ、プログラマティックなレンダリングループ、GLSL/Three.js の埋め込み、決定性チェックリストなど、エンジニアリングの実装面を網羅しています。

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.'）や、still 画像出力のショートカット `renderStill({composition, serveUrl, output, frame})` も記載されています。

2コア機能

01React を使用したプログラムによる動画（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 で 1 回バンドルし、@remotion/renderer で複数回レンダリング

08高度な埋め込み：GLSL シェーダー背景および @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 から Remotion を取得して実行
网络端点: 外部ネットワークアクセスの宣言: 共有スクリプト自体には業務 API 呼び出しはありません。ネットワークアクセスはツールチェーンに起因し、npx が npm（registry.npmjs.org）から remotion および関連パッケージを取得します
本地工作目录: ファイルの読み書きと成果物出力: out/*.mp4、out/*.gif、out/*.webm（完成動画）

監査ノート： 理由：スキル本体はプロンプトとリファレンスで構成されていますが、これを使用する際にはリモートから取得されるツールチェーンおよびローカルのレンダリングチェーン（`npx remotion …` による npm からの Remotion CLI 取得・実行、ヘッドレスブラウザでのプロジェクトコードのバンドルおよび実行、@remotion/* や zod/three などの外部パッケージ）が必ず実行されます。この依存関係は分類基準の「サードパーティのプラグイン、イメージ、リモートパッケージへの依存」に該当するため【オレンジ】に分類されます。認証情報の読み取り、環境変数の読み取り、業務 API の呼び出し、回避／スクレイピング行為は含まれないため【レッド】には該当しません。トリガー条件：実際に動画レンダリングを実行する際に発生します（単なるコード作成のみでは発生しません）。チームがローカルの node_modules に remotion を固定しオフラインでレンダリングする場合、接触面は「プロジェクトコードのローカル実行」に限定されます。

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 画像による先行検査、動画全体のエンコード、完成品の仕様アサーションという順序で実行。

ネイティブなデータ駆動・バッチ処理能力：calculateMetadata による動的デュレーション + zod schema + bundler/renderer の分離により、「1 レコードにつき動画 1 本」のワークフローに最適化。

落とし穴への対策密度が高く手戻りを削減：interpolate の clamp 必須化、Sequence 内フレームの局所性、delayRender によるフォント／アセット待機、オフラインビート検出などを徹底。

明確な納品規約：プロジェクト + 完成動画 + 実際の props による検証 + 最終フレームの算出規則を備え、完了時の 5 項目のチェックリストで順次確認可能。

reference ファイルがバッチ処理ループ、Three.js/GLSL、GL バックエンドフラグなどのエンジニアリング詳細を網羅し、スキルを「チュートリアル」から「実務納品可能」なレベルへ引き上げ。

最適な用途： 適した用途：動画制作をコードリポジトリや CI に組み込む必要があるチーム（テンプレート化されたマーケティング動画、データ可視化アニメーション、レコードごとに生成されるパーソナライズ動画、ソーシャルショート動画）；After Effects を起動することなく、React のスキルセットでバージョン管理可能なモーショングラフィックスを制作したい個人開発者。本スキルの still 先行検証とプローブによるアサーションを組み合わせることで、「正しくレンダリングされているか」を確実に監査可能なプロセスへと変換できます。

不向きな用途： 適さない用途：① 実写素材の編集、カラーグレーディング、MA などの手作業によるクリエイティブなカット編集が必要なプロジェクト（Remotion はコードレンダリング指向のため、動画編集タスクには別のスキルやツールを使用すべきです）；② npm による外部ネットワークアクセスがなく依存関係がプリインストールされていない環境；③ テンプレート化を必要としない単発の短いアニメーション（スタンドアロン HTML の方が軽量）；④ コードを書かずに完成動画のみを求めるユーザー（本スキルはプロジェクトとレンダリングパイプラインを納品対象とします）；⑤ コンピューティングリソースを見積もらずに行う超大規模バッチレンダリング（コストリスクの観点から）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload remotion-video.tar.gz

sha256: 3d9caacebfc580bf…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3c129f769d.