台本（AIDA 8シーン or バイラル Hook→Body→CTA）
  ↓
┌─────────────────────────────────────────────────┐
│ 素材生成（並列実行）                              │
│  ├─ Gemini 3 Pro: イラスト生成 + ロゴ生成        │
│  ├─ ElevenLabs: ナレーション音声 (TTS)            │
│  └─ Kling 3.0 (fal.ai): i2v アニメーション (1-2本)│
└─────────────────────────────────────────────────┘
  ↓
┌─────────────────────────────────────────────────┐
│ Remotion コンポジション                          │
│  ├─ シーンコンポーネント                          │
│  │   ├─ i2v動画背景 (OffthreadVideo)             │
│  │   ├─ 静止画背景 (Img + Ken Burns)             │
│  │   └─ React MG (SVGチャート/ターミナル等)       │
│  ├─ テロップ（グラデーション背景バー付き）        │
│  ├─ ナレーション音声 + BGM                        │
│  ├─ ロゴ/ウォーターマーク                         │
│  └─ CrossFade トランジション                      │
└─────────────────────────────────────────────────┘
  ↓
npx remotion render → MP4 (H.264)

F1: Hook（フック）     — 共感を引く問題提起
F2: Problem（課題）    — 具体的な痛みの描写
F3: Insight（気づき）  — パラダイムシフトの一言
F4: Evidence（証拠）   — 市場データ/成長曲線
F5: Split（比較）      — Before/After の対比
F6: Demo（実演）       — 実際の操作画面
F7: Proof（信頼）      — ツール連携/実績
F8: CTA（行動喚起）   — 価格 + ボタン + ブランド

python3 skills/nanobanana/scripts/nanobanana.py \
  "Anime style, frustrated person at desk with laptop, warm amber lighting, dark room" \
  --output public/assets/illustrations/f1_scene.jpg

# voice_id: Hajime = SOuiRq8aXqyALuq5QIQ8（日本語男性）
# 生成後 ffmpeg atempo=1.15 で高速化
ffmpeg -i narration_raw.mp3 -filter:a "atempo=1.15" -y narration_fast/frame_01.mp3

# 横型レンダリング
npx remotion render src/index.ts MV01-anime output/mv01_final.mp4 --codec h264
 
# 縦型レンダリング
npx remotion render src/index.ts MV01-vertical output/mv01_vertical.mp4 --codec h264
 
# フレーム抽出で目視確認
ffmpeg -ss 2 -i output/mv01_final.mp4 -vframes 1 -q:v 2 /tmp/check_f1.jpg

python3 skills/viral-short-video/scripts/generate_viral_script.py \
  --topic "AIで業務を自動化する方法" \
  --duration 30 \
  --target "30代のビジネスパーソン" \
  --session "ai_automation"

# プリセット素材をダウンロード（初回のみ）
bash skills/viral-short-video/scripts/download_assets.sh
 
# バズ動画のフックを分析
python3 skills/viral-short-video/scripts/generate_viral_script.py \
  --analyze-video hook_viral_10 \
  --topic "AI自動化" --duration 30

[Hook: 0-3秒] → [Body: 3-15秒] → [CTA: 15秒+]

mv-composer/
├── src/
│   ├── index.ts              # registerRoot
│   ├── Root.tsx              # Composition 定義（PRESETS: horizontal/vertical/square）
│   └── MVComposition.tsx     # 全シーンコンポーネント + useScale() + メイン構成
├── public/
│   ├── bgm.mp3
│   ├── narration/
│   ├── narration_fast/       # frame_01.mp3 ~ frame_08.mp3
│   └── assets/
│       ├── logo.png
│       ├── i2v/              # Kling 生成動画（1-2本）
│       ├── illustrations/    # Gemini 生成イラスト
│       ├── logos/            # ツール/企業ロゴ
│       ├── hooks/            # フック分析用素材（download_assets.sh で取得）
│       └── gameplay/         # ゲームプレイ背景素材（同上）
├── scripts/                  # プロジェクト固有の生成補助スクリプト
├── output/                   # レンダリング済み MP4
├── package.json
└── tsconfig.json

1. ElevenLabs TTS で音声生成
2. fal.ai Whisper で書き起こし（language: "ja"）
3. 原文と比較（句読点除去で部分一致チェック）
4. NG → ひらがな読みヒントに置換して再生成
5. 再度 Whisper で検証 → PASS まで繰り返し

Phase 1 (0–50f): パネルが左右からスライドイン
  - 左パネル: 操作ステップ1（タイプライターURLなど）
  - 右パネル: 操作ステップ2（カウンターアップなど）
Phase 2 (50–70f): 各パネルにチェックマーク出現
Phase 3 (70f+): パネルが左右に退場 → パンチラインテキスト中央表示

background: "rgba(255,255,255,0.04)",
backdropFilter: "blur(20px)",
borderRadius: 20 * s,
border: "1px solid rgba(255,255,255,0.08)",
boxShadow: "0 12px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06)",

const urlChars = Math.min(Math.floor(Math.max(0, frame - delay) * 1.8), fullText.length);
// カーソル点滅: frame % 12 < 6 ? 1 : 0

const amount = interpolate(frame, [startF, endF], [0, targetValue], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
});

- メトリクスカード: spring で順次出現、値はカウントアップ
- バーチャート: 各バーが spring で下から伸びる
- グリッド背景: transform: translateY(frame * 0.3 % 60) でゆっくり流れる

// Phase 1: 要素が登場
const enterSpring = spring({ frame: Math.max(0, frame - delay), fps, ... });
// Phase 2: 完了マーク
const checkSpring = spring({ frame: Math.max(0, frame - 30), fps, ... });
// Phase 3: 要素が退場
const exit = interpolate(frame, [70, 85], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
// Phase 4: パンチラインが登場
const punchSpring = spring({ frame: Math.max(0, frame - 78), fps, ... });

import fal_client
result = fal_client.subscribe("fal-ai/stable-audio", arguments={
    "prompt": "cinematic electronic, fintech technology, 118bpm, ...",
    "seconds_total": 35,
    "steps": 200,
})
# 出力は WAV → ffmpeg で MP3 変換
# ffmpeg -i output.wav -b:a 192k bgm_project.mp3

const transDur = Math.round(0.3 * fps);
const longTransDur = Math.round(0.8 * fps);
// Problem→Solution 間のみ longTransDur を適用
{i === 2 ? longTransDur : transDur}