/remotion-trace

name: remotion-trace
description: "参考動画からプロ品質の Remotion 動画を再現するワークフロースキル。 「参考動画から再現したい」「動画トレース」「PVを作りたい」「Remotion動画を参考動画ベースで作りたい」で発動。"
triggers:
  - 参考動画から再現したい
  - 動画トレース
  - PVを作りたい
  - Remotion動画を作りたい
  - 参考動画ベースで動画作成
  - remotion-trace
  - Remotion

Remotion Video Trace

参考動画からプロ品質の Remotion 動画を再現するためのワークフロースキル。 企業PV制作の実プロジェクト（16イテレーション）で確立した手法を体系化。

トリガーワード

「Remotion動画を作りたい」「PVを作りたい」「参考動画から再現」「動画トレース」

前提条件

• Node.js + Remotion (`mv-composer/` プロジェクト or 新規)
• ffmpeg (フレーム抽出・音声処理)
• yt-dlp (参考動画ダウンロード)

---

Part 1: Reference Research（参考動画リサーチ）

1.1 参考動画ソース

目的に応じてソースを使い分ける:

| ソース | URL | 用途 | |--------|-----|------| | Vimeo Staff Picks | `vimeo.com/channels/staffpicks` | トランジション・カラーグレーディング | | Art of the Title | `artofthetitle.com` | タイトルシーケンス・モーショングラフィックス | | Stash Media | `stashmedia.tv` | CM・プロモ映像のトレンド | | YouTube | 同業種・競合検索 | 企業PV・紹介動画の業界水準把握 | | ゲームトレーラー | Brikk等 | ダイナミックなカット・エフェクト |

1.2 クリップ収集

「このシーンの表現が欲しい」単位で **5-10秒のクリップ** を収集する。動画全体ではなく、特定の演出・トランジションにフォーカス。

# YouTube/Vimeo からクリップ単位でダウンロード
yt-dlp --download-sections "*57-59" -o "data/video_refs/{project}/{id}_%(section_start)s-%(section_end)s.%(ext)s" "https://youtube.com/watch?v={id}"

# Vimeo の場合
yt-dlp --download-sections "*20-30" -o "data/video_refs/{project}/vimeo_{id}_0020-0030.%(ext)s" "https://vimeo.com/{id}"

1.3 ファイル管理

data/video_refs/{project_name}/
├── {videoId}_{startSec}-{endSec}.mp4   # 参考クリップ
├── frames/                              # 抽出フレーム（Part 2で生成）
└── README.md                           # 各クリップの出典・用途メモ

**必ず README.md に出典を記録**:

## {videoId}_{start}-{end}.mp4
- 出典: {会社名} 公式PV (YouTube)
- 用途: 人物紹介のワイプ演出（暗背景→矩形飛散→写真露出）

---

Part 2: Frame Analysis（フレーム分析）

2.1 フレーム抽出

# 参考動画からフレーム抽出（6-10fps推奨）
ffmpeg -i data/video_refs/{project}/clip.mp4 \
  -vf "fps=8" \
  data/video_refs/{project}/frames/clip_%04d.png

# 特定区間のみ抽出する場合
ffmpeg -i clip.mp4 -ss 2.0 -t 3.0 -vf "fps=10" frames/%04d.png

2.2 視覚分析チェックリスト

抽出フレームを Read ツールで開き、以下の観点で分析する:

• [ ] **トランジション手法**: ワイプ/フェード/スケール/clipPath/スライド
• [ ] **タイミング・イージング**: spring/ease-out/linear/ステップ
• [ ] **テキスト表現**: パンチイン/タイプライター/カスケード/スライドイン
• [ ] **背景処理**: 暗転/ブラー/パーティクル/グラデーション/画像overlay
• [ ] **色彩・コントラスト**: ブランドカラー/色温度/明暗バランス
• [ ] **レイアウト**: グリッド/フルブリード/分割/センタリング
• [ ] **BGM同期ポイント**: beat落ちでカット切り替え/テキスト出現

2.3 分析結果の記録

各クリップについて以下を記述:

## clip: {videoId}_{start}-{end}.mp4
### アニメーション分解
- 0.0s: 暗背景 + 白い矩形がランダム配置で飛散
- 0.5s: clipPath inset で左→右に写真がワイプイン
- 1.5s: 写真フル表示 + 左下に名前テロップ（白文字 shadow付き）
- 3.0s: 3ストリップに分割、各ストリップが別アングル
### Remotion実装メモ
- clipPath: `inset(0 ${100 - progress}% 0 0)` で実現可能
- 矩形飛散: position:absolute + ランダム top/left/rotation

2.4 draw.io PNG → React SVGアニメーション化ガイド

draw.io等で作成した図解PNGを、Remotion上のReact SVGアニメーションに変換する手順。

