ai-video-render: コードアニメーションのレンダリング
使用タイミング
film.json が存在し、スタイルが選択されていること。このスキルはストーリーボードを画像に変換します：レンダリングページ、フレームキャプチャ、無音動画。ここではナレーション作業は行いません。
決定論契約（譲歩不可）
- すべての画像は時間の純粋関数です：
window.render(t)が任意の瞬間のフレームを描画します。requestAnimationFrame、setTimeout、CSSトランジション、エクスポート用のフレーム間状態保存は禁止。 - すべての乱数は固定シードを使用します。レンダリングパスでシード指定なしの乱数ソースや実際の時計を使用しないでください。
- 各フレームの開始時にキャンバス状態をリセットします。
- ページは最初の成功したレンダリング後に
window.seek(t)、window.render(t)、window.ready = trueを公開します。 - 同じタイムスタンプを2回レンダリングすると、同じフレームが生成される必要があります。フルレンダリング前に
scripts/determinism-check.jsでこれを確認してください。
1. スタイルを選ぶ（ユーザーが選択、厳格なゲート）
style-options.md に、視覚的な違い、理由、制限を記載した推奨スタイル1つと代替スタイル2つを提案します。ユーザーが選ぶのを待ちます。「とにかく実行」は選択の許可ではありません。
スタイルカタログ（上流から自分で取得してください；プロンプトファイルとデモソースはこのリポジトリに含まれません）：
- フラットフローチャート、手書きノート、レトロ新聞、レトロペーパーカット、シュールレアリスムコラージュ、3Dカートゥーン、黒背景テック（7セット、dashi-animationstyle）。
- 15のMGスタイル：フラットベクター、ラインアート、アイソメトリック2.5D、3Dレンダー、シェイプモーフ、ステッカー解説、サイバーパンクHUD、コラージュ、オーロラガラス、バウハウス、シンセウェーブ、ピクセルアート、リキッドモーション、フレームバイフレームラインボイル、バラエティキャプション。
- 36のアートスタイルレシピ（huashu-art-motion）とlemo-opuscarスタイル：インパストオイル、水彩、中国水墨画、浮世絵、ホワイトボード解説。
スタイル使用ルール：
- 1つの動画は1つのスタイル、1つのテーマ、最大2つのアニメーション文法を使用します。
- スタイルのプロンプトまたはデモから手法を学び、新しいトピック用にコンテンツを作り直します。動画にデモの構成、キャラクター、アセットをコピーしないでください。
- スタイルプロンプトが「特徴的な要素を変更しない」と指示している場合、創造的なシード（ストーリー、ブランド、コピー、パレット）または出力（例：縦型1080x1920、尺）のみを変更します。
- ユーザーが明示的に要求しない限り、青紫グラデーション、暗い紫色の星空、ネオンシアン・パープル（明らかにAI風味と読まれる）は使用しないでください。
- コードで写実的な人間の顔を描かないでください。AI生成映像は、グリーンスクリーンのキャラクターショットとしてコード作成シーンに合成する場合のみ使用します。画像生成機能がない場合は、手と背中のみを表示します。
2. ショットごとに構築する
templates/render-page.htmlとtemplates/render.jsからレンダリングページを作成します。デフォルトは1920x1080（縦型：1080x1920、再レイアウトされた構成と字幕、水平フレームのスケーリングは不可）。- 一度に1つのショットを構築します。ショットごとに3つの静止フレーム（開始、中間、終了）をレンダリングし、テキストあふれ、重なり、被写体サイズ、画面上の尺を確認します。次のショットに移る前に問題を修正します。
- 30秒を超える動画の場合、まずモーションブラーなしで低解像度サンプルをレンダリングし、確認してからフルバージョンをレンダリングします。
- 3Dレンダースタイルは例外：Blenderで画像をレンダリングし、Webページ上で文字とグレインを追加します。
3. レンダリングとアセンブル
- ヘッドレスChromeが動画のfpsでフレームごとに1スクリーンショットをキャプチャします。ffmpeg（H.264、CRF 16）でアセンブルします。ここではオーディオトラックは保持しません。ナレーションは次のスキルでミックスされます。
- 音と画像のタイムラインを1つに保ちます：カットとキーアクションはビートグリッドまたはナレーションタイムライン上に配置します。
- ffprobeで確認：H.264、1920x1080（または1080x1920）、30 fps、フレーム数がfilm.jsonの尺×fpsと一致すること。
出力契約
render-page.html+render.js（動画のレンダリングページ）。frames/（フレームごとのキャプチャ）。film.mp4（無音映像）。render-report.md（解像度、fps、フレーム数、決定論チェック結果）。
ルール
- 実行しなかったチェックは「未実行」と記載します。行われていないチェックに合格したと主張しないでください。
- HTMLページ、無音の中間ファイル、またはプロンプトを完成した動画として提示しないでください。
- 参照画像はユーザー自身のものかライセンス済みであり、完成した動画に元の画像を含めないでください。