animate

Animate

コードで短いアニメーション動画を作成します。1 つの <canvas> に描画とスコアをプロシージャルに生成し、フレームごとに決定論的に処理して、ヘッドレスブラウザーと ffmpeg でレンダリングします。ストーリーは、優れた短編アニメーションから研究した文法に沿って展開します。見た目はスタイルです。styles/ からプラグインキットを選ぶか、ユーザーの参考資料をもとに new-style.md で作成します。

要件： Node 18 以降、Chromium を含む Playwright（npm i -g playwright && npx playwright install chromium）、PATH 上の ffmpeg が必要です。まずこれらを確認してください。いずれかが見つからない場合は、ユーザーにインストールコマンドを伝えて終了します。ナレーションを付ける場合は、Python と faster-whisper（pip install faster-whisper）で全単語のタイミングを計測します。これがない場合、単語のタイミングは推定されます。

以下のすべてのパスは、このスキルのベースディレクトリからの相対パスです。作品はユーザーのプロジェクト内の pieces/<name>/ に置きます（必要に応じて pieces/ を作成します）。ユーザーが作成するスタイルは <project>/styles/<name>/ に置きます。

必須事項

1. 絵コンテの承認前にアニメーション制作を始めないでください。 誤ったストーリーや見た目で制作すると、最初から作り直すことになるため、確認を挟みます。
2. 描き始める前に参考資料を確認してください — ユーザーの参考資料、またはスタイルの sample.png とデモを確認します。その後、すべてのキーフレームを grammar/FRAME.md と、スタイル独自の STYLE.md 内のチェックリストに照らして確認してください。
3. 画面上の事実に関する主張はすべてウェブ検索で確認し、出典とともにブリーフに記載してください。 出典なしに「初」と主張してはいけません。
4. コードは 1 ファイルにすべて記述します： index.html 1 つのみとし、すべてコードで描画・合成します。画像／音声／動画ファイル、data: URI、URL、ウェブフォントはコードに含めません。これらは tools/build.mjs でチェックします。どちらもユーザーが独自に用意する、オプトイン方式の例外が 2 つあります。アセット（ビルド時に埋め込む <piece>/assets/ 内のスクリーンショットとロゴ）と、音楽トラック（エクスポート時に結合）です。詳しくは「アセット」と「音楽」を参照してください。
5. 決定論的に処理します： シード付きの乱数（RNG(...)）のみを使い、ステップごとの変化にはボイルインデックス B を使います。Math.random() や実時間は決して使わないでください。
6. 参考メディアはローカルに留めます。 ユーザーからクレジットを求められない限り、公開する出力にコミットしたり、コードをコピーしたり、アーティスト名を記載したりしてはいけません。
7. 「完成」は数値で評価します： tools/review.mjs に合格し、コンタクトシートを実際に確認していることが条件です。「見た目は良好」ではなく、数値を報告してください。
8. 選択肢を示して質問します。 まず推奨する既定の選択肢を添えて AskUserQuestion を使い、ユーザーがワンクリックで回答できるようにします。

作業の流れ

0. 要件の確認

intake.md にある質問のうち、推測できないものだけを尋ねます。見た目を決めるため、ギャラリーを作成し（node tools/gallery.mjs <out.png> [<project>/styles]、約 3 秒）、表示して、どれにしますか？ それとも参考資料を見せてもらえますか？ と尋ねます。その後、FRAME.md とスタイルのチェックリストに照らして、参考資料を自分で調べます。

1. ストーリーの確認（テキストで素早く）

grammar/FORMATS.md から形式を選びます。形式はプロットの仕組みによって決まります（歴史は変形でつなぐ年表、ミッションはビートに合わせてカット、リストはカタログです）。grammar/STORY.md を読みます。ウェブ検索で事実を確認します。その後、ユーザーに以下を提示します。

• 一行のアイデアと、口に出して言える仕掛け（「火花は時代ごとに光線を 1 本ずつ増やし、最後に答えとなる」）
• 形式とその理由、スタイル、長さ、BPM
• 番号付きのビート表：時間、起こること、次のビートへのつなぎ、音の役割（無音の箇所と、最も大きな音が鳴る箇所）

承認／ビートを変更／別の切り口 のいずれかを尋ねます。承認されるまで修正します。「X ではなく Y のつもりだった」という食い違いを、この段階で低コストで見つけられます。

2. ルックの確認（スタイルフレーム2～4枚）

作品の制作は pieces/<name>/ から始めます。スタイルのデモ（styles/<name>/demo/）から piece.json と src/ をコピーしてください。デモはすでにそのスタイルのキットに対応しており、モーフで時代をつないでいます。または、ビートに合わせて大胆にカットする作品（8分音符、奇数フレームで16分音符の連打、ショットごとに1つの時代、カメラによるフレーミング）なら templates/beat-cut/、最もシンプルな切り絵のモーフなら templates/piece/ を使います。piece.json の "style" を設定してから、brief.md と LOG.md を新しく作成します（テンプレート内のものはプレースホルダーです）。

• 提供済みのスタイル： STYLE.md とデモを読み、そのキットを使って描画します。
• ユーザーの参考資料： new-style.md に従います。まず参考資料を測定してください（tools/measure/refs.mjs）。作品自体のスタイルフレームが照合済みのフレームになるため、確認は1回です。比較シートとフレームをまとめて確認します。作品の承認後、スタイルフォルダーを保存します（その作品がスタイルの「実証済み」になります）。

最も違いの大きいビートを2～4つ選び、フルサイズのフレームとして描画します。それぞれが FRAME.md とスタイルのチェックリストに合格する必要があります。node tools/still.mjs pieces/<name> 2.25,9.75,16.5 look.png --scale 0.5（または TIMELINE.board に該当するビートを設定した tools/storyboard.mjs）で横に並べてレンダリングし、画像を提示します。フレームごとに承認するか／ルックを変更するか／別のスタイルを試すかを尋ねます。

3. ストーリーボードの確認（すべてのビート）

承認されたルックで、すべてのビートを描画します。ビートごとにキータイムを1つずつ（{ t, title, sound, next }）TIMELINE.board に入力し、ボードをレンダリングします。パネル番号ごとの賛成／反対とコメントを求め、反対のパネルを描き直し、繰り返します。パネルは動画自体のシーン関数なので、後から描き直す必要はありません。

4. 制作

1. pieces/<name>/brief.md（仕様、スタイル、ビート、つなぎ、サウンドプラン、主張と出典）を作成します。LOG.md も維持します。
2. シーンをアニメーション化します。TT、ev(t, d)、popS(t) を使ったタイミング付きアクションと、描き込みアニメーションを作成します（craft.md → Motion を参照）。src/bridges.js で時代、カメラ、つなぎを接続します（モーフでつなぐ形式）。ハードカットの場合は BRIDGES = [] のままにします。
3. node tools/build.mjs pieces/<name> → index.html（スタイルのキットは piece.json の "style" から読み込まれます）。
4. 制作中にタイルをテストします：node tools/tile.mjs pieces/<name> tile.png <frames...>。タイルを確認し、すべてのモーフとカットにわたって並べてください。
5. src/score.js でスコアを作成します（craft.md → Sound を参照）。
6. node tools/export.mjs pieces/<name> --share → フレーム、audio.wav、ステム、renders/final.mp4、renders/share.mp4（すべての形式で --formats 9:16,1:1,16:9 を指定。1秒スタイルでモーションブラーを使う場合は --blur 4）。--only-audio（スコアを再レンダリングしてリマックスします。約4倍速）を使ってミックスを調整します。
7. node tools/review.mjs pieces/<name> → ショットごとのコンタクトシート、カットグリッド、モーフグリッド、ストーリーアーク、アンカー、テキスト（切れ、重なり、スマートフォンのUIによる隠れ）とサウンド（最も音量の大きい瞬間、その直前の無音、LUFS）。合格するまで修正し、シートを確認して、ショットごとの PASS 表を LOG.md に記録します。目視よりテキストチェックを優先してください。切れたラベルもコンタクトシートでは問題なく見えることがあります。

5. 納品

renders/share.mp4 を送ります。数行で、作品の内容、各確認の数値、レビューで見つかって修正した点、最も弱いショット、未検証の項目（例：スコアを聴いて確認できない）を伝えます。変更したい点（ストーリー、ルック、トランジション、ペース配分、サウンド）を尋ねます。

6. 学習

各制作の後、作品の LOG.md に追記します。新たに問題が起きた場合やうまくいったことがあれば、craft.md、スタイルの STYLE.md、またはキットの変更に関する1行のルールを提案し、ユーザーの同意を得て追加します。

ナレーション（任意）

受付時に質問3として確認します。ナレーションがある場合、声が時計になります。各ビートは前の文が終わってから約0.3秒後に始まり、重要な瞬間は話し言葉に合わせて訪れます。台本がストーリーボードになります。1行が1ビートです。

1. 台本を pieces/<name>/voice/script.json に書きます：{ "lead": 1.2, "tail": 1.8, "lines": [{ "id": "open", "text": "As it is spoken.", "after": 0.45 }, ...] }。数字や名前は、実際に読み上げるとおりに書きます。1秒あたり3.5語以下にします。カウントやキャプション、見せ場の前の沈黙など、映像が見せ場を印象づけるのに時間が必要な箇所では、行の after を長めにします。
2. 声ができる前に制作を始めます： node tools/voice.mjs pieces/<name> --scratch を実行すると、OS 標準の音声でタイミング確認用のナレーションが作成されます（これは絶対に納品しないでください）。これにより、作品全体のアニメーション制作とレビューを先に進められます。
3. 音声ファイル： 1行につき1ファイルを用意し、voice/<id>.mp3 として保存して、該当する行に "file" を設定します。
   • ElevenLabs コネクター（ユーザーが利用できる場合：Claude の Settings → Connectors → ElevenLabs で、API キーではなく OAuth でサインイン）：コネクターの音声検索で合いそうなナレーターを2～3人選び、それぞれで1行だけ生成します（各ナレーターにつき1パターン。4パターンではありません）。ユーザーに選んでもらったら、その音声とモデルで全行を1回ずつ生成します。生成結果には各音声ファイル用の短時間有効なダウンロードリンクが含まれます。それぞれを voice/ に保存します。文字数に応じて、およそ1文字につき1クレジットかかります。全行を生成する前に合計を伝えます。セッション中にコネクターを追加した場合、アプリを再起動するまでツールが表示されないことがあります。
   • ユーザー自身の録音： 1行につき1ファイル（または1回の録音から切り出したもの）。
   • ユーザーが指定していないサイトから音声を取得してはいけません。また、所有者の同意なしに音声をクローンしてはいけません。
4. node tools/voice.mjs pieces/<name> を実行すると、行とその間のポーズを含む voice/voice.wav と、各行および各単語の開始・終了時刻を音声から faster-whisper でローカルに特定した voice.json が生成されます。ビルドではこれが VOICE として注入されます。
5. ヘッド内では、VL(id) は行を示し、VW(id, word, n) はその word の n 回目の出現が始まる時点を示します。ビートは前の行の t1 + 0.3 から始まります。TIMELINE.narration は VOICE.lines から、DURATION は VOICE.duration から取得します。キューやフラッシュは、それを示す語に合わせます。見せ場のヒットは、それを示す行の前のポーズに入れます。話し声に重ねると、ヒットの音量が下がって聞こえなくなります。
6. piece.json："voice": { "file": "voice/voice.wav", "music": -12 }。エクスポートでは、スコアの上にナレーションをミックスし（スコアは music dB に設定し、ナレーション中はさらにダッキングします）、−14 LUFS にします。レビューでは、ストーリー展開とスコアのみの見せ場の時間帯（renders/audio-score.wav。ナレーションはどのヒット音よりも大きくなります）を評価し、ナレーションについては NARRATION チェックを行います。
7. 録り直しと台本の編集： 行のファイルを差し替える（またはテキストを編集する）たびに voice.mjs を再実行してビルドします。VOICE を基準にしたシーンのキューは、それに合わせて移動します。語句が変わると、その語を参照するキューが無効になることがあります。該当するビートを確認してください。

音楽：ユーザー自身のトラック（任意）

受付時に質問します（質問6）。トラックがない場合、スコアは120 BPMのグリッドに合わせてコードで作曲されます。トラックがある場合：

1. 作品に追加します：pieces/<name>/audio/track.wav（WAV、MP3、M4A）に置き、piece.json に "music": { "file": "audio/track.wav", "start": 12.0, "gain": 0, "fade": 0.5 } を設定します（start = 曲のどこから作品を始めるか）。
2. node tools/beats.mjs pieces/<name>/audio/track.wav pieces/<name> --start 12 --dur <piece length> → beats.json にテンポ、最初の拍、すべての拍と小節、最も強いヒット、最も音量の大きい瞬間、ドロップが記録されます。ユーザーがテンポを知っている場合は --bpm 128 を渡します。そうでなければ「other tempos」の行を確認します（倍速／半速／3分の2拍子はよくある見落としです）。
3. ビルド時に BEATS として注入されます。スターターのヘッドはそこから BPM と GRID0 を読み込み、onBeat(t) は時間を曲の8分音符グリッドにスナップします。カット、モーフ、キューは onBeat(...) に合わせて配置します。**曲が展開を決めます。**展開の転換点はドロップ（BEATS.quiet）に、見せ場は最も音量の大きいヒット（BEATS.loudest、BEATS.hits）に置きます。作曲したスコアなら配置していたであろう位置には置かないでください。
4. スコア（src/score.js）には効果音（to = 's'）だけを残します。エクスポートでは音楽バスをトラックに置き換え、効果音のステムを重ねてミックスし、−14 LUFSにノーマライズします。レビューのグリッドには TIMELINE.gridOffset を使います。SOUNDセクションでは、最も音量の大きい瞬間が見せ場のアクトに当たるかどうかを示します。
5. ブラウザーのプレビューでは引き続き作曲したスコアが再生されます（ページ内に音声ファイルはありません）。エクスポートにはトラックが含まれます。

アセット：実際のスクリーンショットとロゴ（任意）

対象が製品の場合は、受付時に質問します（質問7）。次に：

• node tools/capture.mjs <url> pieces/<name>/assets/home.png [--selector "css"] [--full] [--dark] [--hide "css"] でユーザー自身のサイト（ページ、セクション、ロゴ）のスクリーンショットを撮影します。所有していないものを撮影する前には確認してください。ユーザーから提供されたロゴファイルも assets/ に入れます（PNG、SVG、JPG、WEBP）。
• tools/build.mjs は assets/ 内のすべてを index.html に埋め込みます（作品は1ファイルのままで、キャンバスはチェックで読み取れる状態を保ちます）。画像のデコード後に window.renderFrame が利用可能になり、すべてのツールはこれを待ちます。
• スタイル独自のフレーミング（破れた紙の写真、インクで描いたフレーム、印刷されたカードなど）の中で drawAsset('home.png', x, y, w, h, { fit: 'cover' | 'contain', r }) を使って描画し、見た目になじませます。asset(name) は画像を返します。
• 実際の製品UIのみを使用： 実際の画面をアニメーションさせます（トリミング、ズームイン、表示、ヒーローで指し示す）。製品の画面であるかのように偽の画面を描いてはいけません。スクリーンショットからブランドカラーを抽出します。

フォーマット：1つの作品を複数の形状に（任意）

受付時に質問します（質問2、複数選択）。piece.json の "formats": ["9:16", "1:1", "16:9"] に列挙します（最初のものがメインです）。スターターのヘッドは ?format= を読み込み、W、H、SAFE、CX を設定します。シーンでは LX(fraction)、LY(fraction) で要素を配置し、UNIT でサイズを決めます。形状に応じて異なる配置が必要な場合は PORTRAIT／WIDE を使います（9:16では3つを縦一列に、16:9では横一列に配置します）。9:16のレンダーを16:9にクロップしてはいけません。

• node tools/export.mjs pieces/<name> --formats 9:16,1:1,16:9 --share → renders/final.mp4（メイン）と、その他の形式用の final-<w>x<h>.mp4。
• それぞれを確認します：node tools/review.mjs pieces/<name> --format 16:9（tile／still／textcheck／storyboard にも --format を指定できます）。ここではテキストチェックが最も重要です。16:9に収まる横長のキャプションでも、9:16では画面からはみ出すことがあります。

モーション：スプリングとブラー

• スプリング（kit/core.js）：springMove(t0, a, b, SPRING.snappy) は、少しオーバーシュートしてから落ち着くように値を移動させます。springTrack([[t, v], ...]) は、ジャンプせずに複数のターゲットをたどって値を変化させます。プリセット：snappy（UI）、smooth（カード、カメラ）、heavy（大きな文字、ロゴ）、playful（マスコット）。閉形式なので、フレームの結果は常に一定です。2コマ撮りのスタイルでは、適切な方法として、2フレームごとに更新します。
• モーションブラー： export.mjs --blur 4 は、1フレームあたり4つのサブフレームを平均します。これは1コマ撮りのスタイル（STYLE.ones：数学、アイソメトリック）のみを対象とします。手描き風の2コマ撮りは意図的に鮮明にしてあります（エクスポート時に警告が表示されます）。

並列エージェント（長い作品）

45～60秒の作品には10～15のシーンがあります。ストーリーボードの承認後、エージェントに描画を分担させます。

• セクションまたは時代ごとにsrc/ファイルを1つ用意し、各ファイルを1人のエージェントに担当させます（src/era-01.js、src/era-02.js、…）。piece.json の"scenes": [...]に列挙すると、ビルド順序でsrc/scenes.jsの代わりに使われます。
• 共有パーツはあなたが管理します： src/head.html（TIMELINE、時代、ショット、キュー）、src/bridges.js、スコア、キットです。エージェントはこれらを読みますが、編集はしません。シーンでキットヘルパーが必要な場合は、各自のファイルに時代のプレフィックスを付けた名前で記述します。
• **各エージェントへのブリーフには、**承認済みのボードパネル、スタイルのSTYLE.md、時代の時間範囲とキュー名、ブリッジオブジェクト（境界でフレーム内に必要なもの）、およびルールを含めます。ルールは、決定論的にすること、時代のプレフィックスなしに新しいグローバル変数を追加しないこと、フレームをタイル化して確認することです。
• **build.mjsが結合します。**あなたがビルドし、すべての境界にわたってタイルを作成して、レビューを実行します。

ファイル

パス	内容	読むタイミング
intake.md	質問とデフォルト設定	ステップ0
craft.md	ストーリー、フレーム、モーション、タイミング、サウンド、コード、レビューに関する要点をまとめたルール	ステップ1の前、およびビルド時
grammar/FORMATS.md	8つのストーリー形式（エンジン × ステージ × クロック）、不変条件、実証済みの形式	ステップ1
grammar/STORY.md	根拠を示したビート単位のストーリールール	ステップ1
grammar/FRAME.md	スタイルを問わず、1枚のキーフレームに必要な要素	ステップ2～3
styles/	スタイル：STYLE.md（ルールとフレームのチェックリスト）、kit.js、sample.png、demo/。STYLEフックのコントラクト	ステップ0、2、ビルド時
new-style.md	ユーザーの参考資料から新しいスタイルを作成する方法	ステップ2
kit/core.js	RNG、イージング、ジオメトリ、手描き風の線（揺れ、インク、ペイント、ハッチング、鉛筆、点描、粒子）、カメラ、時間ヘルパー	ビルド時
kit/morph.js	レンダラー：時代、プッシュイン、ズームバンプ、形状モーフブリッジ、オーバーレイを描画します。スタイルのSTYLEフックを通して描画します	ビルド時
kit/board.js	ストーリーボードレンダラー	ステップ2～3
kit/score-*.js	シンセ（プラック、パッド、ドローン、ベース、サブ、noiseHit、スイープ、ライザー、チャイム、ブリップ）、ラウドネスステージ	スコア作成時
templates/	piece/（8秒の切り絵モーフ）、beat-cut/（16分音符のラッシュを含む6秒のハードカット作品）、style/（新しいルック向けの空のスタイルキット）	ステップ2
tools/	ビルド、タイル、静止画、ストーリーボード、エクスポート、レビュー、テキストチェック、比較（参考資料とフレーム）、ギャラリー、framehash（ピクセル同一性チェック）、beats（提供されたトラックのビートマップ）、capture（ユーザーのサイトのスクリーンショット）、voice（ナレーションのセリフと単語ごとの時間）。参考資料用のmeasure/（静止画用のrefs.mjs、動画用のshotlog.py）	全工程
examples/history-of-ai/	60秒の完成見本（切り絵）	仕組みがわからないとき

実証済みかどうかを正直に伝える

フォーマット F2（年代記／モーフチェーン）と F4（ミッション）では、それぞれカードだけを使ってすべてのチェックに合格した作品が1つずつできています。F5（主人公固定の旅）では複数の作品があります。その他は調査に基づいて記録されていますが、実証されていません。選ぶときは、その旨を伝えてください。切り絵とクロスハッチは作品全体で使われています。リソグラフ、スケッチブック、数学、ピクセルは、それぞれ完成作品1、2点とデモに基づいています。アイソメトリックは new-style.md を使って参考資料から作られ、現時点ではデモのみです。新しい参考資料から作られたスタイルは、作品で使われるまでは未開拓の領域です。WebGL モーションデザイン（レイマーチング 3D、モーションブラー、ブルーム）は、まだリリース済みのスタイルではありません。