リールキャプション・オーバーレイ

リールキャプション + オーバーレイ

すでにカットされた 9:16 リール（通常 2160x3840、30fps、例えば talking-head-edit の出力）にキャプションとオーバーレイを追加します。すべては、両方のレンダラーが読み取る1つの edit.json（キャプションページとオーバーレイ、フレーム単位）によって駆動されるため、HyperFrames と Remotion のバージョンはフレーム単位で一致します。

SK=~/.claude/skills/reel-captions-overlays
PY=$($SK/scripts/find_python.sh)                          # faster-whisper large-v3 + opencv ($REELKIT_PYTHON, the repo .venv, or python3)
AUDIO_PY=~/.cache/reel-audio/venv/bin/python               # music stage (scripts/setup_audio.sh creates it)
ANA_PY=~/.cache/reel-audio/analysis-venv/bin/python        # reference-style analysis (scripts/setup_audio.sh --analysis)

デフォルトツール: HyperFrames (Apache-2.0, 固定 [email protected])。Remotion (4.0.539) はパリティビルドとして維持されています。Remotion は個人および3人以下の企業では無料ですが、それ以上の企業は商用利用のために有料の Company License (remotion.pro/license) が必要です。HyperFrames にはそのようなライセンス条件はありません。

ワークフロー

1. セットアップ（初回パス）。 $SK/scripts/new_reel.sh <reel.mp4> <workdir> これにより、単語タイムスタンプ（large-v3）を使用した文字起こし、0.5秒ごとの顔検出ボックス (faces_src.json) とショットカット検出 (cuts.txt) が実行され、overlays.example.json が <workdir>/overlays.json にコピーされ、停止します。
2. overlays.json を埋める。 最初に words_raw.json を読んでください。
   • corrections: ブランド名をトークンシーケンスで修正します。例: ["Ackme"] → "Acme", ["re","-motion,"] → "Remotion,", ["Acme","Voice."] → "Acme Voice."。ブランドペアを1つのトークンに結合することで、それらを1つのキャプションページに保持します。 外国語の行は、話されたとおりに正確に保持してください（例: "Même voix, autre langue."）。
   • sansWindows: サンセリフフォントに切り替わる B-roll カットアウェイ、テイクオーバー、promptDemo スパンの [start,end] 秒。キャプションはそこではヘビーなサンセリフ（同じ75%レーン）に切り替わります。
   • overlays: 以下のスタイル仕様と グラフィックス計画 を参照してください。時間は秒単位で、単語のタイミングから取得されます。
   • sponsored: true: 有料またはブランドリールの場合。デモビートルール（以下のスポンサーリール）とベリファイ警告をオンにします。
3. 両方のプロジェクトをビルドする。 $SK/scripts/new_reel.sh <reel.mp4> <workdir> <workdir>/overlays.json
4. レンダリング前に確認する。 cd <workdir>/hyperframes && npx [email protected] snapshot --at 2.5,20,30 --no-end (または remotion/ 内で npx remotion still Reel x.png --frame=N --scale=0.5)
5. レンダリングする。 これらは Chrome を必要とするため、Bash サンドボックスの外で実行してください (dangerouslyDisableSandbox)。サンドボックス内では、Chrome は Mach-port ルックアップで死にます。
   • <workdir>/hyperframes/render.sh <out>_captions_hyperframes.mp4 は、CRF 16、faststart で 1080x1920 のレイアウトを 2160x3840 にスーパーサンプリングしてレンダリングします。
   • <workdir>/remotion/render.sh <out>_captions_remotion.mp4 は、--scale=2、CRF 16、AAC 192k、faststart で同じことを行い、その後 scripts/repair_remotion.py を実行します（後述の「注意点」を参照）。
