Claude でコードを書いて、どんな動画やゲームが作れるのか？10 個のオープンソースプロジェクトを徹底解剖

Charlie Hills が Claude Opus 5.5 を中心とするコミュニティプロジェクトのリストをまとめ、モーショングラフィックスから本格的な Web ゲームまで、10 個のオープンソースプロジェクトを取り上げている。

このリストにおいて、コードはアニメーション動画の制作にも、操作可能なインタラクティブ Web ゲームの直接構築にも活用できる。アニメーションプロジェクトでは通常、モデルが描画ロジックを記述し、ブラウザ内でフレームごとにレンダリングして MP4 動画へとエンコードする。一方、ゲームプロジェクトはブラウザのフロントエンド上で直接動作し、プレイヤーの入力によって状態遷移機械（ステートマシン）と画面描画がリアルタイムに駆動される。この制作アプローチにおいて、Claude は主として実行可能なフロントエンドおよびグラフィックスのコード生成を担い、ブラウザが画面の描画を担当する。また、外部の画像や動画モデルを呼び出すプロジェクトも存在する。

Claude がコードを書き、ブラウザが画面を描画する

リストにあるプロジェクトはいずれもプロシージャルなアプローチを採用している。モデルがフロントエンドの描画およびロジックのコードを記述し、ブラウザを介してそれを実行・表示する。

1. 時間駆動と状態遷移機械モデリング：短編アニメーションでは、モデルが絵コンテとタイムラインを設計し、HTML5 Canvas、SVG、WebGL、Three.js、あるいは p5.js を用いて視覚要素を時間の関数として構造化する。ゲームプロジェクトでは、画面は単なる時間の関数ではなく、プレイヤーのキーボードやマウスなどの入力とリアルタイムな状態によって駆動される。確定的な時間軸でのレンダリングは画面の再現やコードの局所的な修正に適しているが、コード自体に論理エラーやレンダリングの不具合が存在しないことを保証するものではない。
2. 仮想クロックとフレームごとのスクリーンショット：アニメーションプロジェクトでは通常、Node.js 内でヘッドレス Chrome（Headless Chrome）を制御し、仮想タイムラインを注入して描画を駆動させながらフレーム単位で画像シーケンスをキャプチャする。
3. 音源の同期とエンコード出力：アニメーションの音源は多様で、ユーザーが用意した既存楽曲（例えば PDoomVideo は既存楽曲を採用）、ロイヤリティフリーのサンプル音源ライブラリ、TTS 音声合成などが利用できる。レンダリングされた画像シーケンスは、その後 ffmpeg によって音声と同期され、MP4 としてエンコード出力される。なお、ソースコード自体は軽量であるものの、マルチフレームレンダリングによって書き出される一時的な画像シーケンスや完成版の MP4 には相応のストレージ容量が必要となる点に注意したい。

Charlie Hills が挙げたこれら 10 個のプロジェクトは、技術アーキテクチャと実用目的に応じて 5 つのグループに分かれている。

第 1 グループ：手描き水彩風アニメーションとスキャフォールド

この流派は、p5.js とブラシライブラリ p5.brush を駆使し、水彩の質感や手描きの線画表現を持つ 2D キャラクターアニメーションの生成に特化している。

1. PDoomVideo：コードによる手描き風ミュージックビデオ

• リポジトリ：JohnHeibel/PDoomVideo
• 概要：既存楽曲『I'm Upping My P(doom)』（既存音源を使用）のために制作されたミュージックビデオ（MV）である。動画内のすべてのカット割り、キャラクターの動き、ブラシ表現は、Claude Code 内で Claude Opus 5.5 が生成したコードによって描画されており、具体的なカットごとの演出案を手作業で指定することはしていない。
• 仕組み：作者はマスコットキャラクター Clawd のビジュアルを使用し、歌詞に合わせたシーン転換を行うよう指示した。Opus 5.5 は絵コンテ計画（STORYBOARD.md）とスタイル仕様ガイド（ANIMATION_GUIDE.md）を策定し、サブエージェントを呼び出して協調的にコードを記述した。全編は 9 つのチャプターに分かれ、各フレームは studio.html 上で p5.brush を介して描画され、ヘッドレス Chrome と ffmpeg によってレンダリングおよび映像・音声の合成が行われる。
• 用途：フロントエンドの描画コードを活用した長編のナラティブ表現および音楽のビジュアル化における実装メカニズムを示している。

2. ClaudeAnimationBase：標準化アニメーションスキャフォールド

• リポジトリ：JohnHeibel/ClaudeAnimationBase

• 概要：PDoomVideo の完成後、作者の John Heibel はモデルの挙動特性を整理し、再利用可能なモジュールを汎用のアニメーションスターターキットとして抽出した。

• 仕組み：主人公 Clawd のマルチアングル、感情表現、四肢パーツ、カメラ補助モジュールが組み込まれている。ユーザーはクローン後、コーディング Agent に以下のプロンプトを入力する：

  Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.

  モデルはまず絵コンテを作成し、カットごとにコードを記述して、サムネイルを並べたコンタクトシート（Contact Sheets）を出力して画面を確認した上で、最終的な動画を書き出す。単体 GPU のない環境で実行する場合、p5.brush の水彩塗りつぶし計算に時間がかかるため、作者はレンダリング速度向上のためにベタ塗りへの切り替えを推奨している。

• 両プロジェクトの違い：PDoomVideo は特定の既存楽曲と絵コンテに結びついた完成品のリポジトリであるのに対し、ClaudeAnimationBase は抽出された再利用可能なスキャフォールドおよび汎用ルールベースである。

第 2 グループ：多彩なスタイルの短編スタジオとモジュール型スキルライブラリ

このグループのプロジェクトは、画風を何十種類ものビジュアルスタイルへと拡張し、制作プロセスを Claude Code の再利用可能なスキルとしてパッケージ化している。

3. Lemo-Opuscar：43 種類のシネマティックスタイル制作フレームワーク

• リポジトリ：lemomo-ai/lemo-opuscar
• 概要：43 種類のビジュアルおよび映画スタイルを収録し、各スタイルにコードレンダリングで生成されたデモ短編が付属している。特別上映作品『OPUSCAR 98』（6 分 25 秒）では、キャラクターの Clawd が 98 本の映画テーマを巡り、それぞれのスタイルに合わせてシーンが再描画される。
• 仕組み：作者が Opus 5.5 を用いて調整・制作したもので、3 つのドキュメント体系で構成されている：
  • DIRECTOR.md：ナラティブ、テンポ、カメラワーク、セルフチェック手順を定義。
  • TECHNIQUE.md：Canvas/WebGL のフレーム単位レンダリング、ロイヤリティフリー素材による劇伴、TTS 音声ナレーションのミキシングを指示。
  • styles/<风格>/STYLE.md：クレヨン、水墨画、ハーフトーン、スイスタイポグラフィなど、各スタイルの詳細ルールを提供。
  • Claude プラグインとしてインストール可能。作者の記載によると、1 本の映像生成にはおよそ 30〜60 分を要し、相応のトークン消費を伴う。動作環境には Node 20+、ffmpeg、Python 3.11+ が必要。
• 用途：多彩なスタイルのコード生成短編に対し、体系化された絵コンテの指針とパラメータ参照の仕様を提供する。

4. opus-video-skills：スタイルごとにパッケージ化されたスキルプラグイン

• リポジトリ：tuzhechen2005/opus-video-skills
• 概要：特定のビジュアルスタイルを独立した Claude Code スキルプラグインとしてパッケージ化し、コードによる画面描画とプロシージャルなサウンド合成を強調している。
• 仕組み：2 つのコアスキルが含まれる：
  • painted-animation（手描き水彩アニメーション）：ClaudeAnimationBase の仕組みを取り入れ、キャラクターの手足の動きを強化。ビートに合わせたカッティングやカラオケ風のアニメーション字幕をサポート（31 秒の『小鎮姑娘』デモなど）。
  • kinetic-reel（キネティック・タイポグラフィ短編）：2D フォントと Three.js レイヤー（パーティクル地形、流体マーブルなど）を組み合わせ、視覚的なトランジションとプロシージャル生成された効果音を同期。