なぜ変換するか

| 観点 | PNG（そのまま） | React SVG | |------|----------------|-----------| | アニメーション | 不可（静止画） | 要素が `spring()` で順番に登場 | | 解像度 | 拡大でぼやける | SVGはどんなサイズでもシャープ | | 微調整 | draw.ioで再編集→再エクスポート | px値やタイミングをコードで即座に制御 | | 2フェーズ遷移 | 不可 | 1シーンで前半/後半で異なる情報を表示可能 |

変換手順

1. **構成要素の分解**: draw.ioの図をノード（ボックス）、矢印（コネクタ）、テキストラベルに分解。各要素の座標・サイズ・色をメモ 2. **Reactコンポーネント化**: 各要素をSVGプリミティブで再実装

   // ノード → rect + text
   <rect x={node.x} y={node.y} width={node.w} height={node.h}
     rx={8} fill={node.color} opacity={nodeOpacity} />
   <text x={node.x + node.w/2} y={node.y + node.h/2}
     textAnchor="middle" dominantBaseline="central"
     fill="#FFF" fontSize={16}>{node.label}</text>

   // 矢印 → path or line
   <line x1={arrow.x1} y1={arrow.y1} x2={arrow.x2} y2={arrow.y2}
     stroke="#666" strokeWidth={2} markerEnd="url(#arrowhead)" />

3. **スタッガードアニメーション付与**: `spring()` で要素を順番に登場させる

   const nodeOpacity = spring({
     frame: frame - index * STAGGER_DELAY,
     fps, config: { damping: 14, mass: 0.6, stiffness: 160 },
   });
   const nodeScale = spring({
     frame: frame - index * STAGGER_DELAY,
     fps, config: { damping: 14, mass: 0.6, stiffness: 160 },
   });
   // style: { opacity: nodeOpacity, transform: `scale(${nodeScale})` }

4. **座標管理**: 矢印のSVG path座標はTypeScript定数で管理し、ノード位置変更時に連動更新

   const NODES = {
     input:   { x: 100, y: 200, w: 180, h: 60, color: '#3B82F6', label: 'Input' },
     process: { x: 400, y: 200, w: 180, h: 60, color: '#10B981', label: 'Process' },
     output:  { x: 700, y: 200, w: 180, h: 60, color: '#F59E0B', label: 'Output' },
   } as const;

チェック

静的PNGが `<Img>` で3秒以上表示されている場合 → 「アニメーション化を検討」フラグを出す。 motion-review スキルの **J3** チェック項目と連動。

---

Part 3: BPM & Audio Analysis（音楽分析）

3.1 BPM解析

# 参考動画から音声抽出
ffmpeg -i reference.mp4 -vn -acodec pcm_s16le ref_audio.wav

# 手動カウント: 10秒間のbeat数を数えて × 6
# または ffmpeg のエネルギー検出で波形を可視化
ffmpeg -i ref_audio.wav -af "showinfo" -f null - 2>&1 | head -50

3.2 Beat-Aligned Duration 設計

BPM = 103 の場合:
1 beat = 60/103 = 0.5825s
5 beats = 2.91s
9 beats = 5.24s

**sectionDurations は必ず beat の整数倍にする**。これにより BGM の拍とシーン切り替えが自然に同期する。

3.3 BGM 生成（fal.ai Stable Audio）

**Stable Audio 2.5**（推奨）: 最大190秒を一発生成可能。ジョイント問題なし。

// fal.ai Stable Audio 2.5（最大190秒）
const result = await fal.subscribe("fal-ai/stable-audio-25/text-to-audio", {
  input: { prompt: "...", seconds_total: 80 },
});
const url = result.data?.audio?.url;

# 末尾フェードアウト（4秒）を適用して mp3 に変換
ffmpeg -y -i raw.wav -af "afade=t=out:st=76:d=4" -q:a 2 bgm_final.mp3

**代替モデル（fal.ai）**: | モデル | API ID | 最大尺 | 用途 | |--------|--------|--------|------| | Stable Audio 2.5 | `fal-ai/stable-audio-25/text-to-audio` | 190秒 | 汎用（推奨） | | Beatoven maestro | `beatoven/music-generation` | 150秒 | ライセンス済み商用BGM | | CassetteAI | `cassetteai/music-generator` | 180秒 | 低コスト高速 | | Stable Audio (旧) | `fal-ai/stable-audio` | 47秒 | **非推奨**（分割+crossfadeが必要） |

**旧方式（47秒制限の場合のみ）**: 複数パートを crossfade で連結

ffmpeg -i part1.mp3 -i part2.mp3 \
  -filter_complex "[0][1]acrossfade=d=2:c1=tri:c2=tri" \
  -y bgm_full.mp3

3.4 ナレーション生