uttamongithb/editorial-reel-video

コンセプト & エディトリアルリール動画スキル

このスキルは、エージェントにあらゆるテーマ（例：Torオニオンルーティング、ネットワーキング、データベース、システムアーキテクチャ、Git、AI）について、ターゲットのペーシング（例：60秒リール）を厳守しながら、豊かなシーン遷移、発声表現マッピング、プレゼンターカットアウト、連続的な技術アニメーションを備えた、バイラルで高リテンションな技術解説動画を制作する方法を教えます。

---

1. 主要原則 & プロダクション要件

A. 厳格なペーシングと尺の遵守（60秒ルール）

• スクリプトにシーンのタイムスタンプ（例：0～7秒、7～16秒、16～27秒、27～42秒、42～50秒、50～60秒）が指定されている場合、エージェントは正確な目標尺を強制しなければなりません。
• デフォルトのTTS速度は遅すぎることが多い（約110 WPM）。ジェネレーターはFFmpegのatempo（ピッチ保持）を使用してオーディオ再生速度をスケーリングし、バイラルリールの速度（160～180 WPM）に到達させ、指定された正確な60秒の実行時間に固定しなければなりません。

B. エージェントTTS実行と発声表現基準（バイラルリテンションブループリント）

組み込みTTSエンジン（例：Edge-TTS、ElevenLabs、Azure Speech、OpenAI）を搭載したエージェントは、デフォルトの平坦/単調な設定を使用してはなりません。デフォルトのTTS（110～120 WPM）は、最初の2秒以内にショートフォームの視聴者を失います。エージェントはバイラルペーシングパラメータを注入する必要があります：

• 速度とケイデンス：バイラルリール速度（160～180 WPM、またはrate: +15%～+20%）を強制します。
• ピッチと抑揚：質問やフックに表現力豊かなピッチ変化（pitch: +4Hz～+8Hz）を注入します。
• マイクロブレーク：決めゼリフの単語（例：「teen envelopes!」の前）の直前に100～180msの戦術的なポーズ（<break time="180ms"/>）を挿入します。
• 表現タグマッピング：
  • [curious]：速い開始（170 WPM）、疑問形のターミナルリフト（pitch: +8%）、共謀的な興味。
  • [explaining]：落ち着いた（155～165 WPM）、明瞭な発音、技術用語の前に60msのポーズ。
  • [dramatic]：遅いペース（145 WPM）、ピッチをチェストボイスに下げる（-5%）、パンチの効いたスタッカート強調。
  • [confident]：前向きなクリップ（165 WPM）、共鳴するチェストトーン、上向きのターミナルリフト。
  • [excited]：高速（180 WPM）、ピッチ上昇（+10%）、名詞に鋭いリズミカルなパンチ。
  • [playful] / [laughing]：会話調のクリップ（165 WPM）、聞こえる笑い/微笑みの息、生意気なトーン。
• ワードレベルキャプション：TTSからワードタイムスタンプを抽出し、下部チップ上で単語ごとのダンスハイライト（.word-active 黄色グロー #FFE600）を実現します。
• マスターオーディオブループリント：
  • ボーカルはloudnorm=I=-16:TP=-1.5:LRA=7で**-16 LUFS**にレベル調整。
  • インストゥルメンタルBGMは音量**0.15（= -29 LUFS、ボーカルのちょうど13 LU下**）に設定。サイドチェインダッキングはなし（13 LUのギャップがダッキングとなります）。
  • 効果音バス（0.20 gain）：すべてのシーンカットにpop.wav（0.50 gain）、大きなシーン展開の0.3秒前にriser.wav（0.28 gain）、UI要素着地時にclick.wav（0.40 gain）、内容表示時にchime.wav（0.38 gain）、CTAにnotify.wav（0.35 gain）。
  • マスターエクスポート：-14 LUFS integrated、True Peak <= -1.0 dBTP。
  • 完全なSSMLスニペットとエンジン固有の設定については、references/voice_audio_and_cutout_guide.mdを参照してください。

C. プレゼンターカットアウトアーキテクチャ（アンカー5）

すべてのシーンには、右下に固定された（top: 63.4%、右からx: 20.7%、フレームエッジで腰から切り抜かれ、チップの下に位置する）表現力豊かなプレゼンターキャラクターカットアウトが表示されます。ポーズは発声表現タグに直接マッピングされます：

