Vincentwei1021/mg-styles-15

これは何？

主な機能

• 01異なるスタイルの10秒映像を15本収録。
• 02各スタイルのプロンプト、スタイルの解説、完全なソースコードを公開。
• 03画像・動画生成を使わず、SVG、Canvas、WebGL、Three.js、Blenderのコードで映像を描画。
• 04録音した楽器サンプルを使い、audio.pyスクリプトでサウンドトラックを合成。
• 05ヘッドレスChromeのレンダラーとffmpegで、フレーム単位で正確なMP4を生成。
• 06各映像をスクラブ再生できるブラウザプレビュー。

ユースケース

• 特定のモーションデザインスタイルがコードでどのように作られているかを学ぶ。
• プロンプトを再利用し、オリジナルの短編アニメーション制作の出発点にする。
• 決定論的な動画出力を実現する、ヘッドレスChromeとffmpegを組み合わせたレンダリングパイプラインを調べる。
• AIアシスタントが映像と音声の両方のコードを書いて作品を作る方法を探る。

クイックスタート

1. 1

   リポジトリのルートでNodeパッケージをインストールします（Node.js 22.12以降が必要です）

   npm install
2. 2

   サウンドトラックとアセット用スクリプトのPythonパッケージをインストールします（Python 3.11以降が必要です）

   pip install -r requirements.txt
3. 3

   映画1作品分のサウンドトラックを合成します

   python3 demos/01-flat-vector/audio.py
4. 4

   その映画の全フレームをMP4にレンダリングします（Google Chromeとffmpegが必要です）

   node harness/render.mjs demos/01-flat-vector

使う前に知っておきたいこと

• !レンダリングには、マシンにGoogle Chromeとffmpegをインストールする必要があります。
• !3D映画にはBlenderも必要で、フォントはリポジトリに含まれていません。
• !これは15作品とそのソースコードのショーケースであり、再利用可能なライブラリではありません。

トピック

よくある質問

mg-styles-15 とは？

Claudeがコードを書いて制作した10秒のモーションデザイン映像15本。各スタイルのプロンプトと完全なソースコードを公開。 このリポジトリには、スタイルごとに1本、各10秒のモーションデザイン映像が15本収録されています。コマ撮りのセルアニメーションやアイソメトリックな2.5Dから、ピクセルアート、シンセウェーブ、9:16のバラエティ番組風字幕編集まで、幅広いスタイルを扱っています。各映像は、ビジュアル、アニメーション、音楽、効果音を含め、単一のプロンプトをもとにClaude Opus 5.5がコードを書いて制作しました。映像はSVG、Canvas、WebGL、Three.jsで描画し、3D映像にはBlenderを使用しています。生成画像・動画モデルは使っていません。

mg-styles-15 は無料で使えますか？ライセンスは？

mg-styles-15 は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

mg-styles-15 は今もメンテナンスされていますか？

活発にメンテナンス中。mg-styles-15 の最終コミットは 2026年10月5日 です。

mg-styles-15 は何に使えますか？

特定のモーションデザインスタイルがコードでどのように作られているかを学ぶ。 プロンプトを再利用し、オリジナルの短編アニメーション制作の出発点にする。 決定論的な動画出力を実現する、ヘッドレスChromeとffmpegを組み合わせたレンダリングパイプラインを調べる。 AIアシスタントが映像と音声の両方のコードを書いて作品を作る方法を探る。

mg-styles-15 のインストール方法は？

リポジトリのルートでNodeパッケージをインストールします（Node.js 22.12以降が必要です）: npm install サウンドトラックとアセット用スクリプトのPythonパッケージをインストールします（Python 3.11以降が必要です）: pip install -r requirements.txt 映画1作品分のサウンドトラックを合成します: python3 demos/01-flat-vector/audio.py その映画の全フレームをMP4にレンダリングします（Google Chromeとffmpegが必要です）: node harness/render.mjs demos/01-flat-vector

mg-styles-15 はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Vincentwei1021/mg-styles-15