yuv-video-director

yuv-video-director

YUV.AI 動画の指揮役です。あなた（エージェント）が各ビートに必要なものを判断し、適切なエンジンに振り分け、すべてを1つの HyperFrames コンポジションにまとめ、YUV.AI Neon Phoenixブランドで仕上げ、自己検証して、MP4 にレンダリングします。このスキルはルーターと動作するリファレンス実装を備えています。リファレンスファイルは、そのエンジンを使用するときだけ読み込んでください。

デザインの信頼できる情報源：yuv-design-system スキル（Neon モード — ピンク #FF1464、シアン #00E5FF、リッチブラック／ホワイト、Anton+Inter+JetBrains Mono、ニューラルネットのフェニックスモチーフ）。動画版は frame.md です。references/frame-md.md を参照してください。バンドルされたテンプレート：assets/FRAME.md。プロジェクトルートに配置してください。HyperFrames が読み込みます。

すべてを決める唯一の法則

HyperFrames はヘッドレス Chrome で各フレームにシークし、FFmpeg でレンダリングします（frameIndex = floor(t·fps)、同じ入力なら同じ出力）。そのため、すべてのビジュアルは次の 2 種類のいずれかです。

パターン	実行場所…	エンジン	ルール
ライブシーク可能アダプター	レンダリング中に、各フレームで時刻 t に合わせて駆動	GSAP、Lottie（window.__hfLottie）、Three.js、GSAP プロキシの onUpdate で駆動する canvas	クロック駆動でなければなりません。Date.now()、Math.random()（mulberry32 でシード値を設定）、setTimeout、.play() は使用しないでください
事前レンダリング済みアセット	オフラインでファイルを出力し、クリップとして読み込み	ManimCE（Python→MP4／アルファ）、TTS 音声、背景除去	まずレンダリングし、その後 <video>／アセットクリップとして配置します

シーク可能ならアダプターです。シークできないなら事前レンダリングしてください。 Manim は常に事前レンダリング済みクリップです。独自のレンダラーを持ち、Python で実行されるため、ライブアダプターにはなりません。

各ビートをエンジンに振り分ける

"explain X as a TEASER/promo (FOMO, cliffhanger, fast)"              → references/teaser-explainer.md (the formula)
"explain a concept / math / neural network / algorithm / training"  → ManimCE   (pre-rendered clip — cut into BURSTS for teasers)
"branded motion: logo sting · stat reveal · icon pop · pulse"        → Lottie    (live, lottie-web)
"kinetic captions · titles · reveals · transitions · data callouts"  → GSAP      (live)  ← default
"3D / spatial"                                                       → Three.js  (live)   (Babylon NOT used)
speech → captions                                                    → transcribe + approve webapp (see video-edit skill)
no voiceover provided                                                → TTS (Kokoro: npx hyperframes tts)
brand colors / fonts / motifs                                        → frame.md  (picked up front)

テキストとモーションには GSAP が確実なデフォルトです。デザインされたブランドグラフィックには Lottie、アイデアの説明には Manim を選んでください。

ワークフロー

1. ビートを計画します。 物語の流れと、各ビートに必要なエンジンを決めます。16:9、9:16、または両方を選びます。
2. ブランドを設定します。 プロジェクトのルートに FRAME.md があることを確認します（assets/FRAME.md をコピーします）。色、フォント、モチーフはすべてここから使用し、独自に作り出さないでください。すべての動画に必須のブランド要素が3つあります（references/brand-kit.md と references/cinematic.md を参照）：リビールとエンドカードに実際のフェニックスロゴ（assets/logo-phoenix.png）、実際の注目用 Lottie（生成します — assets/lottie-burst-generator.py）、そしてリンク付きエンドカード（ロゴ＋「LET'S FLY HIGH」＋リンク一式＋CTA）です。ティーザー／ソーシャル向けのテンポについては references/editing.md を、心理的な演出／クリフハンガー／FOMO を狙ったカットについては references/cinematic.md を参照してください。
3. まずアセットのビートを事前レンダリングします（クリップとして使える状態にします）：
   • Manim → references/manim.md ＋ assets/manim-scene-template.py。py -m manim render -qh --fps 30 scene.py SceneName を実行し、MP4 を assets/ にコピーします。
   • 字幕／TTS → video-edit スキルを再利用し（文字起こし → Web アプリで承認 → 同期）、npx hyperframes tts を実行します。
4. ひな形を作成して構成します。 npx hyperframes init <slug> --non-interactive を実行します。index.html を作成します（hyperframes スキルが仕様です）。以下を使用します。
   • シーク可能なニューラルネットフィールドの背景 → assets/neural-net-field.js
   • ブランドに沿った Lottie → references/lottie.md ＋ assets/neural-pulse.json
   • Manim のレンダリング結果を <video class="clip" muted playsinline> のボディクリップとして使用
   • シーンごとに GSAP の登場アニメーションを設定し、各境界にネオンのフラッシュトランジションを入れ、最後のシーンのみフェードアウトさせます
   • ティーザー／ソーシャル向けのテンポ（速いハードカット、躍動感のあるワードスラム、フックのモンタージュ、グリッチ／色収差のアクセント）については → references/editing.md を参照してください。スライドショーではなく、プロデューサーのように編集します。
5. 自己検証（ゲート）を行います。 references/gates.md：npx hyperframes lint（エラー 0 件）→ validate（コンソールエラー 0 件、WCAG AA 準拠）→ レンダリング → タイムライン全体から5フレームを抜き取り確認します。修正して再実行します。Lottie は必ずスクリーンショットで検証してください（Skottie と lottie-web の落とし穴に注意）。
6. レンダリングします。 npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4 を実行します。縦型の場合は、1080×1920 のレイアウトで複製します（video-edit を参照）。

前提条件（最初に確認し、利用できない場合は適切に代替してください）

references/prereqs.md を参照してください。Node 22+、FFmpeg、pip を含む Python 3.11+（Manim／字幕）が必要です。このマシンでは、実際の Python は py → C:\Python313 です（裸の python は Hermes の venv で、pip がありません。使用しないでください）。ManimCE は py -m pip install manim でインストールできます（Tex／MathTex ではなく Text()／MarkupText を使って作成すれば、LaTeX は不要です）。Manim が利用できない場合は、数式のビートを省略するか、インストールを提案してください。動画全体を決して失敗させないでください。

このスキルに含まれるもの（リントとレンダリングが可能なリファレンス実装）

ファイル	内容
assets/FRAME.md	YUV.AI Neon Phoenix の動画フレーム仕様（HeyGen の Coral パックをリブランド）
assets/neural-net-field.js	決定的でシーク可能なニューラルネットのフェニックス・キャンバス背景
assets/neural-pulse.json	手作業で作成した Bodymovin Lottie（Skottie だけでなく、lottie-web でもレンダリング可能）
assets/gen_content_lotties.py	本番品質のコンテンツ用 Lottie 6 種（WhatsApp-collapse、decode-beam、eye-read、ghost-line hero、orb-extract、brain-fire）の生成ツール。透過対応、永続的かつ連続的に表示され、lottie-web で検証済み
assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json	生成済みのコンテンツ用 Lottie 6 種。すぐに配置できます
assets/manim-scene-template.py	ManimCE のシーンテンプレート。ネオンのブランドスタイルで、Text のみを使用（LaTeX なし）
assets/what_is_nn.py	「ニューラルネットワークとは」の ManimCE シーン（ニューロン → ネットワーク → トレーニング、34.5 秒）
assets/Anton-Regular.woff2	ローカルの Anton（レンダラーでは自動解決されないため、@font-face を宣言してください）
references/composition-pattern.md	マルチエンジンの index.html パターン全体（フィールド + Lottie + Manim クリップ + GSAP + フラッシュ）
references/teaser-explainer.md	シネマティックなティーザー解説の構成：コールドオープンのスラム → Manim のバースト → 対決 → FOMO モンタージュ → クリフハンガー。コンテンツに同期した透過 Lottie のビート、seek-modulo の修正、ティーザー音楽のシンセ

関連スキル

hyperframes（コンポジションの仕様。作成時は必ず呼び出してください）、hyperframes-cli、lottie、 video-edit（文字起こし + Web アプリでの承認）、yuv-design-system（ブランド）。このスキルがこれらを連携します。