kbohara315/what-if-animation

What If アニメーション

1行のお題を入れると、完成した15〜25秒のエピソードが出力されます。すべてのフレームはClaudeが作成するSVG（Remotionでレンダリング）で構成され、音声と効果音はElevenLabsから生成されます。2つのサンプルが studio/src/episodes/ に同梱されており、どちらもレンダリング可能です：rewind（「もしも10秒巻き戻せたら？」、能力としてショットが逆再生される証明クリップ）と copy-paste（「もしも何でもコピペできたら？」、スキル初のフルラン：新しいキッチンセット、サイエンスビートのための回路図、クリフハンガーの停電）。作業を始める前に、自分のトピックに近い方を読んでください。

ファイル	内容
references/formula.md	7ビートのWhat Ifフォーミュラ、15〜25秒の形状、スクリプトルール、トピックの選び方
references/look.md	計測されたルック、テンポ、ショット語彙、ストーリーボードとモーションのチェックリスト
references/kit.md	構成要素：エンジン、キャスト、セット、ルームキット、ライト、UI、ルック、各要素の追加方法
references/sound.md	サウンドイベントの書き方、プロンプト、レベル、コスト
references/traps.md	2つのサンプルエピソードで時間を消費したすべてのポイント
studio/	Remotionプロジェクト：一度コピーし、その後すべてのエピソードがこの中に格納される
scripts/	voice、plan、stills、board、sfx、mixcheck、motiongrid、master（Python 3.9以上とNode）

ルール

• オリジナルキャラクターのみ。 Pip（ヒーロー、ルックB）とMo（彼の友人）は私たちのキャラクターであり、妹、母、スーツもリグ上のものです。チャンネルの独自ヒーローや、有名なアニメキャラクターに似たものは一切使用禁止。新しいルックは必ずキャストシートで確認すること（Moの最初の帽子は、あるキャラクターに近づきすぎたため却下されました）。
• オリジナルストーリー。 フォーミュラは共有されていますが、エピソードは他の誰のものでもありません。チャンネルのタイトルを再制作しないでください。
• バイラルチャンネルがClaudeで作られているとは決して主張しないこと、また他のツールで作られているとも主張しないこと。誰もその制作方法を公表していません。
• キーは名前でのみ指定。 ELEVENLABS_API_KEY は環境変数またはスタジオの上の .env から取得。キーを印刷、ペースト、ハードコードしないこと。
• 毎回の実行のElevenLabsクレジットを報告すること：スクリプトは out/<slug>/costs.json にログを出力し、master.py が report.json で合計を計算します。音声のコストはアカウントの履歴から正確に読み取ります。サウンドクリップはそこに表示されないため、アカウントカウンターからコストを取得しますが、これは遅延する可能性があります。報告の前に再読み取りしてください。エピソードを引き渡す際に数字を伝えてください。copy-paste実行では152クレジット（音声78、12の新しいクリップに74）かかりました。
• アニメーション前にストーリーボードを作成すること。 スチルが自己チェック（ステップ5）に合格し、ループ内にユーザーがいる場合はボードを見せて確認が取れるまで、ビデオレンダリングは行いません。
• すべての事実は現実のもの。 スクリプト内の数字は、最初にエピソードの science フィールドで計算・出典を示します。

セットアップ（マシンごとに1回）

Node 18以上、ffmpegとffprobeがPATH上にあること、Python 3.9以上と numpy と Pillow、そしてElevenLabsのキーが必要です。

cp -r <skill>/studio ./what-if-studio && cd what-if-studio && npm install

以下のすべてはそのスタジオフォルダから実行します。<skill> はこのスキルのフォルダです。オフラインまたは独自のブランドフェイスで作業するには、表示フォントを public/fonts/ に置き、src/studio.config.ts の titleFont を設定してください（デフォルトのタイトルフォントBricolage GrotesqueとUIフォントはレンダリング時にGoogle Fontsから読み込まれます）。既存のスタジオを新しいエンジンにアップデートするには、<skill>/studio/src/engine をその src/engine に上書きコピーしてください。

パイプライン

手順を順番に実行してください。各手順の終わりに、次の手順の前に確認するものがあります。

1. 脚本

references/formula.md を読んでください。まずYouTubeで前提を検索：もしWhat Ifチャンネルがすでにその正確なエピソードを持っている場合、能力またはルールを変更してください。トピック行から、能力の単語、そのルール、3つの段階的なデモ、そして転換（数字を含む1つの現実の事実）を決定します。src/episodes/<slug>/episode.json を id（PascalCase、コンポジション名）、slug、topic、title（2行）、script（ビートごとに1エントリ）、science（各事実：主張、計算、出典）とともに作成します。45〜65語。声に出して読んでみてください。すべての行が絵になる必要があります。

2. 音声

python <skill>/scripts/voice.py <slug>

キャラクタータイムスタンプ付きのElevenLabsテイク（356文字のcopy-pasteテイクは78クレジット）、その後、ポーズをジャンルのテンポに調整：public/<slug>/voice.wav と src/episodes/<slug>/words.json。長さ（15〜25秒）と出力されるワードタイムを確認します。episode.json の gaps でポーズを調整し、再実行：テイクはキャッシュされるため、無料です。単語を変更すると、再度APIが呼び出されます。

3. ショットリスト

スクリプトの各絵に対して1ショット（通常9〜14）を設計し、カットごとにサイズとアングルを変えます（ワイド、インサート、ミディアム、クローズアップ、肩越し、ハイ、ロー；references/look.md 参照）。episode.json に追加：

• shots: { "id": "S1", "size": "medium", "set": "kitchen", "key": 14, "note": "what we see" }（key はストーリーボードが表示するショット自身の時計のフレーム）
• edit: カットごとに { "shot": "S1", "at": "cookie" }、着地する単語でキュー（plan.py がキューの形式をリストアップ；reverse、from、to、look はショットの時計を曲げる能力用）
• fx: 1フレームのフラッシュやシェイク、{ "at": "S3+2", "kind": "flash" }

python <skill>/scripts/plan.py <slug>

timeline.json と out/<slug>/shotlist.md を作成し、テンポを表示します。オープニングでは1分あたり27カット以上を目指し、約3秒以上の静止ショットは避けてください。描画を始める前に、フラグが立ったものを修正してください。

4. ストーリーボード

references/kit.md を読んで構成要素を確認します。src/episodes/<slug>/shots.tsx を作成：ショットごとに1コンポーネント、各コンポーネントはその時計 t の純粋関数（2つのサンプルの shots.tsx のパターンをコピー）、そして index.tsx（エピソードとその能力ルック）、その後エピソードを src/episodes/index.ts に追加します。このステップでは、各ショットは key フレームでのみ正しければ構いません。ライブラリにない場所が必要な場合は、ルームキットで構築し、src/engine/sets/（およびスキルのコピー）に追加して、次のエピソードが使用できるようにします。copy-paste実行でキッチンと回路図を追加したのと同様です。新しいキャラクターやコスチューム：ルックを追加し、キャストシートで確認します（npx remotion still src/index.ts Cast out/cast.png）。

npx tsc --noEmit
node <skill>/scripts/stills.mjs <slug>
python <skill>/scripts/board.py <slug>

out/<slug>/storyboard.jpg：ショットごとにキャプション付きの静止画1枚。

5. スチルの自己チェック

ストーリーボードを見て、out/<slug>/board/ のすべてのスチルをフルサイズで開き、references/look.md のストーリーボードチェックリストをショットごとに正直に実行します。失敗した箇所を書き留め、修正し、該当ショットだけを再レンダリング（stills.mjs <slug> S3 S7）、シートを再構築して再度確認します。合格するまで繰り返します。修正を発明する前に、references/traps.md で現在の失敗を確認してください。ユーザーがループ内にいる場合は、アニメーション前にボードを見せてフィードバックをもらってください。

6. アニメーション

各ショットをキーポーズから生き生きと動かします：poseAt キー（アンティシペーション、ホールド、オーバーシュート）、faceAt（表情）、kf によるカメラ移動、能力のルック、fx。その後、ドラフトをレンダリングしてモーションを確認します：

python <skill>/scripts/master.py <slug>
python <skill>/scripts/motiongrid.py <slug> S2 S5
node <skill>/scripts/stills.mjs <slug> --frames 120 240

グリッドをフリップブックのように読み、references/look.md のモーションチェックリストと照合し、問題がなくなるまで修正と再レンダリングを繰り返します。

7. サウンド

references/sound.md を読んでください。episode.json に sound を追加：クリップ（プロンプトと長さ）、可視アクションごとのイベント（ショットにキュー）、ロケーションごとのアンビエンス、音楽ベッド、レベル。ライブラリにすでにあるものを確認し、その後生成：

python <skill>/scripts/sfx.py <slug> --dry
python <skill>/scripts/sfx.py <slug>

使用したクレジットを表示し、timeline.json にステムボリュームを設定します。その後、すべての単語が明瞭に聞こえることを確認します：

python <skill>/scripts/mixcheck.py <slug>

単語が発声されている間に、エフェクトまたは音楽が音声から3 dB以内に近づく瞬間をリストアップします。単語を説明するヒットは、単語の直後のポーズに配置し、単語上には決して配置しません。キーラインの下のベッド（ハム音、ドローン音）は下げます。ステムの大半が音声を圧迫する場合は、sfx_lu を下げます。意図的なオーバーラップ（タイトルブーム、転換）のみが残るまで、sfx.py とチェックを再実行します。

8. マスタリングと引き渡し

python <skill>/scripts/master.py <slug>

レンダリングし、ミックスを-14 LUFSにし、ピークを-1 dBTP未満に抑え、out/<slug>/report.json（長さ、ラウドネス、テンポ、クレジット）を作成します。最終ファイルを音声付きで一度最後まで確認します。out/<slug>/<slug>-final.mp4 と out/<slug>/storyboard.jpg、および長さ、使用したElevenLabsクレジット、まだ改善したい点を添えて引き渡します。

エピソードの格納場所

パス	内容
src/episodes/<slug>/episode.json	あなたが書くすべて：脚本、科学、ショット、編集、fx、サウンド
src/episodes/<slug>/shots.tsx、index.tsx	描画：ショットごとのコンポーネント、能力のルック
src/episodes/<slug>/words.json、timeline.json	voice.pyとplan.pyが作成（sfx.pyがボリュームを追加）
public/<slug>/	voice.wav、sfx.wav、music.wav
out/<slug>/	ボードスチル、storyboard.jpg、shotlist.md、モーショングリッド、レンダリング、costs.json、report.json
library/sfx/	生成されたすべてのサウンドクリップ、全エピソードで共有