cth9191/animate

Animate – Claude Codeのためのプロシージャル動画作成

概要 – コードから完全に短編のスタイリッシュなアニメーション動画を生成できるClaude Codeのスキルです。チャットのようなプロンプトで対話し、いくつかの質問に答えるだけで、システムが決定論的なフレームごとのアニメーションを構築し、ヘッドレスブラウザでレンダリングしてMP4を出力します。

仕組み – ワークフローは5つのステップに分かれています：

1. Intake – 被写体、希望するフォーマット、音声、スタイル（組み込みのルックまたは提供するカスタム参照）をシステムに伝えます。
2. Story check – ビートテーブルが生成され、承認または編集を行います。
3. Look check – 選択したスタイルに基づいて、フルサイズのキーフレームがいくつか生成され、確認を行います。
4. Storyboard – すべてのビートが音とトランジション付きのキーフレームになり、各パネルを承認できます。
5. Build & delivery – 承認されたパネルがアニメーション化され、MP4にレンダリングされます。品質チェック（ビートカット、ラウドネス、ヒーローアンカーなど）の結果が表示され、最終調整を行います。

組み込みスタイル – リポジトリには8つのプラグインスタイルフォルダが同梱されており、それぞれが描画キットを提供します：

• cut paper、crosshatch、riso、sketchbook、math (Manim風)、pixel、isometric、および参照メディアから派生した custom look 用のスロット。

カスタムスタイルの作成 – 動画、静止画、またはウェブページを提供すると、ツールがパレット、線の太さ、テクスチャ、リズムを分析し、承認用に1〜2枚の適合フレームを生成し、再利用のために styles/<name>/ に新しいスタイルを保存します。

主要コンポーネント

• Story grammar (grammar/)：構造、色の意味論、ペースを決定する8つの短編テンプレート（歴史、ミッションなど）。
• Kit (kit/)：シードされたランダム性、カメラヘルパー、スタイルフックを通じて描画するレンダラー、ストーリーボードエンジン、シンセサイザー、スマホ再生用のラウドネス処理。
• Tools (tools/)：
  • build.mjs – 作品、キット、スタイルから自己完結型の index.html を組み立てます。
  • export.mjs – フレームをWAV + ステムに変換し、ffmpeg経由でMP4に変換します。
  • voice.mjs – スクリプト生成、録音（ElevenLabsまたはローカルマイク）、faster-whisper を使用した単語とタイムスタンプの同期を行います。
  • beats.mjs、compare.mjs、measure/refs.mjs など、オーディオビートマッピング、参照比較、品質チェック用。
• Craft rules (craft.md) – システム構築中に収集された実践的なヒント。
• ナレーションと音楽 – 自動スクリプト作成、オプションのElevenLabs TTS、ローカル録音、ビート同期スコアリング（独自のトラックも提供可能）。
• 製品統合 – ウェブサイトのスクリーンショットやロゴをアニメーションに挿入できます。
• マルチフォーマット出力 – 9:16、1:1、4:5、16:9が自動的に生成されます。
• 並列ビルド – 大規模な作品はシーンファイルに分割され、個別のエージェントによって処理された後、結合されます。

今後の展望 – レイトレーシング、サブフレームブラー、ブルームを備えたWebGLベースのモーショデザインスタイルを計画中。既存のエクスポートパイプラインはすでにGPUレンダリングをサポートしています。

インストール – Claude Code、Node 18+、Chromium搭載のPlaywright、ffmpegが必要です。Playwrightをインストール (npm i -g playwright && npx playwright install chromium) してから、Claudeのプラグインマネージャー経由でスキルを追加するか、フォルダを ~/.claude/skills/animate/ にコピーしてください。

一般的な使用法 – Claudeのチャットから次のようなコマンドを入力できます：

/animate a 45-second history of the bicycle, cut paper
/animate how a hash map works, in the math style
/animate a short about our API in the style of these screenshots: ./refs/

生成された作品は pieces/<name>/ の下に表示されます。低レベルツールを手動で実行することも可能です。

ライセンス – MIT。

---

Animate は、生成AI（スクリプト作成、音声合成、ビート検出）とプロシージャルグラフィックスの交差点に位置する本格的なオープンソースプロジェクトであり、コードからスタイリッシュな解説動画を作成するためのターンキーソリューションを提供します。