javascript-animation

JavaScript アニメーション（すべてのフレームをコードで描画）

すべてのピクセルを計算して、短いアニメーション映画を作成します。画像も、読み込むフォントも、ライブラリも使いません。作品全体を1つの HTML ファイルに収め、ヘッドレスブラウザーでフレームごとにシークして MP4 にします。

モデル

Claude Opus 5.5 で構築・テストしています。描画品質はモデルに大きく左右されます。以下のセルフチェックには画像入力が必要です。現在のモデルが画像を認識できない場合は、そのことをユーザーに伝え、視覚的な検証は未実施として扱ってください。他のモデルはテストしていません。結果が粗い場合は、これが可能な限り最高の品質だと言い切るのではなく、より高性能なモデルを使うと改善する可能性が高いと伝えてください。

デフォルトの進め方：質問して止まらない

そのまま作業を進めます。妥当なデフォルトを選び、納品時に代替案を伝えてください。開始前に尋ねるのは、題材がまったくない場合（例：「アニメーションを作って」以外に何もない場合）だけです。

1. 依頼内容を読み取ります。 ユーザーの説明から、形式（ストーリー、解説、詩、ループ、インタラクティブページ）、長さ（デフォルトは15〜20秒。この時間では題材を伝えきれない場合のみ長くします）、アスペクト比（デフォルトは1920x1080）を推測します。画面上のテキストは、ユーザーが依頼を書いた言語にします。ユーザーが求めている場合、または対象となる視聴者に明らかに適している場合に限り、二言語表記にしてください。各形式の簡単な構成については、references/forms.md を参照してください。
2. 題材と視聴者に合わせて、映像と音を独自の言葉で計画します。 映画の内容、映像と音の雰囲気、そしてそれが題材と視聴者に合う理由を考えます。記入する項目一覧はありません。素材は references/techniques.md にあります。スターターの値は仮置きであり、標準スタイルではありません。デフォルトで以前の作品の映像や音を再利用しないでください。異なる題材なら、見た目も音も異なるものにします。ユーザーが他の人の作品を例に挙げた場合（「あのバズった作品のように」など）、その技法を参考にしても、登場人物、ストーリー、構図は流用しないでください。
3. ビートグリッド、絵コンテ、ブロッキングをデータとして作成します（references/storyboard.md）。まずテンポとセクションを決め、次に形式に合ったテンポのショットリストを作ります（references/storyboard.md のテンポ表を参照）。各ショットには、フレーミング、カメラの動き、アクション、ビート、サウンド、トランジションを設定します。続いてブロッキングを作成します（ストーリーや解説の場合は、ひと続きの世界における動線を設定します）。これらをページ内の BPM、SECTIONS、SHOTS、EVENTS に設定します。シーン、カメラ、サウンドトラックはすべてこれらを参照するため、映像と音が確実に同期します。ストーリーや解説の場合は、因果関係を確認します。各ビートが直前のビートによって引き起こされ、比喩が映像で見て取れるようにしてください。
4. templates/starter.html から作成します。 すでに絵コンテを基準にした構成で、ワールド座標で1つの世界を描画し、各ショットで withCamera を使い、テキストと主要なオブジェクトにはすべて claim() を使います。仮のカラーパレットとデモ用の世界を置き換えてください。次の仕様は守ってください。draw(frame) はフレーム番号に対する純粋関数にします。Math.random や Date は使わず、rng(seed) と hash2() を使います。
5. セルフチェックを行ってから、レンダリングします（次のセクションを参照）。問題がなくなるまで修正と再確認を繰り返してください。
6. 納品します。 MP4 と HTML を渡します（ブラウザー上で再生でき、クリックすると音が始まります）。その後、1〜2行で変更できる内容を提案します。たとえば、別の映像表現、合成音楽の代わりに AI 音楽を使う、長さを変えるなどです。

音楽には soundtrack スキルを使います（デフォルト：ページ内で Web Audio を使って合成。キーは不要です）。

セルフチェック（エージェントが実施し、ユーザーには表示しません）

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # one frame per second, stepping off cuts
node scripts/render.mjs piece.html shot --stills 90,300,610   # specific moments
node scripts/render.mjs piece.html piece.mp4                  # full render (+ soundtrack if the page has one)
node scripts/asset-audit.mjs piece.html                       # proves zero-asset: exit 1 if anything is loaded or embedded
node scripts/layout-check.mjs piece.html                      # text colliding with text, or straddling a claimed object
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # cuts on the beat, no startle

続いて、references/qc.md にある2つの目視チェックを行います。