• 前述プロジェクトとの違い：Lemo-Opuscar がマルチスタイルの統合ガイドフレームワークを提供するのに対し、opus-video-skills は 1 つのスタイルごとに独立したスキルプラグインを提供する形態をとっている。

第 3 グループ：スタンドアロンの創作から商用アプリケーション、ハイブリッド生成へ

動画生成はアート系の短編制作にとどまらず、実務的なビジネス向け自動化プロダクトや、複数のモデルを統括する複雑なシステムへと発展している。

5. shipvideo (LaunchVideo)：URL 入力で製品ローンチ動画を生成

• リポジトリ：diggerhq/shipvideo
• 概要：コードによる動画生成を Web アプリケーション（launchvideo.io）としてパッケージ化し、公式サイトの URL や説明文を入力するだけで 20〜40 秒の製品プロモーション動画を生成する。
• 仕組みと制限事項：
  1. デプロイと環境：OpenComputer の実行環境と API Key（OPENCOMPUTER_API_KEY）に依存する。新しい microVM セッションでの初回初期化時には、Playwright の依存関係、ffmpeg、フォントのインストールが必要（約 1 分程度）。
  2. ページ抽出とコード記述：Agent が Web サイトのテキスト、カラー、フォントを抽出した後、単一ファイルの HTML アニメーションを記述する。レンダリングの確定性を担保するため、このツールでは <video>、<audio>、<iframe>、CSS transitions、Math.random、および外部画像などの要素の使用が明確に禁止されている。
  3. 仮想クロックレンダリング：__seek(t) 仮想クロックを注入して rAF やタイマーを制御し、Playwright でフレームをキャプチャしてパイプ経由で ffmpeg に送り、エンコード出力する。作者が記載している 30〜40 秒という時間は、30 秒の動画におけるレンダリング段階の参考所要時間に過ぎず、モデルによるコード記述や事前の初期化、検証にかかる時間はここに含まれない。
• 用途：フロントエンドのアニメーション生成とヘッドレスブラウザによるエンコードを自動化サービスとしてまとめた実装パターンを示している。

6. motion-graphics-music-video-skill：複数モデルのハイブリッドオーケストレーションプラグイン

• リポジトリ：makevoid/motion-graphics-music-video-skill
• 概要：音楽と演出の概要を入力すると、外部の生成モデルを組み合わせたモーショングラフィックスのミュージックビデオを出力する Claude Code プラグインである。
• 仕組みと費用の目安：
  • マルチモデルのハイブリッドパイプラインを採用：Opus 5.5 が絵コンテ、プロンプト、スクリプトの設計を担当し、MCP を介して Fal.ai に接続して README に記載された画像モデルを呼び出してキャラクターを生成し、MiniMax H3 を呼び出してグリーンバックのアクションクリップを生成する。
  • ローカルツールチェーンの連携：Python による音声解析、ステム分離、ミキシングを活用し、p5.js や macOS 向けの Swift Core ライブラリを用いて視覚効果を追加する。
  • コストの例：作者が提示した約 3 分間の動画の参考例では、約 30 ドル分の Fal.ai クレジットと、約 300 万の Opus 5.5 トークンを消費している（これは作者の特定サンプルにおけるコストであり、固定の総費用ではない）。
• 用途：コーディング Agent をハブとして外部の画像・動画モデルとローカルのコードエフェクトを統括するハイブリッドパイプラインの構成例を示している。

第 4 グループ：ゲームは動画出力にとどまらず、プレイヤーの操作に応答する必要がある

Charlie Hills のリストには、「ショート動画」の領域をはるかに超えて、複雑なインタラクティブ 3D アプリケーション開発へと踏み込んだ成果が 2 つ含まれている。

7. claude-opus-5-5-demo：単一セッションでの 3D Web ゲーム実証

• リポジトリ：riba2534/claude-opus-5-5-demo

