Video by Code スキル は何をしますか？
人間とAIエージェントのチームが、コードで決定論的な動画を作成するための実行可能なツールキットと本番ワークフローです。すべてのシーンコードはリポジトリまたはプロジェクトのワークスペース内に保持し、生成されたメディア、オーディオテイク、静止画、検証レシートは、明示的に指定された外部の $PROD ディレクトリに配置します。
作業の順序: ブリーフ → オーディオ & タイミング → スタイル & プロンプト → 3枚のデザインスチル → シーンコード → 決定論 & テキストバウンドゲート → フルレンダリング → 検証 & コンタクトシート → 納品レシート
1. 環境とスモークテスト
新しい動画を制作する前に、スターターの依存関係がインストールされ、リポジトリルートから4秒のスモークテストが成功することを確認してください。
cd starter && npm ci && cd ..
node tests/runtime-contract.mjs
2. プロダクションディレクトリと意図 (RUNBOOK.md §1–2)
- コードチェックアウトディレクトリの外部に絶対パスのプロダクションディレクトリを選択します。
PROD="/absolute/path/to/video-outputs/<project-slug>" mkdir -p "$PROD"/{audio,analysis,stills,renders,checks} templates/brief.mdを"$PROD/brief.md"にコピーし、視聴者、核となるメッセージ、アスペクト比 (1920x1080横向き または1080x1920縦向き)、長さ、音声/音楽ソース、セーフエリアマージンを記入します。
3. オーディオの識別とタイミング (docs/04-music-audio-and-timing.md、docs/05-narration-and-captions.md)
推測したタイムスタンプでアニメーションを行わないでください。まず実際のオーディオファイルを測定し、そのSHA-256ハッシュを記録します。
uv run tools/timing/audio-identity.py "$PROD/audio/source.wav" \
--out "$PROD/analysis/identity.json" --copy-wav "$PROD/analysis/analysis.wav"
- ナレーション:
- ローカルのKokoro ONNX TTSで合成（単語断片マージは
< 4、音声辞書は--say say.jsonを使用）:uv run tools/timing/kokoro-narrate.py script.txt --out-dir "$PROD/audio" --voice af_heart --say say.json - ローカルの
whisper-cliで音声のラウンドトリップを検証:uv run tools/verify/verify-narration.py "$PROD/audio/narration.wav" "$PROD/audio/timing.json" - スクリプト/歌詞の n-gram が参照テキストと完全一致しているかチェック:
python3 tools/verify/check-lift.py candidate.txt reference.txt
- ローカルのKokoro ONNX TTSで合成（単語断片マージは
- 音楽 / 歌詞 / ステム反応型トラック:
- Demucs で6ステム（
vocals, drums, bass, guitar, piano, other）に分離し、44.1kHz WAVに正規化:uv run --python 3.12 tools/timing/separate-stems.py "$PROD/audio/song.mp3" --out-dir "$PROD/analysis" - 120Hz のステムエンベロープ、単調な音楽時間
tau、拍/小節位相、無音、features.f32、および100fpsのギターピッチ/ビブラートを抽出:uv run --python 3.12 tools/timing/analyze-stems.py "$PROD/analysis" --fps 120 --stem-pitch - 単語レベルの歌詞をアライン（
whisper-cli、mlx-whisper、faster-whisper、またはacousticボーカルバンドエネルギーワーピング）:uv run tools/timing/align-words.py "$PROD/analysis/stems/vocals.wav" --script lyrics.txt --backend whisper-cli --out "$PROD/analysis/words.json" - 軽量な単一ファイルキュー / ビートグリッド / ビジュアライザーエンベロープ:
uv run tools/timing/cue-extract.py "$PROD/audio/song.mp3" --out "$PROD/analysis/cues.json"uv run --python 3.12 tools/timing/beat-grid.py "$PROD/analysis/analysis.wav" --out "$PROD/analysis/beats.json"python3 tools/build-visualizer.py "$PROD/analysis/analysis.wav" --out "$PROD/analysis/features.js"
- Demucs で6ステム（
4. スタイル選択とプロンプトアセンブリ (prompts/README.md)
prompts/styles/INDEX.md（13ファミリーにわたる86のオーサリング済みビジュアルスタイルカード）と prompts/briefs/（5つのフォーマットブリーフ：explainer-voiceover、vertical-short、lyric-video、instrumental-visualizer、data-story）を参照してください。
選択したスタイルとブリーフの組み合わせ仕様をアセンブルします:
python3 tools/build-prompt.py <style-id> --brief <brief-id> --out "$PROD/style-prompt.md"
5. シーンオーサリングコントラクト (lib/API.md、docs/06-building-scenes.md、docs/12-advanced-engines-and-benchmarks.md)
すべてのシーンHTMLページは lib/harness.js（window.H）をロードし、必要に応じて以下もロードします:
lib/sound.js（window.SOUND）— プロシージャルWeb Audio合成lib/features.js（window.FEATURES）— 120Hz バイナリfeatures.f32ステムカーソル、不応性オンセットパルス、単調なtau(t)、words.json歌詞ルックアップlib/ink-doodle.js（window.INK）— 8fps 決定論的ラインボイル、ぐらついたドゥードゥルプリミティブ、左揃えの大文字書き込みmarker、Ken Burnsplateカメラlib/webgl-post.js（createPost）— 4ステージのThree.jsポストプロセッシング（FxOverShader、UnrealBloomPass、FinalGradeShader（ACES /paperMode）、輝度のみのインパクト反転、グリッチ、シェイク、グレイン、鮮明なUIオーバーレイ）
すべてのページは以下を公開します:
<canvas id="c" width="1920" height="1080"></canvas>（または縦向きの場合は1080×1920）window.DURATION（秒）とwindow.FPS（デフォルト30）window.__ready（フォントとキャッシュされたオフスクリーンプレートの準備ができた後に解決されるPromise）window.__renderFrame = (t) => { ... }— 秒単位のtの純粋関数- すべてのフレームを
ctx.reset()（またはバランスの取れたsave()/restore()）で開始します。 - フレームループの外で
H.rng(seed)とH.noise(seed)を使用します。フレーム間で可変状態を決して進めないでください。 - ペーパー/サーフェステクスチャは
H.paperTexture(...)またはH.offscreen(key, w, h, fn)を使用して一度だけキャッシュします。 - ストーリー上重要なテキスト（
{text, critical: true, left, right, top, bottom}）に対してwindow.__textBounds = () => [...]を公開し、自動化されたセーフエリアチェックがすべてのフレームを検証できるようにします。
- すべてのフレームを
window.scoreSound = (k) => { ... }— 固定タイムラインタイムスタンプでプロシージャルサウンドイベントをスケジュールします（--voiceが指定された場合、自動的にBGM/音楽を抑制します）。
テストからの主要なプロダクションルール
- セーフエリアマージンとフォントウェイト: macOS Chromeでは、
Arialはウェイト400と700のみを提供します（600は700のボールドにスナップされ、行幅が約9%広がります）。すべてのフレームでmeasureText(s).actualBoundingBox*を常に監査してください（1080x1920縦型ショートの場合、x: 80..960, y: 190..1640）。 - 連続カメラスタイル（
transit-map、パンアンドズーム）: カメラ補間はbeat[i].startで開始します（iがbeat[i].startで切り替わる場合、beat[i].start - preRollでは開始しないでください。1フレームのジャンプが発生します）。ビートローカルオーバーレイは0.20 sでフェードし、ワールド空間ラベルはクリップされたマップビューポート内にある場合にのみ描画されるようにガードします。
6. 静止画のレンダリング、決定論のチェック、マスターレンダリング (docs/07-rendering.md)
- シーク決定論ゲート:
node starter/determinism.mjs path/to/film.html - デザインスチルゲート（フルレンダリング前に、開始、中盤、終盤のフレームを検査）:
node starter/render.mjs path/to/film.html --stills 1.5,12.0,24.0 --outdir "$PROD/stills" - フルMP4レンダリング:
- リファレンスシングルワーカー Playwright レンダラー（デフォルト 30fps Canvas2D + プロシージャルオーディオ）:
node starter/render.mjs path/to/film.html \ --out "$PROD/renders/master.mp4" --fps 30 --audio page \ --voice "$PROD/audio/narration.wav" - マルチワーカー GPU WebSocket レンダラー（60fps Three.js / WebGL / キネティックタイポグラフィ）:
node tools/render/parallel-ws-render.mjs \ --url "http://127.0.0.1:5173/?capture=1" --duration <DURATION> --fps 60 --workers 4 \ --audio "$PROD/analysis/analysis.wav" --out "$PROD/renders/master.mp4" - ブラウザレス Python + Pillow
rawvideoレンダラー（キャプション付きワークブック & チュートリアル）:uv run tools/render/workbook-render.py \ --spec workbook.json --audio "$PROD/audio/narration.wav" --out-dir "$PROD/renders"
- リファレンスシングルワーカー Playwright レンダラー（デフォルト 30fps Canvas2D + プロシージャルオーディオ）:
7. 必須検証ゲート (docs/08-verification.md)
すべてのプロダクションは、引き渡し前にこれらのチェックを実行し、結果を "$PROD/checks/" に記録する必要があります:
- ストリーム、デコード、同期、ラウドネスゲート:
uv run tools/verify/verify-video.py "$PROD/renders/master.mp4" \ --expect-seconds <DURATION> --fps 30 --width <W> --height <H> \ --json "$PROD/checks/verify-video.json" - コンタクトシートによる目視検査:
uv run tools/verify/contact-sheet.py "$PROD/renders/master.mp4" \ "$PROD/checks/contact-sheet.jpg" --n 16 --cols 4 --tile-width 270contact-sheet.jpgとシーンスチルを目視で検査し、テキストのクリッピング、ラベルの衝突、意図しない空白/フリーズフレームがないか確認します。 - トランジション & カットの急峻さ監査:
uv run tools/verify/cut-harshness.py "$PROD/renders/master.mp4" \ --top 15 --json "$PROD/checks/cut-harshness.json" - ルック & パレット診断:
uv run tools/verify/measure-look.py "$PROD/renders/master.mp4" \ --samples 16 --json "$PROD/checks/measure-look.json" - 全フレームテキストバウンド監査:
tests/layout.mjsのパターンに従い、すべてのフレーム0 .. frames-1にわたってfillTextインク境界とwindow.__textBounds()を検証します。
8. パッケージングと納品 (RUNBOOK.md §12)
"$PROD/qa.md"（templates/qa.md から）と "$PROD/delivery.md"（templates/delivery.md から）を完成させます。機械検証（PASS/WARN の状態）は、人間によるクリエイティブな視聴および聴覚承認とは別に報告します。
主要な参照
README.md— クイックスタートと章のインデックスRUNBOOK.md— 12ステップの人間-AIエージェント制作チェックリストlib/API.md— 正確なHグラフィックスおよびSOUNDプロシージャルオーディオコントラクトexamples/README.md— 実践的な横向き、縦向き、スタイルスタディの例docs/10-pitfalls.md— 症状 → 原因 → 修復テーブル