最初に、このスキルを最新に保ってください — 確認せずに実行:
npx hyperframes skills update talking-head-recut。すべてが最新の場合は高速なno-opですが、依存するコアドメインスキルを信頼する前に、このスキルとそれらを更新します。
トークヘッド リカット は何をしますか？
Talking Head Recutは、ローカル動画をフル再生し、発言に同期した、タイミングが調整されたデザイン性の高いグラフィックカード（タイトル、ローワーサード、データコールアウト、引用、サイドパネル、ピクチャーインピクチャー）のシーケンスをその上に重ねます。エージェントはカード（タイミングと内容）を設計し、各カードのHTMLを会話内で直接記述し、単一の合成HTMLを組み立て、hyperframesを介してMP4にレンダリングします。固定されたアーキタイプリストや所定のカード構造はありません — オーバーレイはトランスクリプトが実際に言っていることから生成されます。
構築する前にルートを確認してください。 このスキルは、既存のトークヘッドクリップを、デザイン性の高いグラフィックカード（タイトル、ローワーサード、データコールアウト、引用、サイドパネル、PiP）でパッケージ化します。ユーザーがプレーンなキャプション/字幕（話し言葉をテキストとして）を希望する場合は→
/embedded-captions。1つの短いナレーションなし要素（1つのロゴスティング/ローワーサード）の場合は→/motion-graphics。クリップは変更されずに再生されます — タイミング再調整、色調補正、フレーム再構成、順序変更、またはオーディオはNLE編集であり、範囲外です。URL/トピック/PRから構築する場合は→ 作成ワークフロー。オーバーレイとキャプションの違いが不明な場合は？/hyperframesを先に読んでください。
embedded-captionsのグラフィックパッケージ化兄弟。 キャプションは_話し言葉_を読みやすい字幕として追加します。これは、再生中の動画の上に_デザイン性の高いグラフィック_を追加します。プレーンな字幕 →embedded-captions。スクラッチから動画を構築する場合は → 作成ワークフロー（product-launch-video/faceless-explainer/ ...）。
作業ディレクトリ内の検査可能な中間ファイル：
metadata.json— 長さ / 幅 / 高さ / fpsaudio.mp3— 抽出されたオーディオtranscript.json— フラットな単語配列[{ text, start, end }, …](Whisper;segmentsやwordsラッパーなし)storyboard.json— 軽量なカードアウトライン（エージェントの計画）public/cards/card-XX.html— カードごとに1つの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）と同じ規則です。cwdを作業スペースルートに保ち、以下のすべてはこの1つのサブディレクトリの下に書き込まれます。
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の長さにクランプしないと、レンダリングで動画の後に黒いテールが表示されます。
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で作成する構成を駆動できるように、タイミングと内容について明確に考えるために存在します。以下の例と形状を一貫させてください:
{
"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 | string | カードHTMLとGSAPセレクターで使用される安定したID |
intent | string | 自然言語による説明; カード合成に供給される |
startSec / endSec | number | 秒単位（endSec > startSec） |
accentIndex | 0 | 1 | 2 | 3 | 4 | このカードが使用する5つのテーマアクセントカラーのうちの1つ |
zone | enum（下記参照） | キャンバス上でカードが配置される場所 |
contentHints | object | 自由形式のバッグ; エージェントがここにkicker/title/detail/data/quoteを入れます |
archetype (オプション) | string | カードのパターンを記憶するために付ける自由形式のラベル; ない場合 = 自由形式（デフォルト） |
transition (オプション) | enum: cut | fade | slide | wipe | 宣言的なカード間遷移 |
5つのzone値:
| zone | 解決された境界 | 使用時 |
|---|---|---|
fullscreen | キャンバス全体をカバー | ヒーローモーメント、大きな数字、マントラ |
whiteboard-area | 40pxマージン（またはポートレート高さの45%）を内側に | 高密度データ/注釈付きコンテンツ |
lower-third | 下部30%のバンド | 表示されている動画上の注釈 |
side-panel | 右42%（ランドスケープ）または下部40%（ポートレート） | データ側、動画は反対側 |
video-overlay | キャンバス全体、ほぼ透明なカードを想定 | 全面動画上の注釈オーバーレイ |
ステップ9で構成を組み立てるとき、各カードのzoneを上記の表に従ってカードホストラッパー上のピクセル境界に解決します。動画の境界は一度構成レベルで設定されます（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 = basePace × densityMultiplier
cardCount = max(5, round(videoDurationSec / 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 lint警告timeline_track_too_denseを参照してください。
contentはプレーンな文字列（「タイトル: 年率5.69%\n注: ...」）またはデータをキャプチャする任意のJSON形式にすることができます。エージェントがカードごとに形状を決定します。
オプションのアウトロ。 このスキルには固定のブランドアウトロは含まれません。ユーザーが終了カードを希望する場合は、自分でニュートラルなものを設計し（ワードマーク+1行タグライン、約1.5-2秒、フェードイン→短いホールド→フェードアウト）、cards[]に追加し、composition.durationSecondsをそのendSecまで拡張します。それ以外の場合は、最後のコンテンツカードで終了します。
7. レンダリング戦略を決定する
ユーザーとビジュアルの方向性を確認する（これを最初に行う）
カードの設計や境界の決定を開始する前に、ユーザーに出力比率、レイアウト、スタイル、カード密度プリセットを選択してもらいます。フレームは、選択されたレイアウト×スタイルの組み合わせから自動選択されます（以下の「フレーム自動選択」表を参照）。質問を送信する前に、2つのことを事前計算します:
recommendedRatioを元の動画のアスペクト比から計算します。recommendedDensityを上記の密度計算から計算します。
…