6. 検証する。 $PY -I $SK/scripts/verify.py <reel.mp4> <out.mp4> <workdir>/edit.json <workdir>/faces_src.json <workdir>/qc <label> (フレーム、破損フレーム、可読性、カードエッジ、CTA オファーに問題があると exit 1 で FAIL を出力します。60秒の4Kリールで約9分かかります)
   • フレーム数と再生時間がソースと一致することを確認します。
   • すべてのフレームを破損（不正なビデオフレームや黒いタイル）についてスキャンします。corrupt_frames は 0 でなければなりません。
   • 5つのキャプションページをスポットチェックします：バンドはページ開始の1フレーム前は空で、開始後2フレームで満たされている必要があります。
   • すべてのオーバーレイ下の顔ボックスのピクセル変化を測定します。これは約0であるべきですが、全画面テイクオーバーと promptDemo カードは意図的に顔を覆うため、これらは顔、破損フレーム、可読性チェックから除外されます。
   • demo_beats (promptDemo オーバーレイ、または "demo": true のオーバーレイ) をリストします。edit.json に sponsored: true があり、デモビートが2つ未満の場合、WARN を出力して warnings に追加します（ハードフェイルではありません。リールを修正するか、レポートで理由を説明してください）。
   • BEFORE/AFTER セパレーター (v7, 警告). すべての promptDemo before → after 行ペアについて before_after を報告します：両方のクリップが共有する単語、編集のギャップ、レンダリングで測定された無音、編集にスイッチバンドとスイッチ SFX (build_edit ba) があるかどうか。これらすべて（ギャップ >= 400 ms、バンド、SFX）なしで単語を繰り返すペアは WARN を出力します：セパレーターなしの繰り返し行は編集のグリッチとして読み取られます (promptDemo 参照)。
   • CTA オファー (v7, ハードチェック). offer を持つ cta は、完全に表示されている必要があり、2.5秒以上、40px 以上（360px 電話で 13+ px）、そして実際に描画されている（そのバンド内のピクセル変化）必要があります。<label>_offer_mobile.jpg に電話サイズで表示されます。確認してください。offer のない CTA を持つスポンサーリールは WARN を受け取ります。
   • 電話サイズでの可読性: 8つのキャプションページを 360px 幅にダウンスケールし、ステムの太さ、テキストの高さ、アウトラインのハロー（グリフの輝度からその周囲のリングを引いたもの）を測定します。下限: ステム >= 4.0px、高さ >= 28px、ハロー >= 130。legibility_ok は true でなければなりません。<label>_mobile.jpg にクロップが表示されます。確認してください。
   • すべてのオーバーレイの中央にある1つの静止画と、同期クロップシートを含むコンタクトシートを書き込みます。報告前に両方を開いてください。
7. 音楽 + SFX（デフォルトステージ; --no-music または MUSIC=0 でスキップ）。 <workdir>/music_plan.json（初回パス時に music_plan.example.json からコピーされます。デフォルトのスタイルプリセット steady-funk-bed を使用します。以下の音楽とサウンドデザインを参照）を埋めてから、 $SK/scripts/music_stage.sh <out_hyperframes.mp4> <workdir> <out>_music.mp4 これにより、BGMと効果音が音声の下にミックスされ、ビデオストリームコピー（再エンコードなし） で、動画の再生時間にトリミングされた音声とともにピクチャーにマルチプレクスされ、<out>_music_mobile.mp4 の電話コピー（MOBILE_OUT= で別の場所に配置）を作成し、music_verify.py を実行します。これにはプランのプリセットに対するスタイルチェックが含まれます。PASS を出力する必要があります。既存の出力を上書きすることは拒否されます（FORCE=1 で許可）。また、文中の音声がその下の音楽よりも6 dB未満である場合も失敗します（レポートの voice_over_music、--min-voice-over-music）。重要なのは、すべてのラインがよく聞こえるかどうかです。BGMは音声の約13 dB下の安定したアンダックドグルーブであるため、セクション平均が合格しても、1つの静かな文が沈み込む可能性があります。上流で、talking-head-edit のスピーチレベリングまたはセグメントごとのゲインで失敗を修正し、BGM全体を下げないでください。典型的な合格インタビューリールでは、最小11.2 dB、中央値14.1 dBと測定されました。<workdir>/qc/music_sections.png を開いてください。初回実行で ~/.cache/reel-audio/venv が作成されます (scripts/setup_audio.sh)。
8. 電話コピー (送信用、音楽ステージをスキップした場合): ffmpeg -i <out.mp4> -vf scale=720:1280:flags=lanczos -c:v libx264 -preset slow -crf 22 -maxrate 2800k -bufsize 5600k -pix_fmt yuv420p -c:a copy -movflags +faststart <out>_mobile.mp4 (60秒で約14-19 MB、25 MB制限未満)。マスタリングされた音声をコピーし、決して再エンコードしないでください：128k での2回目の AAC エンコードにより、あるリールのトゥルーピークが -1.3 から -0.7 dBTP に上昇しました。

スタイル仕様（リファレンスリールから）

以下のすべてのサイズは 1080x1920 のデザインスペース内です（2倍でレンダリング）。共有 CSS は templates/style.css です。

• キャプション (v2: v1 のキャプションは細い白い線で、電話では読みづらかった。より太く、大きく、アウトライン化されたものがデフォルトです。)
  • 1ページあたり1単語、時折2単語：短い機能語は隣接語と結合され、ブランドペアは接着されます。
  • テキストは話されたとおりの大文字小文字と句読点（"content.", "Then"）。決して大文字にしないでください。単語ごとのハイライトはありません：1ページあたり1-2単語ではノイズが増えるだけです。
  • フォント: DM Serif Display (バンドル済み、固定 @fontsource/[email protected]、OFL) 136px、白。キャプションに Instrument Serif レギュラーのような細いセリフに戻さないでください。Instrument Serif は紙または赤背景のカードタイトル用に残します。
  • アウトライン: 単語のストロークコピー (::before と data-t、-webkit-text-stroke: 6px、つまりグリフの外側3px) を 86% のニアブラックで、塗りつぶしの背後に描画するため、文字が細くなりません。シャドウ: 0 0 3px、0 5px 12px、0 14px 34px、すべて暗め。
  • フィット: build_edit.py は templates/fonts/caption_metrics.json からページごとに fs を設定し、ページが 820px を超えないようにします（例: "automatically." は 127px）。フォントが変更された場合は、scripts/caption_metrics.py でメトリクスを再生成してください。
  • 配置: 高さの75%（y=1440）に中央揃えされた1つのレーン。話者の手とマイクの下、かつ下部20%のUIの上に配置されます。クローズアップ時のみ、あご + 6%（最大76% capped）に下がります。典型的な机のセットアップでは、手は55-72%に位置するため、「あごの下」レーン（60%）は手の上に配置されます。
  • アニメーション: 4フレームのポップ（スケール 0.86→1、y 14→0、フェード）が1フレーム早く開始されるため、単語は最初のフレームで表示されます。
  • ページは単語の開始フレームから正確に開始され、次のページまで保持されるか、休止がある場合は単語終了 + 0.2秒まで保持されます。