• [curious] ➔ p1_shrug.png（手のひらを上げ、目を見開き、興奮した笑顔）
• [frustrated] ➔ p2_facepalm.png（手を額に当て、しかめ面）
• [confident] ➔ p3_present.png（腕を大きく広げ、ターザンポーズ、誇らしげな笑顔）
• [explaining] ➔ p4_chin.png（あごに手を当て、狡猾な半分笑顔、教えるポーズ）
• [analogy] / [recalling] ➔ p5_memory.png（頭をかく、小さな「ああ！」）
• [excited] / [numbers] ➔ p6_thumbs.png（大きなサムズアップ、大喜びの笑顔）
• [playful] / [laughing] / [cta] ➔ p7_cta.png（視聴者を指さす、生意気な笑顔）
• [dramatic] / [look] ➔ p8_point.png（オフスクリーンに直接指をさす）
• [revelation] ➔ p9_idea.png（電球のように指を立て、目を見開く）
• 完全な画像生成プロンプトとアルファマット処理の手順については、references/voice_audio_and_cutout_guide.mdを参照してください。

D. 動的シーン遷移（堅苦しいカットなし）

すべてのシーン遷移はアクティブなモーション遷移を使用する必要があります：

• 斜め二重バンドワイプ（wipe.html）：特徴的な-11度の角度をつけたスイープで、到着シーンの背景と120pxのアクセントエッジストライプが現れ、水平方向が交互に変わります（flip: 0 vs flip: 1）。
• カメラプッシュイン：ネットワークノードやアーキテクチャレイヤーへのズーム遷移（scale: 0.85 -> 1.0）。
• 端末グリッチフラッシュ：コード/端末環境に入るときの素早いクロマチックフラッシュ。
• 完全なジオメトリとGSAPタイムライン仕様については、references/v7_layout_and_transitions_guide.mdを参照してください。

E. 継続的なトピック固有アニメーション

静的な図を決して表示しないでください。すべてのビジュアルコンポーネントは、継続的で反応的な動きを特徴としなければなりません：

• パケットルーティングとレイヤー剥離：Torやネットワーキングの解説動画では、アニメーション化されたパケットがノードを物理的に通過し、進行に応じて暗号化レイヤー（緑のガードシェル、黄色のミドルシェル、赤のエグジットシェル）を剥がしていく様子を表示します。
• 反応的ノードライティング：ノードはパケットが通過するにつれて光り、脈動し、ステータスバッジ（WAITING → ACTIVE → DECRYPTED）を切り替えます。
• インタラクティブな端末ウィンドウ：ライブタイピングによるコマンド実行、リアルタイムサーキットログ、点滅するブロックカーソル。

F. スイス編集タイポグラフィシステム

• クリーンなマージンで厳密に左揃え。
• 3層の階層：ワイドトラッキングのキッカー（#）、巨大な積み上げ見出し、高コントラストの長方形キーワードバッジピル（[...]）。
• マスクされたスライドアップアニメーション（overflow: hidden）。
• 花柄の装飾は一切なし。クリーンでミニマルなトップテクニカルヘッダーバー。

---

2. クイックスタート：音声スクリプトから動画へ

ユーザーが以下のように表現をフォーマットしたスクリプトを提供した場合：

[HOOK — 0～7秒 | 好奇心＋神秘]
[curious] 「ねえ、Torブラウザがどうやって君の身元を隠しているか考えたことある？ ウェブサイトを開くけど、君のリクエストは直接サイトには届かないんだ！」

[ROUTE SELECTION — 7～16秒 | 興奮＋説明]
[explaining] 「代わりにTorは、自分のネットワークから3台のコンピュータを選ぶんだ。Guardノード、Middleノード、そしてExitノードだよ。そしてこの3つが合わさって、君の秘密のルートができるんだ！」

エージェントは以下のパイプラインを実行します：

# 1. セクションを解析し、表現を抽出し、プレゼンターポーズをマッピング
python scripts/process_vo.py

# 2. 7つの法則に対してデザインを検証し、トークンを書き出す
python scripts/prepare.py

# 3. シーンをアセンブルし、マスターindex.htmlをコンパイル
python scripts/build_index.py

# 4. 30 FPSで決定論的フレームをレンダリング
python scripts/render_video.py

