video-editing

video-editing

承認済みのスクリプト、提供されたナレーション／トークヘッドのメディア、収集済みのアセットがあり、それらを完成した縦型（9:16）のショート動画に仕上げる必要がある場合に、このスキルを使用してください。あなたはメインエディターであり、クリップをつなぎ合わせるだけの担当者ではありません。目指すのは、クリエイター品質のショート動画（Kallaway／Varun Mayyaのような密度）です。すべてのビートが視聴者の注意を引く必要があります。画一的な1秒カット、デフォルトフォント、直線的／ぎこちないトランスフォーム、ストックテンプレートのような仕上がりなど、汎用的なAIツールの出力は失敗であり、納品物ではありません。

デフォルトのアスペクト比は**9:16（1080×1920）**です。スタイルパックでは16:9と1:1の動作も定義されているため、同じ見た目を別の比率に調整できます。ただし、このスキルのペース配分とフックの文法は、まず縦型ショート動画向けに作られています。

必ず守るワークフロー（省略も順序変更も禁止）

index.htmlを最初から手作業で作成すると、ライブリロードとプロジェクト構成が壊れます。必ず次の手順に従ってください。

1. プロジェクトのedit/フォルダー内で**npx hyperframes init edit**を実行します。これにより、ひな形（index.html、meta.json、hyperframes.json、CLAUDE.md、package.json）が作成されます。
2. **cd edit**を実行し、生成されたプロジェクトファイルを編集して実際の編集内容を作成します。fonts/、assets/sfx/、compositions/以下のサブコンポジションを追加します。
3. npx hyperframes previewを実行します（長時間実行されるため、バックグラウンドで実行してください）。ライブリロードを有効にしてブラウザーで確認します。ブラウザーツールを使って内容を確認し、スクリーンショットを撮ります。レンダリング前に、ペース配分、レイアウト、テキストの表示タイミング、アニメーションの滑らかさを必ず確認してください。
4. **npx hyperframes lint／npm run check**を実行し、すべてのエラーを修正して、警告も確認します。
5. **npx hyperframes render**を実行し、最終MP4を作成します。
6. 検証：ffprobeで（9:16の寸法、長さ、コーデックを）確認し、コンタクトシートと照らし合わせてffmpegでフレームを抜き取り確認します。同梱のゲートスクリプト（後述）を実行します。

APIや機能の参照にはhyperframesのドキュメント（npx hyperframes docs）を使用し、編集基準にはこのスキル内のリファレンスを使用してください。HyperFramesのツールが見つからない、または正常に動作しない場合は、汎用的な編集を手作業で作成せず、作業を中断してユーザーに伝えてください。

要件

• HyperFrames — npx hyperframesで実行するレンダリングエンジンです。このスキルはHyperFramesの上に適用する編集基準であり、HyperFramesの代わりになるものではありません。
• Node.js（npxおよび検証スクリプト用）。
• ffmpeg／ffprobeをPATHに通しておくこと — SFXの合成、音声のミキシング、レンダリング結果の検証に使用します。
• styles/<style>/FRAME.mdにあるスタイルパック（このスキルには作成例としてvibe-life、出発点として_templateが含まれています。styles/README.mdを参照してください）。

入力

1つのプロジェクトフォルダーを使用します。推奨される構成は次のとおりです（必要に応じて調整してください）。

your-project/
├── script.md            # approved script with beats/timestamps, supers, energy cues — THE SPINE
├── voiceover/           # provided voice / talking-head media (the A-roll)
├── avatar/              # optional talking-head media
├── assets/
│   ├── manifest.json    # gathered B-roll + per-beat asset map + rights notes
│   └── ...              # the gathered media
└── edit/                # YOUR output (created by `npx hyperframes init edit`)

スクリプト、ナレーション／アバターのメディア、アセットマニフェストを読みます（編集はしないでください）。動画に使用するスタイルパック（styles/<style>/FRAME.md）を選択します。

出力

すべてプロジェクトのedit/フォルダー内に書き出します。

• HyperFramesプロジェクト（index.html＋compositions/＋fonts/＋assets/sfx/＋assets/master_audio.*）。
• レンダリング済みの最終MP4（9:16）、検証済み。
• edit-report.md — 引き継ぎ用のメモ。ビートごとの編集判断、使用したアセット（マニフェスト内の参照を含む）、使用したSFX／音楽、プレビュー／レンダリングの検証メモ、最終確認用に指摘した事項を記載します。テンプレートはreferences/edit-report-template.mdにあります（下に掲載）。

編集文法（ここでいう「プロフェッショナル」とは）

以下の各項目は品質基準であり、単なる提案ではありません。

基本となるビジュアル言語は、エディトリアルなルックです — 詳細は以下の「editorial-look」をご覧ください。フレームはデザインされたページであり、テキストを重ねただけの動画ではありません。セリフ体イタリック／太字サンセリフ体を組み合わせたエディトリアルな見出し、ペーパーステージとダークグリッドのインタースティシャル背景、上下分割（上部はBロール／下部はトーキングヘッド）をデフォルトとするAロール／Bロールのレイアウト、キーワードを色で強調したハイライトバー付きスーパー、境界線キャプションと名前ピル、見出しカード、UIカードのスタックで構成します。スタイルパックに合わせてテーマを設定し、この10種類のパターンを使ってすべてのショート動画を制作します。