• 概要：作者の自己報告によると、3 つの 3D Web ゲームそれぞれに対し、短いの要件プロンプトを入力し、単一セッション内でコーディングを完了して Cloudflare Pages へのデプロイまで行ったという。ここでの「短い」とはユーザーが与えた要件が簡潔であることを指し、Agent は同一セッション内でネット情報の検索、プロジェクト立ち上げ、コード記述、ヘッドレスブラウザによるテスト、問題修正、ビルド・デプロイというマルチステップの実行プロセスを経ている。

• 生成された 3 つのゲームモジュール：

  1. ペリカン・自転車（pelican-bike/、11 個の JS モジュール）：サングラスをかけマフラーを巻いたペリカンが海岸を走りながら魚を捕まえるゲーム。マフラーの布物理シミュレーション、昼夜サイクル、波のシミュレーション、14 個の実績、5 種類のカメラ視点、合成効果音を搭載。
  2. クロスファイア・輸送船（cf-transport-ship/、18 個の JS モジュール）：FPS 形式。モデルはまずマップ構造の攻略情報を検索してデッキ、船室、コンテナ構造を照合し、弾道のリコイル、コンピューター Bot との対戦、キルアナウンスを実装。
  3. QQ スピード（qq-speed/、15 個の JS モジュール）：Shift ドリフトや Ctrl ニトロなどのキー配置と操作を再現。スクリプトが事前にコースの俯瞰図を生成してカーブを検証し、十一城など 4 つのコースを内蔵。

• 作者が使用した短いプロンプトの原文（一字一句変更なし）：

  ペリカン・自転車： 生成一个鹈鹕骑自行车的 3D 页面，尽可能把你所有的能力全部都用上. 然后上传到 CDN 上, 把访问链接给我

  クロスファイア・輸送船： 尽可能真实的还原穿越火线中的运输船地图，我需要一个真实的枪战游戏，生成一个3d页面，尽可能发挥你的所有能力 做完之后上传到 CDN 上 把链接发给我

  QQ スピード： 尽可能真实地还原 QQ 飞车中的游戏地图。我需要一个真实的 QQ 飞车游戏，包括游戏的各种键位以及漂移玩法,生成一个3D 页面，尽可能发挥你的所有能力。 做完之后上传到 CDN 上 把链接发给我

• トラブルシューティングと修正のプロセス：モデルはセッション内で 320 秒間のヘッドレスブラウザ連続動作テスト（ソークテスト）を実施し、サブエージェントによる自己レビューで一部の不具合を修正した。公開後に発生した突発的なブラックアウトは、テスト値を注入した結果、ブルーム（Bloom）シェーダーが無効なピクセルに遭遇した際に NaN 汚染が拡散したことが原因と判明。ブルームの前にクリーンアップパスを挿入し、海面のフレネル反射など根本原因を修正して再デプロイした。

• 用途：単一セッション内でコーディング Agent が自律的に情報検索、テストの完結、デプロイおよび運用保守を行う実態を示している。

8. tidewater：WebGPU アイランドフィッシングゲーム

• リポジトリ：dgreenheck/tidewater
• 概要：WebGPU と WGSL をベースにしたアイランドフィッシング（島での釣り）のブラウザゲームであり、汎用のサードパーティ製フレームワークを使用せず、プロジェクト独自の軽量専用レンダリングエンジンを用いて構築されている。
• 技術的特徴とアセットのソース：
  • 水面と環境：4 カスケードの FFT 水面シミュレーション（Tessendorf スペクトルベース）を採用し、浅瀬の砕波、船の航行航跡、水中コースティクスを搭載。大気散乱モデルによる昼夜表現、ボリュームクラウド、チンダル現象（薄明光線）を再現。
  • 釣りゲームプレイ：18 種類の魚類、テンションコントロールによるロッド操作メカニクス、釣果の売買、釣り具や燃料の補給システムを搭載。
  • サードパーティ素材の統合：Poly Haven の CC0 シーンスキャンアセット、Microsoft Rocketbox のキャラクターモデル、Freesound の CC0 環境録音を組み込んでいる。