• B-roll およびテイクオーバーのキャプション: Inter 900 120px、トラッキング -0.03em、同じアウトラインと同じ75%レーン。
• タイトルパンチカード (titleCard、フックフレーズ用)
  • レンガ色 #B23A2E のボックス、810px 幅 (75%)、上端は y=190。
  • 上段: Anton ALL CAPS 118px。その下に、白い Instrument Serif サブタイトル 62px。
  • 下端はフレーム高さの約23%に位置します。これは意図的にリファレンス（上端22-28%）よりも高く設定されています。なぜなら、顔は約26%から始まるためです。
• CTA (cta)
  • 白いイタリックセリフ "Comment" (82px) の上に、Anton キーワード (196px、例: "GUIDE") の赤いボックス。タイトルカードと同じ上部バンド。
  • ボックスはキッカーから3フレーム後にポップインします。
  • オファーライン (offer、スポンサーリール、v7): ブランドのオファーがあごの下の紙カードに表示されます。例: "Use my link for a\nFREE 14-day trial." ブランド自身の表現を使用してください。\n で改行を設定し、ALL-CAPS の単語 ("FREE") は白文字赤背景のボックスになります。"Comment / WORD" がメイン要素のままです；オファーはサポートラインです。build_edit.py は offerF（offerAt から派生、デフォルトは CTA 開始 + 10フレーム）、offerY（CTA ウィンドウ全体の --faces からのあご + 3%、高さの55-60%に維持、約1385pxのキャプションインクの上）、offerFs（Inter が 720px にフィット、最大46px; 40px 未満で警告）を導出します。カードは 780px 幅（x 150-930、右側のUIからクリア）で、-1.5°傾いています。
  • オファーは完全に画面に表示され、2.5秒以上でなければなりません。 リールが話者がCTAを言った直後に終了しすぎている場合は、最後のフレームを保持します：$SK/scripts/hold_end.sh <reel.mp4> <frames> <reel_hold.mp4> はカットをストリームコピーし、その最後のフレームの N 個のエンコードされたコピーをデジタル無音で追加し、音声がサンプル同一でデコードされることを確認します。リールが音楽ビートの直前（cue_at 0 でビート k = k * 60 / bpm）で終了するように N を選択し、CTA end と音楽プランセクション end を新しい長さに設定し、新しい --frames で build_edit を実行します。BGMはホールドの下で再生され、最後のフレームでカットします（例：32フレーム、68.2秒で終了、110 BPM BGMのビート125（68.207秒）の直前；オファーは3.2秒完全に表示）。
• 画面テイクオーバー (takeover、ツールや製品の言及用、1.5-3秒保持)
  • 全画面の深紅 #8E1F17 で、微妙な8x14の薄赤グリッド。
  • 白い角丸の検索ピル（左に虫眼鏡、右にマイクとレンズ）で、太字イタリックのクエリが14フレームかけてタイプオンされます。
  • その下に、ツール名（セリフ128px）、1行の説明、赤い波形、2-3個のチップを含む白い角丸カード。
  • 実際の製品UIを決して偽装しないでください。 テキストのみのニュートラルカードを使用してください。音声はそのまま続きます。
• フローティングカード (floatCard、統計、ヒント、ラベル用; オプションで kicker, width)
  • 紙色 #FBF7F1 のカード、470px 幅、上端は y=200、左または右側。±3-4°回転し、深い影付き。
  • 内容は、オプションのキッカー + 大きなAnton数字 + セリフラベル + スモールキャップス行、またはフラグバリアント： flag: "es" (キッカー + CSSフラグ + 単語) または flag: "us-es" (キッカー "Same voice, different language" + USフラグ → ESフラグ + 単語)。
  • 絵文字フラグはCSSで描画されるため、絵文字フォントに依存しません。
• ステップリスト (steps): 上部（y 150）の紙カードに、赤いキッカーと番号付き行（DM Serif 54px）。各項目には独自の at 時間があり、話者が言ったときにポップインします。現在の番号は赤色で、以前の行は薄くなります。話者が「3つのステップ」、「最初に... 次に」と言ったときに使用します。
• 新旧分割 (split): 上部に2つの傾いたペインが並んで表示され、暗い「Old way」（取り消し線）と赤い「New way」。 新しいペイン...