• 設計されたフック（最初の1～3秒）： 冒頭にテキストスーパーを出し、パターンを崩してから、フレーム内へ移行します（例：分割パネルを拡大して9:16全画面にする）。静止したトーキングヘッドから始めてはいけません。
• Aロール／Bロールの構成： Aロール（トーキングヘッド／VO）が軸となり、Bロール（クリップ、スクリーンショット、モーショングラフィックス）がそれを覆い、要所で区切りを加えます。無音部分ではなく、Aロールの音声の上にBロールをカットインします。
• カットの粒度： 台本の勢いに応じて、カットは最短0.2秒にできます。1秒間隔の機械的なカットは厳禁です。ペース配分は台本に合わせます。
• 分割画面のレイアウト： 横並びと上下分割の構成を使い、全画面との切り替えを意図的に行います。境界線キャプション付きの上下分割が主力であり、全画面のBロールで覆うのは例外です。
• 顔が見えるフレーミング： 人物がパネル内やクロップ内にいる場合は、object-positionを調整し、パネルの表示領域内で顔が中央に位置し、目が上から3分の1の位置に来るようにします。トーキングヘッド素材ではデフォルトの50% 50%がほぼ必ず不適切で、頭が切れてしまいます。人物パネルのカメラ移動中は、移動の全体を通して顔がフレーム内に収まるようにします。顔が中央から外れている、またはクロップされている場合は品質基準を満たしません。「editorial-look」の§4「顔が見えるフレーミング」をご覧ください。
• 滑らかなカメラ移動： ズームイン／アウト、左右へのパンは、必ずイージングし、リニアにせず、ジッターも発生させないでください。 ジッター対策の要件については「camera-moves」をご覧ください。
• キネティックテキスト／キャプション： アニメーション付きの登場、キーワードの強調（アクセントワードは1つ）、音声に合わせたキャプションスーパーを使用します。
• テーマに沿ったモーショングラフィックス： 数字カード、スペック／JSONカード、バウンディングボックスのコールアウト、ポスター分割、チャートのアニメーションなどを、汎用的なものではなくスタイルテーマに沿ってデザインします。
• ロゴ／ワードマークのアニメーション： 台本でブランドや製品名が出てくる箇所では、それらのマークをアニメーションさせます。
• 効果音： カットやグラフィックのヒットに、風切り音、クリック音、ライザー、インパクト音を重ねます。控えめにし、音声より小さくミックスします。「sfx-and-audio」をご覧ください。
• 一貫した美的表現： 色のテーマ、統一されたタイポグラフィ、滑らかなカーブを用い、デフォルト風の要素や唐突な出現を避けます。すべてスタイルパックのFRAME.mdに基づいて制作します。

スタイルのテーマ設定（必須。デザインを始める前に実施）

まずスタイルパックからビジュアルアイデンティティを導き出します。色、書体、モーションの個性、グラフィックの表現はすべてstyles/<style>/FRAME.mdに基づきます。スタイルが違えば、ルックも変わります。 FRAME.mdを具体的なframe.mdデザイン仕様（パレットトークン、ローカルフォント用の@font-face、モーションの個性からイージングやカットの選択への反映）に落とし込む方法については、以下の「style-theming」をご覧ください。付属のvibe-lifeの例では、クリーム／インク／ピーチ／バターのパレット、Space Grotesk＋Instrument Serif italic＋JetBrains Mono、ペーパーカットのモーション（クロスフェードではなく、SFXでマスクするハードカット）、各フレームに1つのセリフ体イタリックのアクセントワードをピル内に配置する表現、フラットで硬いインクシャドウを使用しています。独自のスタイルでは、独自のトークンを使って同じ役割を担います。

HyperFrames の厳守事項（違反するとレンダリングが壊れます）

1. 時間指定された要素にはすべて、data-start、data-duration、data-track-index、および class="clip" が必要です（フレームワークは clip を使って表示状態を制御します）。
2. .clip 要素自体に GSAP を適用してはいけません。表示状態と変形はフレームワークが管理します。子ラッパー（例：.cam、.inner）をアニメーションさせてください。
3. タイムラインは gsap.timeline({ paused: true }) とし、window.__timelines["main"] に登録する必要があります（ID は data-composition-id と一致させます）。
4. 決定性を保ってください。Math.random()、Date.now()、ネットワークからのフェッチ、repeat: -1 は使用しないでください。レンダリングはフレーム単位でサンプリングされるため、再現可能である必要があります。
5. 9:16 は 1080×1920 です。 #root { container-type: size; } を設定し、cqw／cqh がフレームを基準に解決されるようにしてください（1cqw = 10.8px）。文字やグラフィックのサイズ指定には vw／vh ではなく、cqw／cqh を使用してください。
6. 同じトラック上で隣接するクリップを接触させないでください。浮動小数点の精度により、3.2 + 0.35 = 3.5500000000000003 となり、3.55 から始まるクリップと重なって overlapping_clips_same_track が発生します。間隔を空けるか、0.34 のような長さを使用してください。（hyperframes-helper の lint に関する注意点を採用しています。）
7. オーディオ： 動画は muted にし、別の <audio> 要素を使用します。複数の <audio> 要素よりも、ミックス済みのマスターオーディオトラックを1つ（ffmpeg の adelay＋amix で VO＋SFX をミックス）使用してください。複数のトラックはエコーや同期ずれの原因になります。高い値の専用 data-track-index を設定してください。
8. 密度： 1つのトラックに時間指定要素が多数ある場合の timeline_track_too_dense は、短いパイロット版では参考情報ですが、規模が大きくなると実際に問題になります。本番尺の編集では、シーンをサブコンポジション（data-composition-src="compositions/file.html"）に分割してください。

ワークフロー