1. 絵コンテとの一致確認：各ショットのアクションビートで静止画を確認し、該当する行と照らし合わせます（ブロッキングの指定どおりの位置で、行に書かれた動作をしていますか？）。
2. 監督チェック：1秒あたり2フレームのコンタクトシート（--sheet .5）を使い、形式に合ったテンポ、フレーミングの多様性、動きのないフレーム、すべてのアクションに音が付いているか、映像表現が視聴者に合っているかを評価します。少なくとも2回は確認してください。

映画全体を毎回レンダリングし直す代わりに、変更したフレームだけを静止画としてレンダリングしてください。

該当する場合のみ

条件	対応
キャラクターが複数のシーンに登場する	シーンに入る前に、キャラクター単体（表情とポーズ）を描画し、references/character.md と照らし合わせて自分で確認します。キャラクターにはアンカーポイント（口、手）があり、小道具を取り付けられます。
ユーザーから実在の人物、ペット、場所の写真が提供された	references/character.md の抽出方法を使って、写真からキャラクターを作成します。写真はローカルにとどめ、アップロードしたり、公開するものに含めたりしないでください。
実在の人物を題材にした作品で、ユーザー本人が登場する	納品時（それ以前ではなく）に、重要な小道具や人物の写真を使って、作品をより本人らしくすることを提案します。
動くキャラクターにテキストや吹き出しが追従する	placeFree(w, h, [above, right, left, below]) で配置し、すでに確保されているものを避けるようにします。
画面上のテキストがラテン文字以外（中国語、日本語など）	CJK フォントスタックを使用し、すべてのグリフが正しく表示されることを確認します（等幅フォントでは、欠落したグリフが黙って別の文字に置き換わることがあります。例：≈ が = に変わる）。
ページをウェブページとして公開する	HTML を納品し、ライブプレビューのループとクリックして再生するオーディオを維持します。

よくある失敗を防ぐルール

• 時間の純粋関数にする。 requestAnimationFrame の状態、CSS アニメーション、蓄積される物理状態を使わず、各フレームを t のみから計算します。そうしないと、レンダリングとプレビューが一致しません。
• 手描きの線は揺れるのではなく、うねる。 映像で LOOK.wobble を設定する場合、揺れのシードは毎フレームではなく、4 フレームごとに変更します（LOOK.boil: 4）。毎フレーム変えるとノイズに見えますが、1 秒あたり約 7.5 回の変化なら手描きのように見えます。
• 胴体には丸みのある形を使う。 楕円と角丸長方形で人物を作ります。頂点の少ない生のポリゴンは、看板のように見えます（五角形の手、箱型の胴体など）。
• ポーズが伝わる角度を選ぶ。 横から見た、長い胴体と短い手足はイモムシのように見えます。同じポーズでも、正面から（短縮法を使って）見れば、お腹ばいの赤ちゃんのように見えます。
• 奥から手前へ、明示的に描画する。 後ろ髪、胴体、首、顔、前髪の順に描画します。「何かが顔を覆う」不具合の多くは、描画順が原因です。
• カットと動作にヒットポイントを設定する。 すべてのカットと目に見える動作を EVENTS／CUES に記述し、サウンドトラックを合わせます（soundtrack を参照）。
• テキストを重ねない。 すべてのテキストボックスと重要なオブジェクトを確保し、layout-check が CLEAN を出力するようにします。キャプションがモニターの縁や顔に重なると雑に見えますし、コンタクトシートでは見落としがちです。

ファイル

• templates/starter.html：描画ライブラリ（インク、イラスト、フラット／設計図プリミティブ、ラベル、紙、フィルター付きレイヤー）、withCamera、claim／placeFree、ストーリーボード駆動の2ショット用スケルトン。
• scripts/render.mjs：MP4／静止画／コンタクトシートを生成します。window.CUES と window.SCORE は省略可能です。完全なレンダリング時に <out>.cues.json を書き出し、SCORE のサウンドトラックを多重化します（SCORE がない場合、MP4 は無音です）。キャンバスのサイズは偶数である必要があります。
• scripts/asset-audit.mjs：読み込みまたは埋め込みの対象を静的にスキャンし、ライブネットワークで確認します。
• scripts/layout-check.mjs：映像全体の window.LAYOUT を読み取り、テキストの衝突と発生時刻を一覧表示します。
• references/storyboard.md：ビートグリッド、ショットリスト、ブロッキング、連続性、ストーリーの論理。
• references/techniques.md：検証済みの描画技法（インク、スポットカラー印刷、単線彫刻、図形としての文字、マーカーフィル、イラストの図形）。
• references/forms.md：形式ごとの構成メモ。
• references/character.md：キャラクターがいる場合のみ使用します。
• references/qc.md：セルフチェックリスト。

必要なもの：Node 18 以降、ffmpeg、Chrome（または npx playwright install chromium）、およびスクリプトを実行するフォルダー（スキルフォルダーではなく、プロジェクト）での npm i playwright-core。