Communitygithub.com

mromidev/cartoon-3d-short

約55〜70秒の縦型カートゥーン・ストーリー動画を、「2Dキャラクター×カラフルな3D世界」スタイルで制作します。3Dの町や世界に墨風の線画、鮮やかな空、被写界深度、滑らかなカメラワーク、ナレーション、合成SFXと行進曲風BGMを組み合わせ、Remotionとthree.jsでレンダリングします。

cartoon-3d-short とは?

このスキルは、「The Bridge That Fell for a Song」(2026年10月31日制作)で実績のある、約55〜70秒の縦型カートゥーン・ストーリー動画を生成するためのものです。スタイルは「カラフルな3D世界に2Dキャラクター」という特徴的なビジュアルで、平らな豆頭のカートゥーンカードにインクの輪郭線、ペイント調の3Dの町と世界、黒いインク線、鮮やかな空、被写界深度の背景、滑らかなカメラワーク、ナレーション、合成された効果音と行進曲風の音楽を使用します。 このスキルは主にClaude Codeや類似のAIエージェント向けに設計されており、「あの橋の動画のように」、「あの兵士/橋の短編のように」、「あのカートゥーン3Dスタイルで」といったユーザーのリクエストに応答して使用します。制作プロセスは、トピックと事実の選定、スクリプト作成(特定のビート構造に従う)、音声生成とワードタイミング調整、ショット計画、3Dワールド構築、2Dキャラクター制作、ポストプロダクション(インク、レンズブラー、ブルーム、グレーディング)、サウンド制作、ルックチェック、最終レンダリング、配信という11のステップからなります。 各ステップは具体的かつ詳細な指示で構成されており、例えばカメラワークは「smootherstepグライド」、被写界深度は「目の高さにピントを合わせる」、キャラクターデザインは「豆頭、棒状の手足、インクのドットの手」など、非常に精密なルールが設定されています。また、品質検証のためにOpus maxモデルによるチェックや、参照フレームとの比較、フレームごとのQAなど、厳格な品質管理プロセスを備えています。 このスキルは、アートスタイルと技術的実装の詳細を学ぶための研究資料(references/フォルダ)を参照しますが、それらの資料は私的な学習用であり、アップロードや公開は禁止されています。常に独自のストーリー、キャラクター、音声を生成することが求められます。

対応~Claude Code~Codex CLI~Cursor
npx skills add mromidev/claude-animated-shorts

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

カートゥーン3Dストーリー短編(three.js + Remotion)

実績例:「The Bridge That Fell for a Song」。1831年のブロートン橋と74人の兵士が歩調を合わせて行進したことにまつわる、67秒のオリジナル短編です。

  • コード:src/videos/bridge/(あなたのRemotionプロジェクト内の構成 BridgeShort、1080x1920、30 fps)。
  • スクリプト、音声、サウンド:~/bridge-short/。
  • スタイル研究:references/。