1. 台本を編集の軸として読みます。 ビートマップを作成します。各ビート／タイムスタンプに対して、Aロール（VO／アバターのセグメント）、必要なBロール／MG、画面上のスーパー、意図するカット／カメラ／トランジション、エネルギーをまとめます。テンポは台本のエネルギーに合わせ、均一なリズムを当てはめないでください。
2. スタイルパックからテーマを設定します。 styles/<style>/FRAME.md を読みます。具体的なデザイン仕様（パレットトークン、ローカルの @font-face 宣言、動きの個性、グラフィック表現）を作成します。（「style-theming」を参照。）
3. アセットのカバレッジを確認します。 アセットマニフェストと照合し、収集したメディアでカバーされるビート、build-in-editor（モーショングラフィックスとして自分で作成するもの）、alternate の差し替え素材を特定します。最終レンダリングにプレースホルダーや未許諾メディアを使用してはいけません。不足分はレポートに明記してください。
4. npx hyperframes init edit を実行します。 まず雛形を作成します。その後、fonts/（ローカルの woff2 サブセット）、assets/sfx/、compositions/ を追加します。
5. index.html でビートごとに編集を構築します（尺が長い場合はサブコンポジションも使用します）。編集の文法を適用します。練り上げたフック、Aロール／Bロールのカバー、メトロノームのように規則的ではないカット、分割画面、イージングを使ったカメラの動き、キネティックテキスト、テーマに沿った MG、ロゴアニメーションを取り入れます。.clip ではなく、子ラッパーをアニメーションさせてください。
6. SFX とマスターオーディオを作成します。 ffmpeg（anoisesrc／aevalsrc／sine）で権利上問題のない SFX を合成するか、使用許諾済みのアセットを使用します。VO と SFX を1つのマスタートラックにミックスします。（「sfx-and-audio」を参照。）
7. プレビューして確認します。 npx hyperframes preview をバックグラウンドで実行し、ブラウザーで開いて、重要なビートのスクリーンショットを撮ります。テンポ、レイアウト、テキストのタイミング、動きの滑らかさを確認し、レンダリング前に修正します。
8. Lint を実行します。 npm run check ／ npx hyperframes lint --verbose を実行します。すべてのエラーを修正し、警告を確認します（既知の誤検知に注意してください。例：コントラストの高いカードが非表示になっているタイムスタンプでサンプリングされた WCAG コントラスト警告）。
9. レンダリングします。 npx hyperframes render → MP4。
10. ゲートスクリプトで検証します。 node scripts/verify-render.mjs <path-to-mp4> を実行します。9:16、想定尺、h264／yuv420p、オーディオの有無を検証します。その後、ffmpeg でフレームを抜き出してコンタクトシートを作成し、プレビューと目視で照合します。
11. edit-report.md を作成し、処置状況（done ／ in_review ／ blocked）を設定します。 MP4 とコンタクトシートを添付します。

検証ゲートを実行します（このファイルと同じ場所にある scripts/verify-render.mjs がスクリプトです）。

node scripts/verify-render.mjs path/to/edit/<file>.mp4

必要に応じて、仕様を厳密に検証します。

node scripts/verify-render.mjs <file>.mp4 --duration 12 --tolerance 0.5

不足しているアセット

ビートに必要なアセットが assets/ にない場合：

1. まずマニフェストで alternate または build-in-editor の行を確認してください。カスタムのモーショングラフィックビートは自分で作成するものであり、作業を妨げるものではありません。
2. 本当に不足していて、合法的かつ直接すぐに入手できる場合は、自分で取得し、出所を edit-report.md に記録してください。
3. それ以外の場合は、該当するビート／タイムスタンプ、必要なアセット、予定している編集内容を正確にレポートに記載して、ユーザーに提供を依頼し、完成できるビートの作業を続けてください。ライセンスを取得できないプレースホルダーは決してレンダリングしないでください。

検証（引き渡し前に必須）

• プレビューのスクリーンショット： ライブプレビューから代表的なフレームをキャプチャし、レイアウト／タイミング／モーションを確認します。
• ffprobe： 寸法は正確に 9:16（1080×1920）、想定される長さ（許容範囲内）、h264 ／ yuv420p、音声ストリームが存在すること。ゲートスクリプトがこれらを検証します。
• フレームのスポットチェック： ffmpeg でタイムライン全体からフレームを抽出してコンタクトシートを作成し、各必須テクニックがスタイルに合った形でレンダリングされ、プレビューと一致していることを確認します。
• 顔のチェック： 人物が写っているすべてのプレビュー画像とコンタクトシートのフレームで、顔全体がパネル内に収まり、中央に配置されていることを確認します（つなぎ目、キャプション、端、カメラの動きによって切れていないこと）。問題があればゲートを失敗とし、フレーミングを調整してください。
• 権利： レンダリングに、ライセンス未取得またはプレースホルダーのメディアが含まれていないこと。最終的なライセンス確認が必要なものはすべてレポートに記載します。
• デザイン変更ログ： スタイル仕様またはエディトリアルルックのパターンから外れる変更（新しいレイアウト、色／書体の変更、モーションの変更）は、理由とともに edit-report.md の「Design decisions」に記録する必要があります。ビジュアルの変更自体は問題ありませんが、黙って変更してはいけません。

クレジットと出所

このスキルは、hyperframes のドキュメント、github.com/robonuggets/hyperframes-helper、およびクリエイター品質のショート動画の参考フレームを調査し、さらに独自の内容を加えています。内訳は、下記の「standard-provenance」を参照してください。概要：

• 採用した内容：hyperframes-helper ／ HyperFrames から、HTML を唯一の信頼できる情報源とするモデル、data-* のタイミング属性と class="clip"、window.__timelines 上で一時停止したタイムライン、GSAP の power2/power3.out イージング、白いグローのキャプションスタイル、SVG の下線による強調、リンターで注意すべき項目（オーバーラップの浮動小数点精度、決定論的な処理のみ、ミュート動画と音声の併用など）の一覧。
• ここで追加した内容：明示的なアンチジッター仕様を備えた完全なイージング付きカメラモーションシステム、9:16 のショート動画文法（設計されたフック、0.2 秒未満の非メトロノーム的なカット、分割画面からフレーム全体へのトランジション）、FRAME.md から具体的なデザイン仕様を作成するスタイルテーマ設定パイプライン、権利上問題のない効果音の合成と事前ミックス済みマスタートラックを単一で使用する方針、さらにレンダリング検証ゲート（ffprobe によるアサーションとコンタクトシートでのスポットチェック）。

---

付録 — リファレンスライブラリ（本文内に収録）

オーサリング元では、これらは references/ 以下の個別ファイルです。ここではスキルを単独で完結する SKILL.md にするため、本文に収録しています。

付録：editorial-look

エディトリアルルック — ビジュアル文法のリファレンス

クリエイター品質のショート動画（Kallaway ／ Varun Mayya クラス）の静止画から抽出し、名前付きの10種類のパターンにまとめました。これらが基本レイアウトです。すべてのショート動画をこれらから作成し、スタイルパックのトークン（styles/<style>/FRAME.md）でテーマを設定します。以下のレシピでは、同梱の vibe-life の例に合わせた対応関係を示しています。独自のトークンに置き換えてください。

共通する考え方は、フレームはデザインされたページであり、テキストを重ねた動画ではないということです。書体はエディトリアルな組み合わせ（太いグロテスク体とイタリックのセリフ体の対比）にし、メディアはテクスチャのある背景上のカードやパネルに配置します。スーパーはオブジェクトとして組版します（バー、ピル、下線など）。影を付けただけのテキストをそのまま載せることはしません。

---

1. エディトリアル見出し（セリフ体／サンセリフ体の組み合わせ）

1つの見出しに2つの声を持たせます。主張部分は太いサンセリフ体、ひねりを加える語句はイタリックのセリフ体にし、要点には手描きの下線やハイライトを添えます。

Claude Just *Changed*        ← serif italic on the verb
SOCIAL MEDIA FOREVER         ← heavy grotesque, tight leading
━━━━━━━━━━━━                 ← accent underline (brand accent)

.headline { text-align: center; line-height: 0.95; color: var(--fg); }
.headline .sans  { font: 500 9cqw/0.96 "Space Grotesk"; letter-spacing: -0.32cqw; }
.headline .serif { font: italic 400 9cqw/0.96 "Instrument Serif"; }
.headline .underline {
  display: block; width: 46cqw; height: 0.9cqw; margin: 1.6cqw auto 0;
  background: var(--accent-strong); border-radius: 999px;
  transform-origin: left center;          /* animate scaleX 0→1, power3.out */
}

ルール：セリフ体のイタリックは最大1〜2語（動詞またはひねりを加える語句）に限り、行全体には使いません。単語が配置された後、下線をscaleXで描き入れます。文頭のみ大文字のセリフ体と、大文字またはタイトルケースのサンセリフ体の組み合わせが特徴です。

2. ペーパーステージ（淡いテクスチャの背景）

画面全体にオフホワイトの「紙」を敷き、かすかなグリッドを加えます。メディアやグラフィックは、その上にカードとして配置します。フック、ロゴの見せ場、UIスタックの見せ場に使います。

.paper {
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px),
    var(--bg);                                   /* e.g. #f3ecd9 */
  background-size: 6cqw 6cqw, 6cqw 6cqw, auto;
}
/* --line-faint: color-mix(in srgb, var(--fg) 7%, transparent) */

オプションの粒状感：固定シードの決定論的なSVG feTurbulence データURIを、不透明度4〜6%で使用します（レンダリングの再現性を保つ必要があります）。ループする動画テクスチャは使いません。

3. ダークグリッドのインタースティシャル（タイポグラフィを使った章カード）

画面全体をインク色の壁にし、見えるグリッド、中央揃えの複合書体のメッセージ、点灯するアクセントセルを1つ配置します。セクション間に挟む、タイポグラフィを使ったパターンの変化です。0.6〜1.2秒表示します。

.grid-wall {
  background:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
    #121110;
  background-size: 4.5cqw 4.5cqw;
}
.grid-wall .cell {           /* the single accent pixel */
  position: absolute; width: 4.5cqw; height: 4.5cqw;
  background: var(--accent-strong); filter: blur(0.15cqw);
}

壁面の文字はパターン1に従います（上部に小さなセリフ体のイタリックの行、太いサンセリフ体の主張、その下にセリフ体のイタリックの締めくくりを置き、右端を不揃いにずらします）。一部のグリッドセルを少し明るく点滅させてもかまいません。2〜4個のセルのopacityをずらして、決定論的にアニメーションさせます。

4. 上下分割レイアウト（基本となるレイアウト）

上部にBロールパネル（約52〜56cqh）、下部にトーキングヘッドパネルを配置し、境目にキャプションを置きます。これがAロール／Bロールのデフォルトレイアウトです。画面全体を覆うBロールは例外であり、基本形ではありません。

<div class="stack">
  <div class="panel top"><video class="fill" ...></video></div>
  <div class="seam-caption">For <em>13 years</em></div>
  <div class="panel bottom"><video class="fill" ...></video></div>
</div>

.stack .panel { position: absolute; left: 0; right: 0; overflow: hidden; }
.stack .top    { top: 0;    height: 54cqh; }
.stack .bottom { bottom: 0; height: 46cqh; }
.seam-caption {
  position: absolute; top: 54cqh; left: 0; right: 0; z-index: 2;
  transform: translateY(-50%); text-align: center;
}

フルフレームへの移行は意図的に行います。パネルを9:16のフルフレームいっぱいまで広げる場合は、パネルラッパーのheight／yをpower3.inOutで0.45〜0.6秒かけてアニメーションさせ、移動にwhoosh効果音を付けます。または、上部パネルをスライドアウトさせ、下部パネルに引き継ぎます。パネルをダークグリッドのフレーム内に配置し（端にパターン3の背景を見せる）、高級感のある「額装」された印象にすることもできます。

顔が見切れないフレーミング（人物がパネル内にいる場合は必須）

パネルでは元の動画がクロップされるため、デフォルトのクロップ（object-position: 50% 50%）では頭が切れたり、顔が隅に寄ったりします。**顔はパネルの表示領域の中央に配置し、目は上から3分の1の位置に置きます。**境目、キャプション、パネルの端で顔が切れないようにします。

.panel video.fill { width: 100%; height: 100%; object-fit: cover; }
.panel.bottom video.fill { object-position: 50% 22%; } /* bias crop toward the face */

手順：

1. 元のクリップ内で顔の位置を確認します（1フレームをプレビューします。9:16のトーキングヘッド素材では、通常、顔は上端から約20〜35%の位置にあります）。
2. パネルごとにobject-position: 50% <face-y>%を設定し、顔がパネルの中央に来るようにします。高さ46cqhの下部パネルに9:16の素材を表示する場合、y方向の補正が必要です。50% 50%ではほぼ必ず適切な位置になりません。
3. パネルの幅が画面幅より狭い場合（左右分割）、顔に向けて同様にx方向を補正します。
4. 人物を含むパネルのカメラ移動中は、移動全体を通して顔が表示領域内に収まるようにします。開始時だけでなく、終了時の位置も確認します。
5. プレビューのスクリーンショットとレンダーのコンタクトシートで再確認します。人物が映るすべてのフレームで、顔全体がパネルの中央に表示されている必要があります。顔が中央からずれている、または切れている場合はゲート失敗となり、ジッターと同じ重大度で扱います。

5. ハイライトバーのスーパー（枠付きのメッセージ）

大きなスーパーは塗りつぶしたバーの内側に配置した文字で、バーは1段または2段に重ね、キーワードをアクセントカラーにします。新聞風の黒いバーに白文字を置くバリエーションと、アクセントカラーのバーを使うバリエーションがあります。

.bar-super { text-align: center; }
.bar-super .bar {
  display: inline-block; padding: 0.8cqw 3cqw;
  background: var(--fg); color: var(--bg);              /* ink bar */
  font: 500 7.4cqw/1.18 "Space Grotesk"; letter-spacing: -0.2cqw;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.bar-super .bar.accent { background: var(--accent-strong); }  /* accent bar variant */
.bar-super .kw { color: var(--butter); }               /* keyword pop inside the bar */

2行のバーはずらして表示します（2本目のバーは1本目の0.08〜0.12秒後に表示し、y: 30 → 0、power3.outを適用します）。数字にはキーワードの色を使います：**1** out of 3 employees。

6. ネームピル／シームピル

画面上の人物や物を示す小さな角丸のピル、またはパネルの境目に置くセリフ体のアクセントワードです。scale: 0 → 1, back.out(2)で表示し、クリック音の効果音を付けます。見せ場の間は表示し、パネルが切り替わる前に消します。

7. 見出しカード（新聞記事風）

ニュース／告知のビート向けの「切り抜き」です。セリフ体の見出しに、要点のフレーズの上へインクのハイライトバーを重ねます。下には、ギザギザの仕切り（稲妻形の SVG パス）で区切った写真の切り抜きを配置し、すべて紙のステージ上に載せます。

.clipping h1 { font: italic 400 6.4cqw/1.15 "Instrument Serif"; color: var(--fg); }
.clipping h1 mark { background: var(--fg); color: var(--bg); padding: 0 1cqw; }
.clipping .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6cqw; }

ビルドするようにアニメーションさせます。見出しがタイプ表示またはスライドインし、ハイライトの mark が左を起点に scaleX でワイプします。写真は仕切りのフラッシュに合わせて、0.1 秒ずつ間隔を空けて落ちてきます。

8. UIカードのスタック（レシート）

実際のスクリーンショット（プロフィール、投稿、ダッシュボード、JSON）を、紙のステージ上に角丸カードのスタックとして配置し、枠線とシャドウを付けます。エビデンスを組版するイメージです。カードは少し重なりながら、順にカスケード表示します（y オフセット＋0.1～0.14 秒のスタッガー、power3.out）。交互のカードには±1～2°の回転を付けます。下には、小さな単語を 1 つだけ太いサンセリフ体で配置します（「connect」）。

9. グロー／アウトライン付きディスプレイワード（控えめに）

Bロールに重ねる、単独の煽りワード向けです。上に小さくスクリプト体またはセリフ体の単語を置き、その下に太い大文字でメインの単語を配置します。背後にはアウトラインとグローを付けた同じ単語を重ねます（アクセントカラーの -webkit-text-stroke ＋柔らかな text-shadow）。短い動画 1 本につき最大 1 回まで。このキットで最も目立つ要素です。

10. 継ぎ目のキャプション

キャプションはレイアウトの継ぎ目（積み重ねたパネルの間）か、トーキングヘッドに重ねたスクリーンの帯部分に配置します。アクセントカラーまたは紙の色で、小さなセリフ体のイタリックフレーズ（For 13 years、order sunlight）を表示します。一度に表示するのは短いフレーズ 1 つだけです。ナレーションの節に合わせて、フェードまたは 20～30px 上昇させて表示します。このスタイルでは、段落キャプションや全文を追いかけるカラオケ風キャプションは使いません。

---

コンポジションのルール（パターンの組み合わせ方）

• すべてのフレームに背景を持たせます。紙のステージ、ダークグリッド、または画面端まで広がるメディアパネルを使います。スクリーン、バー、ピルなしで、加工前の動画に文字を浮かせて配置してはいけません。
• フックのレシピ（参考 1、3、5）：紙の上、または上部パネルの上にエディトリアル見出し（パターン 1）を配置 → 上下に分割したスタック（4）にして、トーキングヘッドを下部パネルに登場させる → 継ぎ目にピル（6）を配置 → 本編の開始と同時にパネルを拡大して全画面にする。
• セクションの切り替えには、ダークグリッドのインタースティシャル（3）または見出しカード（7）を使います。トピック間で何も挟まずにジャンプカットしてはいけません。
• 強調の段階（控えめ → 強め）：継ぎ目のキャプション（10） → 名前のピル（6） → ハイライトバー（5） → エディトリアル見出し（1） → グローワード（9）。目的を達成できる最も控えめな段階を選び、同じフレームで強いパターンを 2 つ重ねないでください。
• スタイルの対応付けは必須です。参考フレームの赤／黄は色そのものではなく、役割（強いアクセント／強調）を示しています。自分の FRAME.md に基づいて同じ役割に色を割り当ててください。
• すべての登場アニメーションはアンチジッターの規約（「camera-moves」）を守ります。バー／ピル／カードが着地するたびに、声の下にクリック音またはコツンという効果音を入れます（「sfx-and-audio」）。

付録：スタイルのテーマ設定

スタイルのテーマ設定 — FRAME.md → 具体的なデザイン仕様

何かをデザインする前に、スタイルパックの styles/<style>/FRAME.md を、編集に使える具体的なデザイン仕様に落とし込みます。スタイルが違えば、見た目も変わります。 汎用的なテーマを使ってはいけません。

FRAME.md から抽出する内容

1. パレット → CSS カスタムプロパティ。 名前付きカラーをすべて抽出し、:root にトークンを定義して、すべてのシーンが同じ信頼できる唯一の情報源を参照するようにします：

   :root {
     --cream: #f4efe6;  --ink: #1a1714;  --peach: #f2a07a;
     --butter: #f5cf6a; --moss: #8a9b6e;  --sky: #8fb3c4;  --plum: #9a7aa0;
   }
   

2. タイポグラフィ → ローカルの @font-face。 レンダリング結果は一貫してオフラインでも再現できる必要があります。レンダリング時にフォント CDN に依存することは絶対に避けてください。 woff2 サブセットを fonts/ にダウンロードし、ローカルで宣言します：

   @font-face { font-family: "Space Grotesk"; src: url("fonts/spacegrotesk.woff2") format("woff2"); }
   @font-face { font-family: "Instrument Serif"; src: url("fonts/instrumentserif.woff2") format("woff2"); font-style: italic; }
   @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrainsmono.woff2") format("woff2"); }
   

   各ファミリーについて、latin サブセットのうち最大の woff2 を取得してください（ファイルが小さすぎる場合、通常は誤ったサブセットか一部のみのサブセットです）。各書体を役割に割り当てます。見出しにはディスプレイ用サンセリフ体、アクセント語にはイタリックのセリフ体、仕様・数値・コードのカードにはモノスペース体を使います。

3. モーションの個性 → イージングとカットのスタイル。 FRAME.md では、スタイルの「動き方」が説明されています。それを次のように反映します：

   • 「ペーパーカット／穏やか」→ クロスフェードではなく、効果音でマスクしたハードカット。power1.inOut で滑らかにドリフトさせ、背骨の動きには弾む back／elastic を使いません。
   • 「エネルギッシュ／力強い」→ より速いカット、power3.out による登場、アクセントとして時折 back.out を使います。 穏やかな個性とショートフォームの勢いを両立させるには、トランジション はスタイルに沿ったまま（ハードカットにして）、ペース（カット頻度）で勢いを出します。

4. グラフィックの言語 → MG のレシピ。 FRAME.md の特徴的な要素を、再利用可能なモーショングラフィックスにします。例：各フレームにアクセントピルでイタリックのセリフ体のアクセント語を1つ配置する、ぼかしのないフラットでくっきりしたインクの影（ずらしたベタ塗り）、紙のステージ上に数値／台帳カードを配置する。

frame.md のデザイン仕様（小文字表記を推奨）

HyperFrames では、プロジェクトごとのデザイン仕様として小文字表記の frame.md が推奨されています。edit/ にファイルを作成し、トークンパレット、3つのフォントの役割、モーションの個性に関する判断、再利用するグラフィック要素をまとめます。これにより、すべてのシーンに一貫性が生まれ、次の編集者が参照できる資料を1つにまとめられます。

忠実度を高めるコンテナーユニット

#root { container-type: size; } を設定し、テキストやグラフィックのサイズには cqw／cqh を使います（幅1080の場合、1cqw = 10.8px）。これによりプレビューとレンダリングの比率が同一に保たれ、間隔もきれいに拡大縮小されます。vw／vh は避けてください。これらはフレームではなく、ビューポートを基準に解決されます。

付録：カメラの動き

カメラの動きとジッター防止のルール

HyperFrames は、一時停止した GSAP タイムラインをサンプルされたフレーム時刻にシークし、スクリーンショットを撮ってレンダリングします。ライブプレビューでは問題なく見えるカメラの動きでも、変換が GPU に昇格されておらず、サブピクセル単位で安定していないと、レンダリング時にカクついたり、ちらついたりすることがあります。これが「AI ツールの出力」とクリエイター品質の最大の差です。hyperframes-helper にカメラシステムはありません。これはこのスキルで追加される必須要素です。

ルール

1. .clip 要素をアニメーションさせないでください。 可視性と基本変換はフレームワークが管理します。.clip の内側に .cam ラッパーを配置し、それをアニメーションさせます。

   <div class="clip" data-start="5.0" data-duration="2.6" data-track-index="1">
     <div class="cam"> ... scene content ... </div>
   </div>
   

2. 移動するレイヤーを GPU に昇格させてください。 これにより、レイアウトではなくコンポジターが変換を処理し、ジッターを抑えられます：

   .cam {
     will-change: transform;
     backface-visibility: hidden;
     transform: translateZ(0);   /* forces its own compositor layer */
   }
   

3. トゥイーンで 3D を強制してください。 これにより、GSAP は matrix ではなく matrix3d を書き込みます：

   gsap.set(".cam", { force3D: true });
   

4. イージングを使い、リニアは使わないでください。 カメラのリニアな動きは機械的に見えます。ゆっくりしたドリフトには power1.inOut、登場には power2.out／power3.out を使います。expo／back はアクセント用にとどめ、ベースとなるカメラには使わないでください。

5. 変化量は小さく保ってください。 プッシュは2〜3秒かけて scale 1.0 → 1.12、パンは xPercent ±1.5 が目安です。±20 のような大きな値は避けてください。大きく速い動きはサンプリング時のカクつきを増幅し、安っぽく見えます。ゆっくり、控えめに、滑らかに動かします。

6. ズームの基準点を設定してください。 transform-origin を意図的に設定し（center または被写体の方向）、ズームが意図せず幾何学的な中心に向かうのではなく、注目点に向かって進むようにします。

パターン

イージング付きズームインプッシュ：

tl.set("#s4 .cam", { force3D: true });
tl.fromTo("#s4 .cam",
  { scale: 1.0, xPercent: -1.5 },
  { scale: 1.12, xPercent: 1.5, duration: 2.6, ease: "power1.inOut" },
  5.0
);

左右へのプッシュパン： xPercent のみを小さな値でアニメーションさせ、power1.inOut を使用します。フレームの境界が見えないよう、ごくわずかな scale: 1.04 を組み合わせます。

分割 → 全画面への拡大： パネルを半分のフレーム（width: 50cqw）から全画面（100cqw）へ power3.out で拡大しながら、隣のパネルをスライドして退場させます。これは「キャラクターが 9:16 の全画面フレームへ成長する」フックの動きです。イージングで到達させ、カットに重ねた whoosh SFX でマスクします。

プレビューだけでなく、レンダリングで動きを確認する

ライブプレビューでは滑らかに補間されますが、レンダリングでは離散的なフレームがサンプリングされます。レンダリング後、ffmpeg でカメラの動きに沿って 3～5 フレームを抽出し、テキストのエッジのちらつき、サブピクセルのジッター、開始時や終了時の「ポップ」を確認します（通常は fromTo の開始状態がないか、ラッパーではなくクリップをアニメーションさせていることが原因です）。

付録：sfx-and-audio

SFX とオーディオ — 合成と単一マスタートラックの原則

SFX は、クリエイター品質の編集と無音のスライドショーを分ける要素です。カメラの動きに whoosh、テキストの表示にクリック音、リビールへ向かう盛り上げに riser、グラフィックのヒットに impact を加えます。すべて控えめにし、音声の下にミックスします。 難しい点は 2 つあります。権利フリーの SFX を入手することと、複数のオーディオ要素によるエコーや同期ずれを防ぐことです。

ffmpeg による権利フリー SFX の合成

ライセンスも出所に関する負担もありません。SFX を決定論的に合成します。それぞれを assets/sfx/ に生成します。

Whoosh（カット／カメラの動き）— 高速なエンベロープを適用したピンクノイズのフィルタリング：

ffmpeg -f lavfi -i "anoisesrc=duration=0.45:color=pink:sample_rate=48000:amplitude=0.5" \
  -af "afade=t=in:st=0:d=0.05,afade=t=out:st=0.2:d=0.25,highpass=f=300,lowpass=f=6000" \
  assets/sfx/whoosh.wav

注意点：lavfi の引数は必ず引用符で囲んでください。コマンド内の別の場所で * を引用符なしで使うと、グロブ展開によって ffmpeg の位置引数がずれ、r=$SR などが誤って解析されることがあります。

Click（テキスト／UI の表示）— 短い高音のサイン波のブリップ：

ffmpeg -f lavfi -i "sine=frequency=2200:duration=0.04:sample_rate=48000" \
  -af "afade=t=out:st=0.01:d=0.03" assets/sfx/click.wav

Riser（リビールへ向かう盛り上げ）— 周波数ランプを使って aevalsrc／sine で上昇するスイープを作り、長さは約 0.6～1.0 秒、フェードインさせます。

Impact（グラフィックのヒット／着地）— 低いサイン波（約 80～120Hz）に短いノイズバーストを重ね、速く減衰させます。

SFX は音声より**−18～−12dB 小さく**保ちます。アクセントとして使い、音声と競合させないでください。

1 つのプリミックスマスタートラック（複数の <audio> 要素は使わない）

複数の <audio> 要素を同時に使うと、レンダリング時にエコー、ずれ、同期ずれが発生します。代わりに、オフラインで ffmpeg を使って**音声 + すべての SFX を 1 つのマスタートラックにミックスし、**各 SFX をカット時刻に adelay で配置してから amix を使います。

ffmpeg \
  -i voiceover/vo.wav \
  -i assets/sfx/whoosh.wav -i assets/sfx/click.wav -i assets/sfx/riser.wav -i assets/sfx/impact.wav \
  -filter_complex "\
    [1]adelay=2200|2200,volume=0.5[w]; \
    [2]adelay=3200|3200,volume=0.4[c]; \
    [3]adelay=7000|7000,volume=0.45[r]; \
    [4]adelay=7600|7600,volume=0.6[i]; \
    [0][w][c][r][i]amix=inputs=5:duration=longest:normalize=0[mix]" \
  -map "[mix]" -ar 48000 -ac 2 assets/master_audio.wav

adelay はチャンネルごとにミリ秒単位です（ステレオでは ms|ms）。normalize=0 にすると、ミキサーによって音声が減衰されません。次に .m4a（AAC）へエンコードしてレンダリングに使用し、専用の大きな data-track-index を持つ 1 つの <audio> 要素からその単一ファイルを参照します。

ffmpeg -i assets/master_audio.wav -c:a aac -b:a 192k assets/master_audio.m4a

<audio class="clip" data-start="0" data-duration="12" data-track-index="9"
       src="assets/master_audio.m4a"></audio>

動画は muted のままにします。音声がある場合は、その音声もマスターにあらかじめミックスします。マスターの長さをコンポジションの長さと一致させ、ゲートスクリプトの音声と長さのチェックに合格するようにします。

付録：edit-report-template

edit-report.md テンプレート

プロジェクトの edit/edit-report.md に記述します。これは編集者からレビュアーへの引き継ぎ資料です。すべてのセクションを埋め、プレースホルダーを残さないでください。

# Edit report — {project}: {title}

**Disposition:** done | in_review | blocked
**Output:** edit/{file}.mp4 — {WxH}, {duration}s, {codec}, audio {present/absent}
**Style:** {style} (theme from styles/{style}/FRAME.md)

## Beat-by-beat edit decisions
| Beat / ts | A-roll | B-roll / MG | Cut & camera | On-screen super | SFX |
|-----------|--------|-------------|--------------|-----------------|-----|
| S1 0–2.2s | VO hook | — | kinetic text in | "..." (accent word) | click |
| ... | | | | | |

## Assets used
- {manifest file} → beat {S#}: {how used in the cut}. status: {gathered/alternate}.
- Built-in-editor MGs: {list} (no stock equivalent — designed on the style theme).
- Self-fetched (if any): {file} ← {source URL}, {tool}, {license}.

## Audio
- Voiceover: {voiceover/file}
- SFX: {list} — synthesized via ffmpeg (rights-free) | cleared asset {provenance}
- Mixed to single master: assets/master_audio.m4a ({duration}s, 48kHz stereo)

## Design decisions
- {any deviation from the style spec or editorial-look patterns: what changed, why.
  "None" if the edit is fully on-pattern.}

## Verification
- Preview: {beats screenshotted; pacing/layout/timing confirmed}
- Face check: {every person-frame shows the whole face centered in its panel — confirmed}
- Lint: {errors fixed}; warnings: {list + which are known false positives and why}
- ffprobe: {WxH} / {codec} / {fps} / {frames} / {duration} / {audio}
- Frame spot-checks: contact sheet at {path}; all required techniques render on-style.
- Gate script: PASS

## Rights flags
- needs-final-review: {assets, if any — confirm a license before publish}
- missing: {NONE in render — listed here if a beat still wants an official file}

## Gaps / next steps
- {anything deferred, any follow-up needed from the user}

読みやすさを保ち、説明ではなく判断と根拠を記載します。作業が妨げられている場合は、処置の行と不足事項のセクションに、妨げとなっている要因と次のアクションを明確に記載してください。

付録：standard-provenance

標準の出典情報 — 採用したものと追加したもの

このスキルを読む人が、再利用した慣例とここで追加した内容を把握できるように記録しています。

調査した情報源

• hyperframes のドキュメント（npx hyperframes docs、llms.txt インデックス）。
• github.com/robonuggets/hyperframes-helper — HyperFrames のヘルパーリポジトリ。
• クリエイター品質のショート動画からの参考画像（Kallaway／Varun Mayya クラス）。

採用（業界／フレームワークの慣例 — そのまま再利用）

• HTML を唯一の情報源とする構成モデル、data-start／data-duration／ data-track-index／data-media-start によるタイミング指定、フレームワークでの表示 制御に使う class="clip"。
• window.__timelines["<composition-id>"] に登録する一時停止状態の GSAP タイムライン。 決定論的な動作のみを許可（ランダム値／現在時刻／fetch／repeat:-1 は使用しない）。
• GSAP のイージング語彙 — 登場には power2.out／power3.out、ゆっくりした移動には power1.inOut。
• 字幕のスタイル — あらゆる映像の上でも読みやすい、柔らかなグロー／縁取りを施した白文字。キーワードを強調する手段として SVG の下線を使用。
• リンターで注意すべき点の一覧 — 特に、浮動小数点の精度による overlapping_clips_same_track の落とし穴、muted を指定した動画と別個の <audio>、自己属性セレクターに関する警告。

ここで追加（hyperframes-helper にはない要素）

• イージングを適用したカメラモーションシステムと、明示的なアンチジッター要件 （will-change／backface-visibility／translateZ(0)／force3D、クリップではなくラッパーをアニメーションさせる、小さくイージングを適用した移動量、レンダリング結果で検証）。hyperframes-helper にはカメラシステムがまったくありません。
• 9:16 縦型ショート動画の文法。 hyperframes-helper は16:9 専用です。このスキルでは、縦型動画に最適化された設計上のフック、分割画面から全画面へのトランジション、スクリプトのエネルギーに合わせた0.2 秒までの、一定のリズムに偏らないカットを定義します。
• スタイルテーマ設定のパイプライン： styles/<style>/FRAME.md → 具体的な frame.md のデザイン仕様（カラーパレットのトークン、オフラインで決定論的にレンダリングするためのローカルな @font-face、動きの個性に応じたイージング／カットの割り当て、グラフィック表現）。
• SFX の合成とマスタートラックの管理： 権利処理不要の ffmpeg 合成 SFX と、複数の <audio> によるエコー／同期ずれを避けるための単一のミックス済みマスター音声トラック。
• レンダリング検証ゲート： scripts/verify-render.mjs — ffprobe によるアサーション（9:16、許容誤差付きの再生時間、h264／yuv420p、音声の存在）に加え、コンタクトシートのフレームを抜き取り確認します。「プレビューでは問題なさそう」を、スクリプトで実行可能な確実な受け入れチェックに変えます。
• コンテナーユニットの忠実性： #root に container-type: size を指定し、cqw／cqh でサイズを設定することで、1080×1920 でのプレビューとレンダリングを完全に一致させます。