howseen-ai/claude-motion-design

これは何？

主な機能

• 01seek(t)関数から各フレームをレンダリングするため、出力を再現できます。
• 02Playwrightでのスクリーンショット撮影と、サブフレームのモーションブラーを適用したffmpegエンコードに対応します。
• 03検出したビートマップと音声ピークに合わせて、シーンの切り替えや効果音を同期します。
• 04既存の動画を再現する、フレーム単位で固定されたリメイクモードを備えています。
• 05無料の音楽、効果音、ロゴ、フォントを取得するスクリプトを提供します。

ユースケース

• 動画編集ソフトを使わずに、製品のローンチ動画や告知動画を制作する。
• HTMLのシーンから、ビートに同期したSNS向けのループ動画を生成する。
• タイムラインを編集する代わりに、コードを変更して動画を調整する。
• 参考となるモーション作品を、別のブランド向けに再現する。

クイックスタート

1. 1

   スキルを Claude Code にコピーする

   mkdir -p ~/.claude/skills && cp -r skill/motion-design ~/.claude/skills/
2. 2

   Python の依存関係と Chromium をインストールする

   pip install playwright imageio-ffmpeg numpy pillow && python -m playwright install chromium
3. 3

   Claude Code で動画を作成するよう依頼するか、/motion-design と入力する

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

• !このスキルを使うには Claude Code の環境が必要です。また、レンダリングには Chromium と ffmpeg が必要です。
• !音楽と効果音は各ライセンスに基づいてサードパーティのソースからダウンロードされるため、再配布されません。

トピック

よくある質問

claude-motion-design とは？

After EffectsやRemotionのライセンスなしで、HTML・Playwright・ffmpegからモーションデザイン動画を作るClaude Codeスキル。 claude-motion-designは、すべてコードでモーションデザイン動画を制作するためのClaude Codeスキルです。各フレームは単一のseek(t)関数で時刻から計算され、Playwrightでレンダリングした後、サブフレームにモーションブラーを適用してffmpegでエンコードします。有料の編集ソフトやライセンスが必要なレンダリングエンジンを使わずに、決定論的で編集可能な動画を出力したい開発者を対象としています。

claude-motion-design は無料で使えますか？ライセンスは？

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

claude-motion-design は今もメンテナンスされていますか？

活発にメンテナンス中。claude-motion-design の最終コミットは 2026年10月4日 です。

claude-motion-design は何に使えますか？

動画編集ソフトを使わずに、製品のローンチ動画や告知動画を制作する。 HTMLのシーンから、ビートに同期したSNS向けのループ動画を生成する。 タイムラインを編集する代わりに、コードを変更して動画を調整する。 参考となるモーション作品を、別のブランド向けに再現する。

claude-motion-design のインストール方法は？

スキルを Claude Code にコピーする: mkdir -p ~/.claude/skills && cp -r skill/motion-design ~/.claude/skills/ Python の依存関係と Chromium をインストールする: pip install playwright imageio-ffmpeg numpy pillow && python -m playwright install chromium Claude Code で動画を作成するよう依頼するか、/motion-design と入力する

claude-motion-design はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/howseen-ai/claude-motion-design