スタイルリファレンスは非公開で研究されたチャンネルです(references/:STYLE_BIBLE.md、reports/*.md、frames/)。

  • それらの動画は私的学習用資料です。アップロード、公開、送信は絶対に行わないでください。
  • それらのスクリプト、キャラクター、ショットをコピーしないでください。ストーリー、キャラクター、音声は常に独自のものです。
  • ナレーションや説明文でチャンネル名を決して言わないでください。

適用されるユーザールール:

  • 動画内にキャプションやラベルを入れない。
  • 英語のみ。
  • 音声:一定のトーン。
  • ジョークは調査された実際の事実に基づく。
  • 標準ミックス:音楽 +3 dB、SFX -6 dB、音声はそのまま。
  • 最終出力 2K 縦型:1440x2560、--scale 1.3333。
  • Opus max がすべてのチェックを検証。
  • 各ステップ後に保存。
  • スクリプトが承認されたら「Just do it」。

パイプライン

  1. トピックと事実。 物理的な原因と結果がある(視覚的に表現できる)驚くべき実話を1つ選び、それを説明するシンプルな日常のアナロジーも用意します。
    • 事実とその出典を SCRIPT.md の先頭に書きます。
  2. スクリプト(約3.7語/秒、55〜70秒)。橋の短編からのビート構造:
    • フック: 不条理な事実を一文で(「74人の兵士が橋を歩いて渡っただけで鉄橋を倒した」)。
    • 設定: 年、場所、誇り。
    • アクション: 3〜4ビートでエスカレーション、各ビートは少しずつ大きくなる。
    • スナップ: 壊れる瞬間。
    • 無表情の二行: 「幸いにも…/不幸にも…」
    • 説明: 日常のアナロジーを通した1つの物理学のアイデア(ブランコに乗る子供)。
    • 結果: それが生み出したルール。
    • コールバックのひねり: エンディング。
    • 視聴者がすでに見ているものを画面上で説明しないでください。
  3. 音声。 voice.wav を録音または生成し、そのワードタイミングを words.json に作成します(任意の音声認識ツールで単語のタイミングを取得)。
    • プロジェクトフォルダ、例えば ~/bridge-short/voice/ に配置します。
    • ワードタイミングは手動で修正します。すべては words.json にタイミングが合わせられます。
  4. ショット計画 story.ts:templates/bridge/(最終的な橋のソース。Remotionプロジェクトの src/videos/bridge/ と同じ)を src/videos/<name>/ にコピーし、src/Root.tsx で BridgeShort の隣に新しいコンポジションを登録し、名前を変更します。
    • SHOTS:id、a/bフレーム、ライト(昼/ゴールデン)、群衆モード、tau ストーリー時間。
    • XFADE:場所/時間の変更時のクロスフェード。
    • FLASH_AT:フック後の白いフラッシュ。
    • CAMS:ショットごとのキー {f, dur?, cut?, s: f => {pos, look, fov, roll}}。
    • KICKS:インパクト時のフリップシェイク。
    • DOF/dofAt:ビートごとのレンズブラー。
    • FOREGROUND:近接のフレーミング用小道具。
    • すべての視覚的なリアクションは、その単語の0〜3フレーム前に発生します。
  5. ワールド。
    • lights.ts:LIGHTS と、各ライトごとの LOOK(空/川/雲のパレット)。
    • shade.ts:2トーンシェーディングと untone()。
    • build.ts:町、家、Kenney CC0 キットのプロップ、色変更、カメラを遮るものの視線カリング。
    • paint.ts:HD Canvas2D で描かれたテクスチャ、継ぎ目は暗い色合いでペイント。
    • world.ts:空のシェーダー、フォグ = 地平線の色、川、フレームごとのポージング、サンはショットごとに固定されカメラ相対。
  6. キャラクター。
    • toon.ts:Canvas2D の Pen 描画API、600x1000 のデザインキャンバス、靴底は y = 975、豆頭、棒状の手足、プラム色の可変幅アウトライン、表情ライブラリ。
    • cast.ts:カメラ対面のビルボード、群衆、エフェクトカード、瞬き、歩行サイクル。すべてのビルボードは NOINK レイヤーに配置。
    • cardshade.ts:シーンのライトで照らされるカード、エミッシブなし。
  7. ポスト(Bridge.tsx + ink.ts + lensblur.ts + grade.ts)。
    • コンポーザー順序:インク → レンズプレ → レンズメイン → ブルーム → NEUTRAL トーンマップ → グレード(MSAA 4)。
    • すべてのピクセルパラメータは出力高さ / 1920 でスケーリングします。
  8. サウンド(~/bridge-short/audio/:timeline.py、sfx_gen.py、sfx.py、music.py、instruments.py、dsp.py、mix.py)。
    • イベントテーブル → 合成SFX と、音声の下でダッキングされたオリジナルスコア。
    • 出力:mix.wav(48 kHz、正確な長さ)、ステム、cues.md。
    • サウンド作成前にピクチャーの時間定数をロックします。後でタイミングを変更する場合はサウンドを再実行する必要があります。
  9. ルックチェック。 node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5 を実行。
    • BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx を設定してサンドボックスコピーをレンダリング。
    • python scripts/sbs_sheet.py out.jpg --ours ... --ref ... で参照フレームとのサイドバイサイドを作成。
    • Opus max 検証者に送信:1〜3枚の画像、200ワード以内の判定。
  10. 最終レンダリング。
    • npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333
    • -map 0:v:0 -map 1:a:0 でマルチプレックス(Remotionは無音のオーディオトラックを書き出します)。
    • QA:python scripts/short_qa.py final.mp4 out/<name>/qa shots.json で全フレームの黒、白、フリーズ、ポップフレーム、ラウドネス、シートをチェック。
    • 見つかった問題を修正し、徹底的なOpus監査を実行。
  11. 配信。 最終mp4をSendUserFileで送信、メモリを更新、ノートを書き込みます。

最終ルック値(4回のベリファイアラウンド後の橋の値。すべて templates/bridge/ にあり)

新しい短編は常に templates/bridge/ から開始( src/videos/<name>/ にコピー):ルックはこれらの値に、ストーリーは story.ts / build.ts のレイアウト / cast.ts の役割に存在します。最終的なOpus maxスコア:カラー デイ7、ゴールデン5-6、ライティング5-6、インク6、テクスチャ5-6、キャラクター7、深度6-7、構図6-7(開始時の5/3/4/5/4/7/4/6から改善)。

  • ライトプリセット(lights.ts、サンはカメラ相対でショットごとに固定):
    • デイ:az 75 / el 48、lit [1.58,1.5,1.33]、shade [.30,.29,.36]、lift [.05,.06,.11](クールティントはシャードのみ)、空 上部 #3e7fd2 → 地平線 #b8d0ec、フォグ = 地平線、25→300 m、uSat 1.08、60 m 以遠で約15%の青いヘイズ。
    • ゴールデン:az 6 / el 7(バックライトの低い太陽)、キーは #FFB36B ×1.5 へ、バイオレットブルーのシャード(ファサード ≈ #444380)、空 #ffc47c → #8a6f8a、ピーチフォグは50 m以降のみ、太陽の円盤 #ffcf9e + ブルーム、コンタクトブロブ+ リアルなカードシャドウ。
  • アルベド(paint.ts/build.ts):くすんだレンガ / クリーム / オーカー / テラコッタの家、台座、コーニス、窓台、フード、玄関ステップ、煙突 + ポット、高さ 7 / 8.4 / 9.8 m;暖かいグレー/ベージュの石(「絵本風」から彩度 −35%);オーカー色の木製デッキ C* 〜51-58(ほぼ黒の継ぎ目)。鉄は暗く彩度低め。レモン色やラベンダー色の照らされた面は禁止。
  • インク(ink.ts):#030303、近距離(6 m)で5.1 px → 遠距離(90 m)で3.3 px(1080x1920時)、折り目は35°から×0.8、深度ジャンプは1%から、フォグティントは遠方のみ0.3;キャラクターカードは NOINK レイヤー(独自のプラムインクを持つ)。
  • レンズ(lensblur.ts + story.ts の dofAt):1080px時の cInf:フック/川 CU 15-16、クローズアップ 12-14、MS 10-12、パーク 7、ゴールデンスウェイ 5、ワイド/航空 0。前列の目の高さにピントを合わせる。
  • ポスト(Bridge.tsx):インク → レンズプレ → レンズメイン → ブルーム(thr 1.0、int .5、6レベル、半径 .6)→ NEUTRAL トーンマップ → グレード;MSAA 4。フィルムグレインは存在するがOFF(リファレンスにグレインなし;ファイルサイズが4倍になる)。
  • キャラクター(toon.ts/cast.ts/cardshade.ts):豆頭 h/w .94、プラムインク #241726、目は .26 W の間隔、チークなし、14の表情;大人は3.5頭身;歩行バウンス 5%、傾き 1-7°、歩幅 0.8 m;瞬き 0.5-2.3 秒;タイトなコンタクトシャドウ 〜.5 足の下 + デイ時は太陽方向の尾;ゴールデン時は内側のみのリムライト(外部にオフセットコピーを作らない)。
  • カメラ(story.ts):大きなジャンプでカット、smootherstep グライド 18-40 f、すべてのホールドは微動(4 f以上の静的ホールドなし)、インパクト時のフリップキックは7 fで減衰、4-4.6°のロール、フォアグラウンドプロップ(FOREGROUND)はショットの約1/3で使用。

ルックターゲット(リファレンスから測定;references/reports/ 参照)

  • インク:
    • ワールド線:1080幅で約3 px、ほぼ黒 #0b0a0c、距離によらずほぼ一定。シルエット、深度ジャンプ、法線の折り目のみ。壁/床の継ぎ目や地平線には線なし。キャラクターカードはワールドインクで輪郭を描かれない。
    • キャラクターインク:暗いプラム #201628-#2f1d28、下部/影側で太い。
  • カラー:
    • デイの中央ルーマ 〜.57。非インク p5 〜.23(つぶれた黒なし)。照らされた彩度 C* p90 〜55。デイの空上部 〜#5e93d9、地平線は1.28倍明るい。
    • ゴールデン:ピーチの地平線 #ffd08a、バイオレットブルーの影(茶色ではない)、バックライトの太陽。
  • 深度:
    • DOF は表示時間の約1/3(CU、MS、インサート)、cInf 1080px時 10-16 px、目の高さにピント。エスタブリッシングショットとワイドショットはシャープに保つ。
    • フォグ = 地平線の色、デイ 25→420 m、ゴールデン 20→360 m。
    • ブルームはHDRエミッシブのみ:閾値1.0。
  • カメラ:
    • 大きなジャンプはハードカット。その他はすべて18-40 fのsmootherstepグライド、ピーク ≤ 25 px/f(720p時)。
    • すべてのホールドは0.15-0.35%/fで押し込み、パンチワードでは0.6%/f。
    • ロール 4-5°。
    • 手持ち風のフロートなし。インパクトシェイクは毎フレーム符号を反転し、7 fで減衰。
  • キャラクター:
    • 約3.5頭身、脚 1.4 HH。
    • 棒状の手足 約0.055 頭幅、インクドットの手。
    • 豆頭(h/w 〜0.93、あごが狭く、頭頂がとがる)。
    • チークや目のハイライトなし。顔の明るさ 〜.93。
    • 歩行バウンス 3-7%、傾き 1-7°、足を設置。
    • 瞬き 0.5-2.3秒ごと、持続 4 f。

ルックマッチループ(橋のルックに到達した方法;任意の「Xのように見せる」パスに再利用)

  1. まずリファレンスを測定。 トピックごとに1つの分析エージェント(モーション、深度、テクスチャ、キャラクター、ライティング、アウトライン、グレード)、各エージェントは数値(形容詞ではなく)を references/reports/<topic>.md に書き込む。共有ブリーフ:compare/CONTEXT.md。レポートは以降のすべてのエージェントの真実のソースとなる。
  2. サンドボックス、ファイルごとに1オーナー。 プロジェクトフォルダを src/videos/<name>_{cam,world,mat,char,post} にコピーし、エントリ src/sandboxes/<n>/index.tsx を設定(メインと同じ index.tsx、インポートパスのみ変更)。橋での所有権:
    • cam:story.ts(カメラキー、カット、キック、DOFテーブル、フォアグラウンドプロップ)
    • world:world.ts、lights.ts、shade.ts、grade.ts(太陽、空、フォグ、川、カラー、グレード)
    • mat:paint.ts、build.ts(ペイントテクスチャ、建物、プロップ)
    • char:toon.ts、cast.ts、cardshade.ts(キャラクター描画、ポージング、カードライティング、FXカード)
    • post:ink.ts、Bridge.tsx、lensblur.ts(アウトラインパス、コンポーザー、レンズブラー、ブルーム) エージェントは自身のサンドボックス内の自身のファイルのみを編集し、BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx node scripts/bridge-stills.mjs out/<name>/<n>/x_ <frames> 0.5 でスチルをレンダリング。
  3. マージ python scripts/bridge_merge.py [cam,world,mat,char,post] で(メインを backup/bridge_<time>/ にバックアップ、所有ファイルのみコピー)。その後 npx tsc --noEmit(プロジェクトフォルダにフィルター)、次のラウンドの前にメインからすべてのサンドボックスを再同期(cp -f src/videos/<name>/* src/videos/<name>_<n>/)。
  4. 検証 新しいOpus maxエージェントで:サイドバイサイドシート(python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2)、各エリアを10点満点でスコア付け(カラーデイ/ゴールデン、ライティング、インク、テクスチャ、キャラクター、深度、構図)し、番号付きの修正リストとフレーム番号を付ける。各修正をファイルオーナーにマッピングし、SendMessageでそのオーナーのエージェントを再開(コンテキストを保持)。橋のスコア:ラウンド1 5/3/4/5/4/7/4/6 → ラウンド2 5/4/5/6/4/7/6/6 → ラウンド3はメモ参照。
  5. オーナー間の契約はエクスポートされた定数で管理(例:ink.ts の NOINK レイヤー、story.ts の dofAt/FOREGROUND、lights.ts の LIGHTS/LOOK)。契約を変更する場合は、それを読み取るすべてのオーナーに伝える必要がある。

注意点

  • Kenney nature-kit のマテリアルはティール色:build.ts でマテリアル名で色を変更する。
  • カメラが家の中に入ることがある:build.ts/world.ts の視線カラーがカメラレイを遮るものを除去。
  • DOFと同じマージされたエフェクトパス内のインクは上書きされる。インクはブラーの前に独自のパスでなければならない。
  • ピクセルサイズのポストパラメータは解像度にスケーリングする必要がある:スチルは0.5、最終は1.333。R3Fはdprを≥ 1にクランプするため、--scale 0.5 のスチルでも1080x1920のバッファがレンダリングされる。
  • ディスク: 各Remotionバンドルは public/(約1.3 GB)を テンポラリフォルダ\remotion-webpack-bundle-* にコピーし、決して削除しない。橋のパス中に60+ GBがシステムドライブを満たし、レンダリングがENOSPCで停止した。常に export TEMP='<big drive>/remotion-tmp' TMP='<big drive>/remotion-tmp' でレンダリングし(bridge-stills.mjs は自動で設定)、共有テンポラリフォルダ内の古いバンドルフォルダを削除する前にユーザーに確認する(自動モードは掃除をブロック)。/remotion-tmp も満杯になる(橋の4ラウンド後、約500フォルダ / 110 GB):プロジェクトが完了し、何もレンダリングしていない場合、そのフォルダ内の remotion-webpack-bundle-* と puppeteer_dev_chrome_profile-* フォルダを削除する。
  • JS文字列では "<big drive>/remotion-tmp" と書き、"<big drive>\remotion-tmp" と書かないこと(\r はキャリッジリターンになる)。
  • Remotionは無音のオーディオトラックを書き出す:-map 0:v:0 -map 1:a:0 でマルチプレックス。
  • サブエージェントはこのハーネスでレポートファイルを書き込めない:150ワード以内の最終メッセージを要求し、自分で out/<name>/<n>/REPORT.md に保存する。
  • out/ 内のスクラッチ .ts ファイルは tsc を壊す:名前を .txt にする。
  • 2Kレンダリングは約4 fps(67秒で約10分)。スチル(0.5)は約40秒のバンドル後、各3-8秒。
  • 2.5%のフィルムグレインは2Kファイルを約250 MBではなく910 MBにし、YouTubeでどろどろになる;リファレンスにはない。オフのままに。

ベリファイアが捕捉した読みやすさの落とし穴(新しいプロップ/ショットごとにこれらを確認)

  • 子供の後ろに消える一本のロープで描かれたブランコは「絞首刑」に見える。 常に二本のロープで広い板を持ち、子供はその間(swingKid in toon.ts)、脚が弧をクリアするフレーム(両端にAフレーム)。
  • レンズから約2 m未満のプロップや浮遊物は、フレームエッジで巨大な切り取られたブロブになる。カメラが動くとき、新しい位置の近くのすべてのプロップを再確認する(川のカメラが浮遊する帽子の中に動いた)。
  • フレームエッジで切れた前景の茂みは「緑のボール」に見える;前景プロップは認識可能か、存在しないかのどちらかでなければならない。
  • 旗:赤+黄色の星/菱形はベトナムの旗に見える。時代に合った旗を使用する(1831年のイングランドなら聖ジョージ十字)。

関連スキル