• ハードウェアと動作条件：WebGPU をサポートするモダンブラウザと対応 GPU が必要。初回読み込み時には数百個のシェーダースクリプトをコンパイルするため 1 分以上かかる場合があるが、ブラウザのキャッシュにより次回以降のアクセスは高速化される。
• 用途：WebGPU 環境において自作シェーダー、複雑な物理水面、サードパーティ素材を組み合わせるエンジニアリングリファレンスを提供している。

第 5 グループ：インスピレーション探し向けと、制作プロセスの理解向け

最後の 2 つのリポジトリはいずれもコミュニティの事例を集めたものだが、用途が異なる。一方は画風や公開プロンプトを探しやすく、もう一方は動画でどのようなツールやアセットが使われたかを追跡しやすい。

9. awesome-opus5-5-videos (yihui-dev メンテ版)：事例とプロンプトの整理

• リポジトリ：yihui-dev/awesome-opus5-5-videos
• 概要：475 本の動画事例を収録している。制作者がプロンプトを公開している場合はプロンプトを併記し、非公開の場合は元投稿へのリンクを掲載している。事例はモーショングラフィックス、解説、3D シーン、ミニゲームまで多岐にわたる。
• コア機能：付属のデモサイト（Skillry）では一部のプロンプトをユーザーが試せるようになっており、元投稿の動画とコードを再実行した結果を見比べることができる。
• 用途：視覚的なインスピレーションやプロンプトの記述スタイルを探すためのリファレンスライブラリを提供する。

10. awesome-opus-5-5-videos (athemeroy メンテ版)：ソース分類とサンプル調査ディレクトリ

• リポジトリ：athemeroy/awesome-opus-5-5-videos
• 概要：コミュニティの動画サンプルに対するソース分析を目的とした調査ディレクトリである。関連する候補投稿をスクレイピングし、ダウンロードした MP4 ファイルを SHA-256 ハッシュで重複排除している。分類器によって yes または likely と判定されたファイルは 1119 件存在するが、これはモデルが関与した傾向を示す分類ラベルに過ぎず、1119 件すべてが純粋な Opus 5.5 による成果物であると検証されたわけではない。また、代表的な 168 件の投稿事例を抽出して非ランダムな詳細レビューを実施している。
• 整理された役割と制作パス：
  1. モデルの 4 つの関与役割：レンダリングコードの記述、既存素材（Figma/動画素材）からの書き換え・変換、外部動画モデルのオーケストレーション、または Web アプリケーション開発後の人手による画面録画。
  2. 7 つの制作パス：コード描画 2D、知識解説、3D/リアルタイムグラフィックス、既存素材の変換、外部動画モデルパイプライン、アプリ・ゲーム画面録画、ハイブリッド/未確定パイプライン。
• 両プロジェクトの違い：yihui-dev が事例の提示と制作者が公開したプロンプトや元投稿の収集に重点を置いているのに対し、athemeroy はソースの追跡、制作工程の検証、制作におけるモデルの実質的な役割の識別に重点を置いている。

10 個のプロジェクト、どこから始めるべきか

作りたい作品のイメージがすでにある場合は、以下の生成物と着手条件から適切な入口を見つけることができる：

プロジェクト選びの際、まず何を納品すべきかを明確にする

これら 10 個のプロジェクトは、生成 AI をコードエンジニアリングと組み合わせた際の実用的な適用範囲を示している：

1. ビジュアル表現のもう一つのアプローチとしてのコード：幾何学図形、キネティック・タイポグラフィ、フラットな手描き表現、インタラクティブなシーンにおいて、大規模モデルでコードを生成してブラウザ上で実行することで、コードのバージョン管理やパラメータ調整能力を活かした確定的レンダリングが実現できるだけでなく、そのままリアルタイムなインタラクティブアプリケーションとして稼働させることもできる。
2. コンセプトの提示とエンジニアリング納品条件の区別：自動化された短編動画の生成であれ、単一セッションでのゲーム構築であれ、その背景には明確な環境仕様（仮想クロックによる制御、スクリプトのルール制限など）、複数回にわたるセルフテストとレビュー、あるいは外部素材や外部モデルとの協調的なオーケストレーションが存在している。各プロジェクトの依存環境、計算コスト、素材の入手元を理解することが、実際の再現や技術選定における大前提となる。