walter-io/vibecoding-remotion

Remotion ストーリー映像化スキル

「1つのストーリー」を1080pの映像作品に変換します：ストーリーを読む → テーマの雰囲気を抽出 → そのテーマ専用のビジュアル言語をデザイン → 「セクション（章）」→「ショット（映像のビート）」に分解 → 各ショットにプロットの感情に合わせたシーンアニメーションをデザイン → テキストカンポイント演出 → レンダリング → サンプリングチェック。

第一原則：スタイルはテーマに奉仕し、固定テンプレートは存在しない

パイプラインと方法論は汎用的ですが、ビジュアルスタイルはテーマごとに再設計する必要があります。

• 新しいストーリーごとにまず「テーマ雰囲気分析」を行います：このストーリーのキーワードは何か（ノスタルジック？熱血？ミステリー？童話？SF？）→ 配色、フォントの雰囲気、アニメーションのリズム、シーンの画風を導き出す
• 例（あくまで参考であり、規範ではありません）：温かい思い出系 → セリフ体明朝 + クリーム/ゴールド + スローテンポのソフトフォーカス；熱血スポーツ系 → サンセリフ太字 + 高彩度赤/黒 + 高速カット；SF系 → 寒色 + 等幅フォント + グリッチ/スキャンラインエフェクト；童話系 → 丸ゴシック + パステルカラー + 弾むような動き
• 前のプロジェクトのスタイルを次のプロジェクトに持ち込まないでください。ユーザーが明確に指定しない場合は、まず1～2つのスタイル案を提示してユーザーに選んでもらいます。

核心理念

• 映像で物語る：各ショットの映像は、そのセリフのプロットの感情とアクションに一致しなければなりません（地震のセリフには揺れる教室、歓声のセリフには旗を振る群衆、行列のセリフには柵の長蛇の列）——ミスマッチ（悲しい場面に祝賀ムード）は最大の禁忌です。
• シーンはプロシージャルアニメーション（人物シルエット/幾何学図形 + sin波で位相をずらしたモーション、フレームごとに駆動）を使用し、静的テクスチャは使いません。アニメーションの密度はテーマに応じて調整します（優しいテーマは少なめで遅く、熱いテーマは多めで速く）。
• タイポグラフィはパフォーマンスの一部です：フォントの雰囲気、文字サイズの階層、キーワードの強調色はすべてテーマから導き出します。

パイプライン（5ステップ、順序固定）

1. スタイル導出：テーマキーワード → 配色パレット / フォントの雰囲気 / アニメーションのリズム / シーンの画風 →（ユーザーが指定しない場合は選択肢を提示）
2. ストーリー分解：プロットの弧に沿ってセクション（章）に分割 → ショット（1～2行で1ショット）に分割。各セクションの最後に短いキーフレーズを抽出してサマリーカードを作成。行末の句読点を削除（clean_tail() による共通クリーンアップ）。
3. タイムライン gen_assets.py → timeline.json（ショットの開始/終了、レイアウト、カンポイント。MIN_SHOT 3.5秒のスローカットベース、テーマに応じて調整可能）
4. アサーション監査 + 同期 check_views.py（マッピングカバレッジ/オーバーラップ）+ verify_timeline.py（行末句読点=0 / 最小ショット長≥3.0秒 / サマリーカードの長さ / 年齢タグ、しきい値はテーマに応じて調整可能）——いずれかが失敗した場合はレンダリング禁止 → sync-timeline.mjs
5. レンダリング + サンプリングチェック npx remotion render → ffmpegでキーフレームをサンプリングしレビュー（シーンの感情、テキストの階層、アニメーションのタイミング）

ハードルール（テーマに関係なく、常に有効）

• 行末には句読点を一切付けない（ダッシュも含む）：共通クリーンアップ関数 + アサーション = 0
• 映像とセリフの感情は厳密に一致させる。SHOT_VIEW マッピングテーブルで絵コンテを変更した場合は、必ず監査を再実行する。
• ネストされた Sequence 内で子コンポーネントのアニメーション原点は、そのコンポーネントが属するショットの開始フレーム（startFrame を渡す）とする。そうしないと、入場アニメーションが静かにスキップされる。
• 政治的なシンボルは規定の描き方に従う（国旗 = 赤地 + 大きな星1つと小さな星4つ）、近似した落書きは禁止。
• 実際の声優によるナレーションに変更する場合：wavファイルを配置し、gen_assets.py を再実行するとタイムラインが自動的に再構成される。

既存アセット（参考実装として、再利用・改造可能）

templates/ は完成プロジェクト「90年代年代記」（温かい思い出テーマ：セリフ体明朝 + クリーム/ゴールド + スローテンポ + 群衆シルエット群像）から来ています——これはテーマ導出の一例であり、デフォルトスタイルではありません：

• 直接再利用可能な骨格：gen_assets.py（テキスト→タイムライン構造）/ check_views.py（マッピング監査）/ verify_timeline.py（包括的アサーション）/ sync-timeline.mjs / fit.ts（折り返し）/ beat.ts（ビート）
• テーマに応じて書き換えるビジュアルレイヤー：theme.ts（配色/フォントサイズ）/ serif.ts（フォント）/ scenes.tsx（シーンアニメーション）/ TitleCard.tsx / Era.tsx / Intro.tsx（レイアウト）
• 8つの群像アニメーションテクニックは移植可能：群衆の旗振り、テレビを取り囲む、地震の教室、行列、マスクをした歩行者、子供を追いかけて食事をさせる、花火、提灯（配色と画風を変えれば新しいシーンになります）

詳細パラメータ

references/spec.md：上記の参考実装の完全なパラメータ（フォントサイズ5段階、入場4方向、被写界深度、スローフェードイン時間、シルエット色調グラデーション）。新しいテーマはこれらを参考に量を調整し、数値をそのままコピーする必要はありません。