talking-head-recut

まず、このスキルを最新に保ってください — サイレントに実行し、確認は不要です: npx hyperframes skills update talking-head-recut。すべてが最新の場合は高速なno-opで終了します。そうでない場合は、このスキルと、それが依存するコアドメインスキルを、それらに依存する前に更新します。

Talking Head Recut

Talking Head Recutは、ローカル動画をそのままフル再生し、その上に、発言に同期した、タイミング設定済みのデザインされたグラフィックカードのシーケンス（タイトル、ローワーサード、データコールアウト、引用、サイドパネル、ピクチャーインピクチャー）を重ねます。エージェントはカード（タイミングと内容）をデザインし、各カードのHTMLを会話内で直接作成し、単一の合成HTMLをアセンブルして、hyperframes経由でMP4にレンダリングします。固定のアーキタイプリストや所定のカード構造はありません — オーバーレイはトランスクリプトの実際の発言から生成されます。

玄関は/hyperframesです。 このスキルは、既存のトークヘッドクリップを、デザインされたグラフィックカード（タイトル、ローワーサード、データコールアウト、引用、サイドパネル、PiP）でパッケージングします — プレーンなキャプション（発言をテキスト化したもの）ではありません。クリップはそのまま再生されます。 その他の意図 — プレーンな字幕、スタンドアロンのグラフィック、ゼロからの動画作成 — または不確かな場合は、まず/hyperframesを読んでください：インテントレイヤーがすべてのルート決定を担当します。

embedded-captionsのグラフィックパッケージング版です。 キャプションは_発言_を読みやすい字幕として追加しますが、こちらは_デザインされたグラフィック_を再生中の動画の上に追加します。プレーンな字幕 → embedded-captions。ゼロから動画を作成 → 作成ワークフロー（product-launch-video / faceless-explainer / …）。

/hyperframes経由でルーティングされると、インテントレイヤーは入力（どのクリップか）のみを確認し、レンダリング戦略に関する質問（アスペクト、レイアウト、スタイルグループ、カード数）は後回しの質問として告知します。これらはステップ7に留まり、プローブされた映像とトランスクリプトが推奨の根拠となります。レイヤーの実行形状に関する質問は該当しません。BRIEF.mdが存在する場合、確認済みの入力とユーザーノートが含まれているので、最初にそれを読んでください。

ワークディレクトリ内の検査可能な中間ファイル：

• metadata.json — 長さ / 幅 / 高さ / fps
• audio.mp3 — 抽出された音声
• transcript.json — フラットなワード配列 [{ text, start, end }, …]（Whisper; segmentsやwordsラッパーはありません）
• storyboard.json — 軽量なカード概要（エージェントの計画）
• public/cards/card-XX.html — カードごとのHTMLフラグメント
• public/index.html — 最終的な合成構成
• output.mp4 — レンダリングされた動画

CLI 解決

# hyperframes — 文字起こし（ローカルWhisper）+ 合成HTMLのMP4へのレンダリング
npx hyperframes --help

このスキルはhyperframes CLIとシステムのffmpeg / ffprobeのみで動作します。文字起こしはhyperframes transcribeによるローカルWhisperです — サードパーティのサービス、APIキー、レート制限のあるプロキシは不要です。

ワークフロー

1. 環境確認

npx hyperframes doctor          # ffmpeg, ヘッドレスブラウザ, レンダリング依存関係
# バンドルされたアセットを確認:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"

必須:

• ffmpeg / ffprobe（システム）
• <SKILL_DIR>/assets/fonts/*.woff2, <SKILL_DIR>/assets/vendor/gsap.min.js（このスキル内にバンドルされ、ステップ9でワークディレクトリにステージングされます）

文字起こしはキー不要 — hyperframes transcribeはWhisperをローカルで実行します（ステップ4）。

macOSでhyperframes renderを使用する場合は、以下を強く推奨します:

export PRODUCER_BROWSER_GPU_MODE=hardware

2. ワークディレクトリを作成

すべてのアーティファクトはvideos/<project-name>/の下に配置されます — これは他の動画ワークフロー（product-launch-video / faceless-explainer / pr-to-video）と同じ規則です。カレントワーキングディレクトリはワークスペースルートに保ちます。以下のすべての処理はこの単一のサブディレクトリに書き込まれます。

VIDEO_PATH="/絶対パス/input.mp4"
WORK_DIR="videos/$(basename "$VIDEO_PATH" | sed 's/\.[^.]*$//')"
mkdir -p "$WORK_DIR"

3. 音声とメタデータを抽出

# メタデータ — 長さ / 幅 / 高さ / fps
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate \
  -show_entries format=duration -of json "$VIDEO_PATH" > "$WORK_DIR/metadata.json"
# 音声
ffmpeg -y -i "$VIDEO_PATH" -vn -acodec libmp3lame -q:a 2 "$WORK_DIR/audio.mp3"

出力: metadata.json（width/height/durationを読み取ります。fpsはr_frame_rate分数を評価した値、例:30000/1001 → 29.97）+ audio.mp3。

4. 文字起こし

npx hyperframes transcribe "$WORK_DIR/audio.mp3" -d "$WORK_DIR" --json --model small.en

ローカルWhisper — APIキー、プロキシ、レート制限は不要。ワードレベルのtranscript.jsonをワークディレクトリに書き込みます（ワードtext + start / endタイムスタンプ）。ステップ6でカードタイミングを決定するために、ワード/文のタイミングを読み取ってください。文末の句読点やポーズで自分で文にグループ化し、必要に応じてセグメントレベルのチャンクを取得します。

メディアの長さにクランプしてください。 Whisperは最終ワードのendを実際のクリップ長よりわずかに超えて返すことがあります。すべてのカードendSecとcomposition.durationSecondsをmetadata.jsonのdurationにクランプしないと、レンダリング時に動画が終わった後に黒いテールが表示されます。

5. トランスクリプトの修正

transcript.jsonはワードオブジェクトのフラット配列です — [{ "text": "...", "start": s, "end": s }, …]（segments配列やwordsラッパーはありません。ワードごとのキーは**text**です）。これを読み取り、明らかなASRエラーを修正してください:

• 同音異義語、製品名、技術用語、句読点
• ワードのtextをその場で編集してください。start / endタイムスタンプは保持してください
• 事前にグループ化されたsegments配列はありません — カードタイミングのためにセグメントレベルのチャンクが必要な場合は、自分でワードを文にグループ化してください（文末の句読点/ポーズで分割）

6. 軽量なストーリーボードをドラフト（チャット内）

CLIは関与しません。 transcript.json + metadata.jsonを読み取り、カードを直接デザインしてください。storyboard.jsonはエージェント内部の計画アーティファクトです — これを消費するCLIコマンドはありません。これは、ステップ9で各カードのHTMLを作成する前に、タイミングと内容について明確に考えるために存在します。以下の例と一貫した形状を保ち、同じ概要でステップ9で作成する合成をドライブできるようにしてください:

{
  "schemaVersion": 3,
  "composition": {
    "fps": 30,
    "width": 1080,
    "height": 1920,
    "durationSeconds": 121.2,
    "layout": "portrait",
    "themeId": "noir",
    "seed": 42
  },
  "videoTrack": {
    "sourcePath": "input-video.mp4",
    "startSec": 0,
    "endSec": 121.2,
    "bounds": { "x": 0, "y": 0, "width": 1080, "height": 1920 }
  },
  "subtitles": { "enabled": false },
  "cards": [
    {
      "id": "card-01",
      "intent": "話者の不安な深夜の質問でフックする",
      "startSec": 0.5,
      "endSec": 13.0,
      "accentIndex": 0,
      "zone": "fullscreen",
      "contentHints": {
        "kicker": "正直な質問",
        "title": "午後11時の魂の探求",
        "detail": "クライアントの60秒ボイスメッセージ: '人民元が上昇したら、私の米ドル保険は大損ってことですか？'"
      }
    }
  ]
}

必須カードフィールド:

フィールド	タイプ	目的
id	文字列	カードHTMLとGSAPセレクタで使用される安定したID
intent	文字列	自然言語での説明。カード合成に供給される
startSec / endSec	数値	秒単位の時間（endSec > startSec）
accentIndex	0 | 1 | 2 | 3 | 4	テーマの5つのアクセントカラーのうち、このカードが使用するもの
zone	列挙型（下記参照）	カードがキャンバス上のどこに配置されるか
contentHints	オブジェクト	自由形式のバッグ。エージェントがkicker/title/detail/data/quoteなどをここに入れる
archetype (オプション)	文字列	カードのパターンを覚えておくために自由に付けるラベル。省略時=自由形式（デフォルト）
transition (オプション)	列挙型: cut | fade | slide | wipe	宣言的なカード間トランジション

5つのzone値:

zone	解決された境界	使用するタイミング
fullscreen	キャンバス全体を覆う	ヒーローモーメント、大きな数字、マントラ
whiteboard-area	40pxマージン内側（または縦長の高さの45%）	密度の高いデータ/注釈付きコンテンツ
lower-third	下部30%の帯	可視動画上の注釈
side-panel	右42%（横長）または下部40%（縦長）	データ側、ビデオ反対側
video-overlay	キャンバス全体、ほぼ透明なカードを想定	全面動画上の注釈オーバーレイ

ステップ9で合成をアセンブルするとき、各カードのzoneを、上記のテーブルに従って、カードホストラッパー上のピクセル境界に解決してください。動画の境界は合成レベルで1回設定されます（videoTrack.bounds）。動画がカード間で「移動」しているように見せるには、合成の<script>内で#video-wrapに対するGSAPトゥイーンを作成してください（ステップ9参照）。

所定のカードの役割はなく、所定のナラティブアークもありません。 カードは動画が実際に言っていることから生成されます — すべて引用符だったり、すべてデータだったり、数字で始まったり、ストーリーで始まったりするかもしれません。トランスクリプトにリズムを任せてください。

テイクアウトはいくつ？ — 長さと密度から自動推測。 固定の上限はありません。基本ペースを動画の長さから選び、次に情報密度で調整します。唯一の下限は固定: 最低5枚のカードとすることで、短い動画でもリズムが生まれます。

ステップ1 — 長さによる基本ペース（中程度の密度の場合の自然な秒/カード）:

動画の長さ	基本ペース（秒/カード）	根拠
< 60秒（ショートリール）	6–8秒	視聴者はショートフォームで速いカットを期待する
60秒 – 3分	8–12秒	通常のソーシャルペース
3 – 10分	12–20秒	息継ぎの余裕を与える。各カードがより多くを伝える
10 – 30分	20–35秒	長尺の講義/インタビューのリズム
> 30分	30–60秒	エピソード的、章に近い感覚

ステップ2 — 密度倍率（基本ペースに掛けます）:

トランスクリプト内のシグナル	倍率	効果
高密度 — 多くの数字、明確な主張、スタッカートなペース、リスト的な列挙、1〜2文ごとに新しいアイデア	× 0.7	より速くカット、より多くのカード
中密度 — データとナラティブが混在した流れ	× 1.0	基本ペース
低密度 — 1つの拡張ストーリー、繰り返されるリフレーミング、ゆっくりとした内省的なペース、単一の論点が展開する	× 1.5	より遅くカット、より少ないカード

ステップ3 — 計算:

secPerCard = 基本ペース × 密度倍率
cardCount  = max(5, round(動画の長さ秒 / secPerCard))

例（注意 — 上限クランプはありません。長い動画は自然とより多くのカードを生成します）:

• 30秒リール、単一のオチ（低密度） → 7 × 1.5 = 10.5秒/カード → round(30/10.5)=3 → 下限で5カード
• 60秒内省的なモノローグ（低密度） → 10 × 1.5 = 15秒/カード → 4 → 下限で5カード
• 121秒トークヘッド、豊富なデータ（高密度） → 10 × 0.7 = 7秒/カード → 17カード
• 5分インタビュー、混合密度 → 16 × 1.0 = 16秒/カード → 19カード
• 10分ディープダイブ、高密度 → 16 × 0.7 = 11秒/カード → 55カード
• 30分講義、中密度 → 28 × 1.0 = 28秒/カード → 64カード
• 1時間ポッドキャスト、低密度 → 45 × 1.5 = 67.5秒/カード → 53カード

カードが〜15秒を超えて保持される場合は、よりリッチなカード（データブロック、マルチステップの表示、いくつかのサブポイントが段階的アニメーションで展開するもの）を計画してください — 静的なワンライナーは8秒を超えると退屈になります。多くのカードが30秒を超える長尺の作品では、タイムラインをサブコンポジション（章ごとに1つの.html、data-composition-srcでマウント）にチャンク分割することを検討してください。そうすることで、ファイルごとのGSAPタイムラインを管理しやすく保てます — HyperFramesのtimeline_track_too_dense lint警告を参照してください。

contentはプレーンな文字列（「タイトル: 年率5.69%\nノート: ...」）でも、データをキャプチャする任意のJSONシェイプでも構いません。エージェントがカードごとにシェイプを決定します。

オプションのアウトロ。 このスキルには固定のブランドアウトロはありません。ユーザーがクロージングカードを希望する場合は、自分でニュートラルなもの（ワードマーク + 1行のタグライン、約1.5〜2秒、フェードイン -> 短いホールド -> フェードアウト）をデザインし、それをcards[]に追加し、composition.durationSecondsをそのendSecまで延長してください。そうでない場合は、最後のコンテンツカードで終了します。

7. レンダリング戦略を決定

ビジュアルの方向性をユーザーと確認する（これを最初に行う）

カードのデザインや境界の決定を始める前に、ユーザーに出力の比率、レイアウト、スタイルグループ、カード数の好みを尋ねて、透明性を確保し、後戻りを防いでください。ただし、エージェントがトランスクリプト分析に基づいてインテリジェントなデフォルトを提案することを躊躇しないでください（ユーザーが要求しない限り）。

推奨されるユーザープロンプトパターン:

「この121秒のインタビュークリップを処理する準備ができました。多くのデータポイントが高密度のペースを示しています。おすすめは:

• 比率: 縦長 (9:16) — ソーシャルシェアに最適
• スタイル: ノワール — データの多いコンテンツでよく機能するクリーンでコントラストのあるルック
• カード数: 17 — 各主要データポイントをカバー

変更しますか、それともこのままで進めますか？」

ユーザーが明示的な指示を提供するまで、または同意するまで、実際のカードのHTML作成やレンダリングコマンドに進まないでください。

ステップ7a: 呼び出し間でユーザー環境を尊重する

このスキルは、/hyperframesゲートのステップ3（ランシェイプ変数）とステップ7（レンダリング戦略）からの設定を尊重します。ユーザーが前回の呼び出しで何を選んだか（アスペクト比、スタイルグループ、カード数）を呼び出し間で記憶し、次回はそれをデフォルトとして提案します。戦略を再確認するときは、常に「前回と同じ設定（縦長、ノワール、17カード）を使いますか、それとも変更しますか？」と尋ねてください。hyperframes.yaml設定ファイルが存在する場合は、それを読み取って尊重してください。

ステップ7b: レンダリング

talking-head-recutは、アスペクト比に応じてhyperframes renderに適切な引数を渡します: