claude-animation

claude-animation

コードで描く、フレーム単位で正確な手描き風の2Dアニメーションです。 映像は純粋な関数 frame(ctx, t) です。ライブラリがブラシ、鉛筆、水彩、粒子、ハッチングなどの表現を描き、リグが演技し（詳細なアリ、豆のような体のキャスト）、ハーネスがレンダリング、プレビュー、チェックを行います。

以下のルールはすべて、実際の映像制作で問題になった事柄です。59秒のブラシインク＋水彩による歴史の振り返り映像や、絵本風の昆虫映像シリーズで問題が起き、レンダリングして初めて発覚しました。

まず読む

やりたいこと	参照先
ブリーフからオリジナルアニメーションを作る	references/workflow.md → templates/beat-sheet.md → templates/film-template.mjs
もっと細かく作り込む（素材、テクスチャ、キャラクター）	references/detail.md — ディテールのバイブルです。表面を描く前に読んでください
アリを描く／ポーズを付ける／歩かせる、または新しい生き物のリグを作る	references/characters.md、lib/rigs/ant.mjs
コロニー：葉、幼虫、菌類、根、歩けるトンネルのある巣の断面	lib/colony.mjs
ファセット加工されたローポリのポスターアート（フラットなベクター風景、継ぎ目のない環境ループ）	lib/lowpoly.mjs、references/styles.md § 5、examples/claude-balloon/
アクション／ビデオゲーム風の演出：ジャンプ、パンチ、ヒットストップ、揺れ、火花、コンボ、ボスバー	lib/fx.mjs、lib/rigs/critter.mjs、lib/rigs/bug.mjs、examples/claude-game/
人物（豆のような体、棒状の手足、水彩）	lib/rigs/bean.mjs
タイミング、演技、カット、カメラ、トランジション	references/motion.md
ルックを選ぶ／合わせる（エディトリアルなテクスチャ、ブラシ水彩、線画ドゥードル、3Dタイポグラフィ）	references/styles.md
音：映像のタイムラインに合わせた効果音、合成したベッド音、ラウドネス	references/sound.md、scripts/sound.mjs、scripts/music.mjs
何かが壊れた	references/traps.md
ほかのアニメーションスキルの機能と、取り入れた要素	references/prior-art.md

ライブラリ（lib/）

ファイル	内容
core.mjs	イージング（eOut eIn eIO eBack eElastic eBounce eExpo popS）、ss ウィンドウ、hash rng noise1、キャンバスヘルパー（at line poly smooth ellipse stroke fill taper）、テクスチャ（hatch fibre grainOver burst speedLines）
pen.mjs	Pen：テーパー付きブラシの stroke、pencil（途切れた3回の描画）、ring、box（角をはみ出して描画）、wash（にじむ水彩）、text（文字を自動で描画）、順番どおりのリビール、安定した名前付きシード、オプトインのボイル
textures.mjs	paper fibrePaper lightBands sun moon star4 grass soil nightSky fleshCells filmFinish
nature.mjs	sprout melonLeaf tendril vine blossom bee drop
rigs/ant.mjs	ant(ctx, x, groundY, s, pose) — 詳細なアリ（pose.look = 描き重ねるリビール用のインク／塗り／テクスチャのレイヤー）；antGuides() は青い構築線；seed()
colony.mjs	leaf leafPiece egg larva cocoon seedGrain fungus roots nestCanvas（土の中に部屋とトンネルを描画し、pathOf ウォーカーを返します）
lowpoly.mjs	facetMass（ランプから立体を光の当たる三角形に描画し、ドーム／フェード／かすみを追加）、ridge、skyGradient、facetCloud、RAMPS（canyon、dusk、mesa、forest、ice、water、balloon、cloud）
fx.mjs	timeWarp（ヒットストップ：接触時にゲーム時間を停止し、エフェクトは動き続けます）、shake、burstParticles（spark／debris／dust／confetti／ember）、landDust、ring、flashAlpha、comicText、floatText、afterimages、starburst、heart
rigs/critter.mjs	ブロック調のアクションヒーロー：走る、ジャンプ、宙返り、スクワッシュ＆ストレッチ、パンチ、キック、ダメージ、チャージオーラ、表情
rigs/bug.mjs	カブトムシの敵（角のあるボスも）：小走り、あご、点滅、スクワッシュ、回転
rigs/chibi.mjs	関節を備えた、大きな頭のカートゥーン人物。外見プリセット（髪、メガネ、シャツ、ポケットとペン、ズボン、靴）でスタイルを設定できます：歩く／走る／ジャンプ／応援／指さす／手を振る／運ぶ、目、眉、リップシンクする口、赤面、汗
rigs/bean.mjs	person bust bubble flagCloth hat SKIN
film.mjs	run({...}) → render / sheet / strip / verify；exposure(t, track, fps) で1コマ打ち／2コマ打ち／止めを指定

マシンごとに一度だけインストールします：cd <skill dir> && npm install（依存関係は @napi-rs/canvas のみ）。ffmpeg を PATH に設定してください。

ループ

brief ─▶ style bible + beat sheet ─▶ film.mjs (copy the template) ─▶ sheet ─▶ fix ─▶ strip the fast bits
     ─▶ verify ─▶ render ─▶ cues.json ─▶ sound.mjs ─▶ look at the master's contact sheet ─▶ deliver

厳守事項

1. コードより先にビートを決めます。 templates/beat-sheet.md を埋めます。各ビートには、視聴者が指し示せる明確な終了状態、カメラ、露出、サウンドキューが必要です。コードの中で設計すると、スライドになってしまいます。
2. すべての面に 3 層を設けます：ベース → テクスチャ → エッジ。 単色の塗りつぶしは未完成です。ディテールバイブルには、各素材のテクスチャを記載します（果実＝詰まった細胞＋ハイライトのある種、土＝ハッチング＋地層＋小石、キチン質＝グラデーション＋形状ハッチング＋スペキュラーストリーク＋リムライト＋剛毛…）。
3. キャラクターは、塊ではなく解剖学に基づくリグです。 昆虫には lib/rigs/ant.mjs を使います。ローカル原点は腰の下の地面にあるため、ant(ctx, x, groundY, …) は常に地面に立ちます。呼び出しごとに「地面」のオフセットを追加してはいけません（まさにその調整項目が、2 回のパスで脚を棒のようにしてしまいました）。
4. ボイルは意図して選ぶものであり、デフォルトではありません。 テクスチャーのあるエディトリアル調では静止ショットを完全に静止させ、ブラシ水彩調では 10 fps でボイルさせます。スタイルバイブルに選択内容を記載します。
5. シードを安定させます。 描画要素のシードは名前（pen.begin("ant/body")）から生成し、フレームインデックスからは生成しません。これにより、保持中の描画要素は同じ描画を保ち、再レンダリングも同一になります。node film.mjs verify が成功する必要があります。
6. 各パスでピクセルを確認します。 render の前に sheet を実行し、接触や高速アクションのたびに strip を確認します。完成と判断する前に、エンコード済みマスターのコンタクトシートも確認します。レンダリングが終了コード 0 で終わっても、何も証明されません。
7. サウンドは映像のタイムラインに合わせます。各接触の約 0.03 秒前に鳴らします。鉛筆の連続したこすり音は使いません（テストの結果、不採用：ほかのすべての音と競合します）。ミックスにはラウドネスノーマライズを適用します。
8. スライドではなく、世界を見せます。 舞台には、空、遠景、中景、地面、カメラの前を横切る前景などのレイヤーが必要です。また、その場所には何かをしている住人が必要です。カメラはその中を移動します。

クイックスタート

SK=~/.claude/skills/claude-animation            # wherever this skill lives
mkdir my-film && cd my-film && cp $SK/templates/film-template.mjs film.mjs
CLAUDE_ANIMATION_LIB=$SK/lib node film.mjs sheet 0,1,2,3,4    # look
CLAUDE_ANIMATION_LIB=$SK/lib node film.mjs render             # out/template.mp4
node $SK/scripts/music.mjs bed.wav --dur 5 --end 4.4
node $SK/scripts/sound.mjs cues.json out/template.mp4 out/final.mp4 --bed bed.wav

リポジトリ内の完成作品：examples/money-quest/ — 30 秒の 2 人旅アドベンチャー（ちびリグ＋生き物）；examples/claude-balloon/ — ファセット加工のローポリで作られた 30 秒のシームレスなアンビエントループ（動きはすべて 30 秒周期で、音声も 7.5 秒の小節 4 つで構成され、ループします）；examples/claude-game/ — 30 秒のビデオゲーム短編（プラットフォームアクション、虫、ヒットストップ、コンボ、必殺技、K.O. を盛り込んだボス戦、scripts/chiptune.mjs によるチップチューン）；そして examples/ant-colony/ — 32 秒、16:9：スケッチ → インク → 色 → 仕上げという工程、草原で葉を切って運ぶハキリアリ、巣の断面へのダイブ（菌類の庭、保育室、女王、貯蔵庫、交通量の多いトンネル）、タイムラインに沿った 240 個のサウンドキュー。約 27 秒でレンダリングします。