# 5. VO（-16 LUFS）とBGM（-29 LUFS）＆SFXをミックスし、多重化
python scripts/mix_audio.py
python scripts/qc.py

---

3. V7 プロダクションアーキテクチャ：レイアウトと遷移

このスキルは、プロダクションで実績のあるv7 リールパイプライン（PARAMS.json -> prepare.py -> new_scene.py -> build_index.py -> mix_audio.py -> qc.py）を採用しています：

A. レイアウトとモーションの7つの法則

1. 単一アンカーグリッド、下部固定：
   • アンカー1（キッカー）：カテゴリ/コンテキストタグ、Y = 0.0667、アクセントダッシュ<i></i>付き。
   • アンカー2（ヒーロー）：Antonフォント、インパクトのある凝縮ディスプレイワード（1～3語）、Y = 0.1006。
   • アンカー3（プルーフボディ）：動的プルーフカード（A: card-led）、走行距離計（B: stat-led）、または2行ステートメント（C: type-led）、Y = 0.3010。
   • アンカー4（チップ）：発話文カプセル、Y = 0.5875、アクセントドット<b></b>付き。シーン間で移動しない。
   • アンカー5（プレゼンター）：フレームエッジで切り抜かれたキャラクター、Y = 0.6340、適応型ハローグロー（#sX-glow）付き。シーン間で移動しない。
2. ヒーローは単語、チップは行、カードは詳細：
   • ヒーロー：1～3語（Anton、フレーム幅の17～25%、行送り0.88）。
   • チップ：3～6語（モバイル視聴者が読む行）。
   • カード：具体的な証拠（ファイルリスト、キーワード差分、端末、アップロード進行状況、スコアメーター）。
3. 6フィールドカラーサイクル：
   • accent → ground → ink → secondary → tertiary → quaternary。連続する2つのシーンで背景を共有してはなりません。
4. 装飾ではなく証拠：
   • すべてのカードは実際の証拠（4～6行、またはカードの55%以上を占めるモックアップ）を表示しなければなりません。証拠がない場合は、type-led（アンカー3C）を使用し、カードは省略します。
5. フレーム0はポスター（data-cover="1"）：
   • シーン1はt = 0.0sで構成：キッカー、ヒーロー、カード、プレゼンターがすでに表示されている。チップは0.65sで着地。空のイントロフレームはゼロ。
6. トランスフォームのみのモーションと早期着地：
   • エントランスは各ビートの最初の3分の1（0.24s～0.34s、power3.out）で着地。テキストコンテンツやinnerHTMLをトゥイーンしないこと。
   • 長いシーンでは、視覚的な活気を維持するために、微妙な連続ドリフト（tl.to("#sX-hero", { y: -14, duration: 0.7 })）を特徴とします。
7. 区切りとしての音：
   • 手続き型SFX（すべてのカットでpop、UI行でclick/key、表示でchime、CTAでnotify）。**-14 LUFSおよび<= -1 dBTP**にマスタリング。

B. 二重バンド斜めワイプ遷移（wipe.html）

• ジオメトリ：-11degに歪んだ二重バンドの角度スイープ（transform: skewX(-11deg)）。
• 構造：#w-main（到着シーンの背景色）+ #w-edge（120pxアクセントストライプ）。
• 方向の交互：各シーンで水平反転（flip: 0 左から右、flip: 1 右から左）。
• スケジューリング：build_index.pyによって各カットの0.36s前に自動発火され、継続時間はシーンの長さに合わせて適応的にスケーリングされます（0.34s～0.62s）。

---

4. リファレンスとドキュメント

• references/voice_audio_and_cutout_guide.md：表現のための発声指示、マスターLUFSターゲット、BGMミキシング、9ポーズのプレゼンターカットアウトシステム。
• references/v7_layout_and_transitions_guide.md：完全な数学的レイアウト仕様、トークン導出式、斜めワイプ遷移のメカニズム。
• references/animation_and_transitions_guide.md：遷移物理カタログ、レイヤー剥離パケットレシピ、オーディオテンポスケーリングルール。
• references/design_system.md：正確なCSS色、フォント、行送り、セーフゾーン。
• references/concept_animation_guide.md：Tor、データベース、AI、Git、ネットワーキング、システムデザインのアニメーションの設計方法。