WebサイトのURLから、音楽に同期した効果音とモーションブラー付きの60 fps製品ローンチ動画を作るClaude Codeスキル。
Lob0Garou/opus-visual-motion-engine
コーディングモデル向けに、モーショングラフィックスやコード生成動画の制作を、計画・レンダリング・自動QA・MP4書き出しのゲート付きパイプラインで支援するエージェントスキル。
- スター
- 3
- フォーク
- 0
- 未解決の Issue
- 0
- 最終コミット
- 26 日前
これは何?
opus-visual-motion-engineは、モーショングラフィックス、コード生成動画、キネティックタイポグラフィ、ランディングページ、図表を制作するためのエージェントスキルです。コーディングモデルを、ビートとタイムラインを含む計画の作成、seek(t)とDURATIONの仕様を備えた1920×1080のHTMLテンプレートを使った制作、ヘッドレスレンダリング、自動QA、問題の修正、ffmpegによるMP4・WebM・GIFへの書き出しという固定の手順に沿って導きます。
QAスクリプトは各フレームをレンダリングし、フレームの停止や空白、出力の非決定性、テキストの衝突、コントラストと最小文字サイズ、AI生成デザインによくあるパターンをチェックします。コンタクトシート、キーフレーム、フレームごとのインク占有率を記録したreport.jsonを出力するため、画像入力に対応していないモデルでも結果を評価できます。ページモードでは、デスクトップ、モバイル、ダークスキームのレイアウトもチェックします。
リポジトリには、キューシートから決定論的なBGMや効果音を生成するscoreスクリプトと、ビート、オンセット、ラウドネスのデータを抽出して音に合わせたモーションを作れるaudio-dataスクリプトも含まれています。
主な機能
- 01再利用可能な1920×1080のHTMLコンポジションテンプレートを使った、計画から書き出しまでのパイプライン。
- 02シード付き乱数生成器とイージングヘルパーを備えた、決定論的なseek(t)タイミング仕様。
- 03フレームの停止、テキストの衝突、低コントラスト、シーン間の空白を検出するヘッドレスレンダリングQA。
- 04ffmpegを使い、フレーム単位で正確なMP4・WebM・GIFを書き出し。音声も追加可能。
- 05キューシートからオリジナルの音楽や効果音を生成し、モーションと音声を同期するためのビートデータを抽出。
ユースケース
- コーディングエージェントを使った短いモーショングラフィックスやショーリールの制作。
- 手動の編集ソフトを使わずに、コード生成動画やキネティックタイポグラフィを制作。
- フレームを目視せずに、エージェントが生成したアニメーションのレイアウトやタイミングの不具合をチェック。
- 自動チェックで検証できる、アニメーション付きトランジションを備えたランディングページや図表の制作。
クイックスタート
- 1
リポジトリを harness の skills フォルダーに clone します
git clone https://github.com/Lob0Garou/opus-visual-motion-engine ~/.dsh/skills/opus-visual-motion-engine - 2
スクリプトの依存関係と Chromium ブラウザーをインストールします
cd ~/.dsh/skills/opus-visual-motion-engine/scripts && npm install && npx playwright install chromium - 3
新しいセッションを開始して、エージェントにこの skill を使うよう指示し、生成物の QA チェックを実行します
node scripts/qa.mjs composition.html
使う前に知っておきたいこと
- これはコーディングモデル向けの agent skill なので、活用するには互換性のある agent harness が必要です。
- Export には PATH 上に ffmpeg があり、Node 18 以降が必要です。
- ベンチマークは各アームにつき1回の実行のみのため、報告された向上は統計的に実証されていません。
- プロジェクトは新しく、スターは3つのみです。
トピック
よくある質問
- opus-visual-motion-engine とは?
- コーディングモデル向けに、モーショングラフィックスやコード生成動画の制作を、計画・レンダリング・自動QA・MP4書き出しのゲート付きパイプラインで支援するエージェントスキル。 opus-visual-motion-engineは、モーショングラフィックス、コード生成動画、キネティックタイポグラフィ、ランディングページ、図表を制作するためのエージェントスキルです。コーディングモデルを、ビートとタイムラインを含む計画の作成、seek(t)とDURATIONの仕様を備えた1920×1080のHTMLテンプレートを使った制作、ヘッドレスレンダリング、自動QA、問題の修正、ffmpegによるMP4・WebM・GIFへの書き出しという固定の手順に沿って導きます。
- opus-visual-motion-engine は無料で使えますか?ライセンスは?
- opus-visual-motion-engine は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- opus-visual-motion-engine は今もメンテナンスされていますか?
- 活発にメンテナンス中。opus-visual-motion-engine の最終コミットは 2026年9月26日 です。
- opus-visual-motion-engine は何に使えますか?
- コーディングエージェントを使った短いモーショングラフィックスやショーリールの制作。 手動の編集ソフトを使わずに、コード生成動画やキネティックタイポグラフィを制作。 フレームを目視せずに、エージェントが生成したアニメーションのレイアウトやタイミングの不具合をチェック。 自動チェックで検証できる、アニメーション付きトランジションを備えたランディングページや図表の制作。
- opus-visual-motion-engine のインストール方法は?
- リポジトリを harness の skills フォルダーに clone します: git clone https://github.com/Lob0Garou/opus-visual-motion-engine ~/.dsh/skills/opus-visual-motion-engine スクリプトの依存関係と Chromium ブラウザーをインストールします: cd ~/.dsh/skills/opus-visual-motion-engine/scripts && npm install && npx playwright install chromium 新しいセッションを開始して、エージェントにこの skill を使うよう指示し、生成物の QA チェックを実行します: node scripts/qa.mjs composition.html
- opus-visual-motion-engine はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/Lob0Garou/opus-visual-motion-engine
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
スクリプトから、ローカル音声・単語ごとのタイミング・Canvas描画を使った解説動画や製品デモを生成します。
Claude CodeとCodex向けのエージェントスキル。アプリの実際のUIを、音楽に合わせたローンチ映像や短編動画にしてローカルでレンダリングします。
短いテーマから、HyperFramesでビート同期のモーショングラフィックス動画を作るClaude Codeスキル。
段階ごとの品質ゲートを備え、30〜90秒のモーショングラフィックス動画制作を支援するClaude Code・Codex向けエージェントスキル。
Remotionで放送番組風のモーショングラフィックスを作るAIコーディングエージェント向けの4つのAgent Skills。