Repolode
投稿する
AbubakrChan

AbubakrChan/product-launch-motion

WebサイトのURLから、音楽に同期した効果音とモーションブラー付きの60 fps製品ローンチ動画を作るClaude Codeスキル。

GitHub で見る公式サイト
スター
322
フォーク
47
未解決の Issue
0
最終コミット
5 日前

これは何？

Product Launch Motionは、製品サイトのURLを受け取り、短いローンチ動画を演出・構築・レンダリングするClaude Codeスキルです。Claudeがサイトを読み取り、ストーリーを組み立て、音楽トラックから測定したビートグリッドに各シーンを配置し、効果音を同期させた60 fpsのMP4を出力します。

各フレームは時間を入力とする純粋関数としてHTMLで計算されるため、レンダリング結果は決定的で、ビートごとに確認できます。Playwrightでサブフレームをキャプチャし、ffmpegでモーションブラーを適用します。アニメーションには閉形式の減衰スプリングを使い、ハードカットではなく、画面上の1つの要素を状態間で変形させます。このスキルにはClaude Opus 5.5が必要で、Node 20以降、Playwright、FFmpeg、numpyを含むPython 3が必要です。

リポジトリには、GSAPとHyperFramesを使ってナレーション主導の動画を制作する旧バージョンv1のスキルも、legacyフォルダーに残されています。

主な機能

  • 01WebサイトのURLから、手作業で編集せずにローンチ動画を制作します。
  • 02音楽トラックから測定したビートグリッドに、動きと効果音を配置します。
  • 03ffmpegのモーションブラーを適用した60 fpsの動画をレンダリングします。
  • 04閉形式のスプリングと、ハードカットの代わりに変形する1つの要素を使います。
  • 053D形状のエフェクト用に、オプションのWebGLガラス表現パスを利用できます。

ユースケース

  • 動画編集ソフトを使わずに、SaaSのランディングページ用ローンチ動画を作成する。
  • 既存のWebサイトをもとに、効果音が同期した短いプロモーション動画を制作する。
  • 決定的に動画へレンダリングできるHTMLで、モーションデザインのアイデアを試作する。

クイックスタート

  1. 1

    スキルをインストールする

    npx skills add AbubakrChan/product-launch-motion
  2. 2

    Claude Codeで、サイトのURLを添えて動画を作成するよう依頼する

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

  • Claude Codeが必要です。READMEではOpus 5.5を推奨しています。小型モデルでは詳細の多くが抜け落ちるためです。
  • レンダリングには、Node 20+、Playwright、FFmpeg、numpyを含むPython 3が必要です。すべてローカルにインストールしてください。
  • サンプル動画はCheerful向けに制作されたもので、スキルにはMITライセンスが適用されていますが、再利用は許可されていません。

トピック

#agent-skill#claude-code#motion-graphics#html-to-video#ffmpeg#playwright#video-generation#agent-skills#ai-agents#anthropic

よくある質問

product-launch-motion とは？
WebサイトのURLから、音楽に同期した効果音とモーションブラー付きの60 fps製品ローンチ動画を作るClaude Codeスキル。 Product Launch Motionは、製品サイトのURLを受け取り、短いローンチ動画を演出・構築・レンダリングするClaude Codeスキルです。Claudeがサイトを読み取り、ストーリーを組み立て、音楽トラックから測定したビートグリッドに各シーンを配置し、効果音を同期させた60 fpsのMP4を出力します。
product-launch-motion は無料で使えますか？ライセンスは？
product-launch-motion は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
product-launch-motion は今もメンテナンスされていますか？
活発にメンテナンス中。product-launch-motion の最終コミットは 2026年10月15日 です。
product-launch-motion は何に使えますか？
動画編集ソフトを使わずに、SaaSのランディングページ用ローンチ動画を作成する。 既存のWebサイトをもとに、効果音が同期した短いプロモーション動画を制作する。 決定的に動画へレンダリングできるHTMLで、モーションデザインのアイデアを試作する。
product-launch-motion のインストール方法は？
スキルをインストールする: npx skills add AbubakrChan/product-launch-motion Claude Codeで、サイトのURLを添えて動画を作成するよう依頼する
product-launch-motion はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/AbubakrChan/product-launch-motion

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト