Voxスタイルアニメーション
あなたは、エディトリアルコラージュ風のショート解説動画を制作します。紙の背景、ティントがかかった写真カード（境界線と影付き）、キーフレーズに引かれた黄色い蛍光ペン、赤ペンのサークルと矢印、ピンの刺さった地図、トゥー・オン・トゥーのコラージュモーション、物理的なカット、そしてすべてにシンクロしたサウンドデザインが特徴です。キットは kit/ に、レンダラーは scripts/ に、クラフトのルールは references/ にあります。
すべてのルールの上にあるルール：映像が議論を支えなければならない。 弱いポイントを飾り立てても、やはり弱い動画にしかなりません。第二のルール：手で作ったように、意図的に見えるべきである。 キットのすべてのデフォルト設定は、小さな物理的な不完全さを加え、デジタル的な完璧さを取り除きます。
構築する前に：以下を読むこと
references/LOOK_BOOK.md：何がプロに見えるのか、測定された数値と18のアマチュア的ミスとともに。常に読むこと。references/SCRIPT.md：質問 → アーカイブ → スクリプト → ショットリスト。スクリプトを書いたりタイミングを測るときに読むこと。references/API.md：すべてのキット呼び出し。ページを書く前に読むこと。references/TIPS.md：完成した動画からのヒント（映像、タイミング、サウンド、真実、配信）と、10〜12秒のショットごとの反論。ショートフックや反論の前に読むこと。references/SOUND.md（録音されたフォーリー、ドキュメンタリーミックス、ナレーション）、references/ASSETS.md（ライセンス！）、references/QA.md（必要に応じて）。
ワークフロー
- 質問とスクリプト。 答えられる、驚くべき質問であり、見せるものがあること。フック → 文脈 → 転換 → 証明 → ペイオフ（10秒の反論：主張 → 「実はそうではない」 → データ → 譲歩 → ペイオフ、SCRIPT.md §7）。クリエイターが話す場合は約215 wpm、ドキュメンタリーナレーターの場合は約150〜165 wpmで、各行にディレクションを付ける。すべての事実は
SOURCES.mdに出典を明記し、数字、引用、文書を捏造しないこと。データが裏付けない主張は省くこと。 - まずアーカイブ。 スクリプトを仕上げる前に、画像と実際の映像を見つけること：NASA、米国議会図書館、Smithsonian Open Access、Wikimedia、Pexels（各ライセンスを確認し、クリップにウォーターマークや焼き付けテキストがないかコンタクトシートで確認すること）。カード内の映像はドキュメンタリーとして読まれます。静止画だけだとスライドショーのように見えます。ファイル、URL、ライセンス、クレジットを記録すること。Texturelabsのファイルや商用フォントは絶対にコミットしないこと。Voxのロゴや映像は使用しないこと。モデルに画像を推測させないこと（
--query noimgでそれがどれだけ安っぽく見えるか分かります）。 - ショットリスト。 発話フレーズごとに1行。音声の単語レベルの文字起こしからの時間を使用：
python3 $SKILL/scripts/words.py vo.wav --inject <page>、次にページ内でconst w = V.wordmap("#words")を、ミックス内でも同じ単語を使用することで、録り直したラインがすべてを再タイミングします。1行につき1つの主要な動き。動画全体で1つの繰り返し使うビジュアルアイデアを選ぶこと。シーンチェンジごとにカットの名前を指定する（ハードカット、curveCut、zoomCut、holePush、whip、paperWipe。ディゾルブは絶対に使わないこと）。 - 構築。 このスキルのフォルダ内（このSKILL.mdがあるフォルダ。
$SKILLと呼び、通常は~/.claude/skills/vox-style-animation）で作業すること。cd $SKILL && npm run new -- <name>を実行。videos/<name>/index.htmlが作成され、すべてのパスが設定されます。別の場所でプロジェクトを行う場合は、node $SKILL/scripts/new.mjs <name> --dir <folder>を実行。ページを手動でコピーしないこと：../../kitパスはスキルフォルダの2階層下でしか機能しません。画像はvideos/<name>/assets/に配置し、そのSOURCES.mdに記録すること。理由がない限りデフォルト設定を維持すること：- 白ではなく紙；ティントがかった写真；±1.5〜3°のカード、4%の境界線とソフトシャドウ；
onTwos: true（12 fpsのコラージュモーション）；紙は静止（drift: 0）、しかしオブジェクトは呼吸する：保持されたすべての写真にはbreathe()、カードや切り抜きには 2〜3 ピクセルのfloat()、レンズの外に出る 1〜2 つのscrap()、実際の文書の背後にghost()（LOOK_BOOK §10）；- フレーム1で主張が読めること；
footage()でカード内に実際のクリップ； - ホールドでは +1〜3 %/s、強調では +4〜6 %/s のプッシュ；
- 注釈はその単語のタイミングで；3つの音声タイプ；1〜3のアクセント、それぞれに1つの役割；
- 9:16では、上部12%と下部20%に重要なものを置かないこと（プラットフォームのUIで隠れます）。
examples/apollo/index.htmlにほとんどのヘルパーの例があります。マップについては、node $SKILL/scripts/map.mjs …を使用。静止画やクリップの前処理には、python3 $SKILL/scripts/photo_treat.pyを使用。
- 最初に静止画をチェック。 シーンチェンジと注釈ごとに
node $SKILL/scripts/render.mjs videos/<name>/index.html --stills t1,t2,…を実行。PNGを開いて確認すること。references/QA.mdを確認し、すべての問題を修正すること。ページエラーでレンダリングが停止した場合、メッセージに不足しているヘルパーとターゲットが表示されます。 - レンダリング。 ドラフトの場合、
node $SKILL/scripts/render.mjs videos/<name>/index.html --voice vo.wav [--music bed.mp3] --gifを実行。キットの合成キューがミックスされます（音楽 -22 dBでダッキング、ルームトーン、-14 LUFS）。最終版には録音したフォーリーを使用：--no-sfxでレンダリングした後、python3 $SKILL/scripts/doc_mix.py silent.mp4 --cues cues.json --words <page> --voice vo.wav --music … --room $SKILL/kit/sfx/cc0/room_tone_office.mp3 --out final.mp4 --stemsを実行（ナレーションをリファレンスとして、すべてのサンプルはそのピークで設定され、その単語にピークアラインされます。SOUND.md）。エフェクト単体でマスタリングしないこと。動画が4Kで表示される可能性がある場合は、--scale 2でレンダリングすること（ネイティブ3840×2160マスター）。 - 最終チェック。 トランジションの箇所でMP4からフレームを抽出。ラウドネスを
ffmpeg -i out.mp4 -af ebur128 -f null -で確認。その後、制作したものとそのソースおよびライセンスを報告すること。
セットアップ（マシンごとに1回）
npm install # gsap, playwright, d3-geo, topojson-client, world-atlas
npx playwright install chromium # レンダラーのブラウザ
# オプション、テクスチャとサウンドを再生成する場合：pip install numpy scipy pillow
# オプション、words.py と doc_mix.py の場合：pip install faster-whisper numpy
# オプション、narration.py の音声を保持した速度変更の場合：rubberband 付きの ffmpeg（macOS: brew install ffmpeg-full）
Node 18+ と ffmpeg 4.4+ が PATH に必要です。キットはプレーンなブラウザ JavaScript であり、ビルドステップはありません。ブラウザプレビューには、npm run preview を実行してそのままにし、http://localhost:8080/videos/<name>/ を開きます。
非妥協事項
- ソース付きの実際の事実のみ。「ファクトシート」カードはOK。本物として提示された偽造書簡、レシート、見出しはNG。
- すべての画像のライセンスが判明していること。借用した映像には画面上にクレジットチップ（「アーカイブ・NASA」）を表示するか、チャンネルが画面上のチップを禁止している場合はキャプションクレジットを付けること。
- Voxのロゴや映像を使用しないこと。「Voxスタイル」は見た目を説明するものであり、ロゴはエンドースメントを暗示します。ユーザーがスタイルキューの一部として「Vox」の文字を画面上に表示したい場合（多くのVoxスタイルリールがそうしています）、バンドルされたフリーのセリフフォントで設定し、「Voxスタイル」ラベルをどこかに表示し、商標リスクを伝えること。最終判断はユーザーに委ねます。
- 地図上の紛争地域を確認すること。
- AI生成画像にテキストを入れないこと。すべてのテキストはページ内で追加すること。
- インド（およびその他の紛争地域）の地図：Natural Earthの境界はデファクトであり、公式ではありません。公開前に ASSETS.md を参照すること。
Vox Mediaとは提携、推薦、または接続されていません。「Vox」はVox Media, LLCの商標です。
ユーザーの動画が「安っぽく見える」場合
静止画を取得し、LOOK_BOOK.mdの18のアマチュア的ミスを確認すること。影響の大きい順のよくある修正：
- 紙の背景と写真のティント。
- トゥー・オン・トゥーのモーションで、一度に一つのものだけ動かす。
- 注釈を単語にキーイングする。
- カードの回転、境界線、シャドウ。
- オブジェクトが入場と退場の間で完全に静止している：
breathe、float、scrapを追加。 - サウンド：主要なアクションに録音したフォーリーを使用し、ピークアラインして、ボイスの下に；音楽はボイスの下に18〜24 dB。
- ディゾルブをカットに置き換える。