Product Launch Motion – Claude Codeスキル

これは何か ウェブサイトのURLを短く高品質な製品発表ビデオに変換するClaude Codeスキル。Claudeがサイトを読み、ストーリーを書き、シーンを監督し、音楽、効果音、モーションブラーを備えた60fpsのMP4をレンダリングします。すべて純粋なHTML/CSS/JSから生成され、After EffectsやAIビデオモデルは不要です。

使用方法

# スキルをインストール（一度だけ）
npx skills add AbubakrChan/product-launch-motion
# その後、Claude Code内で次のように依頼します：
https://your-website.com の発表ビデオを作成してください

Claudeは一連のDECISION:行（監督の選択）を出力し、最終ビデオはローカルで生成されます。

主要なアイデア

• 単一の形状、カットなし – 単一のUI要素がすべてのUI状態を変形します（ボタン→ローダー→チェック→…→トースト→ボタン）。シームレスな視覚的フローを生み出します。
• 閉形式スプリング – 決定的な減衰スプリングの数学がすべての遷移を駆動し、弾みすぎない微妙なオーバーシュートを提供します。
• 音楽優先のタイミング – 約120BPMのロイヤリティフリー曲をNumPyで分析し、すべてのUIサウンドがビートのピークに一致します。
• カーソル駆動のアクション – クリック、ドラッグ、押下は仮想カーソルでアニメーション化され、オプションで製品固有の「エージェント」カーソルに置き換え可能です。
• 純関数レンダリング – 各ピクセルはf(t)であり、任意のフレームを決定的に再生成できます。
• レンダリングパイプライン：HTML → Playwrightサブフレーム → FFmpeg tmix（モーションブラー）→ 60fps H.264 MP4。

リポジトリの内容

パス	説明
SKILL.md	Claudeが従うプロンプトとワークフロー。
references/prompts.md	元のプロンプトとレビューノート（他の製品にコピー＆ペーストして再利用）。
references/technique.md	スプリング、カメラリグ、オドメーターアニメーション、オーディオ合成、レンダリングに関する技術ノート。
legacy/	v1スキル（音声ナレーション駆動、GSAP + HyperFrames）。
examples/	サンプルビデオとプレビュー画像。

要件

• Claude Code (Opus 5.5) – スキルを実行するAI。
• Node ≥ 20 + Playwright – ヘッドレスHTMLレンダリング用。
• FFmpeg – モーションブラー合成とエンコーディング。
• Python 3 + NumPy – ビートグリッド解析と効果音合成。
• オプションのロイヤリティフリー音楽（約120 BPM）をサウンドトラック用に。

なぜ興味深いか

• 大規模言語モデルがディレクターとして機能し、外部のビデオ生成モデルなしで、簡単な指示を完全にアニメーション化されたビデオに変える方法を示しています。
• 決定的で数学的に駆動されるアニメーション（スプリング、seek(t)）を使用して、レンダリングを並列化可能かつ再現可能にします。
• 制作コストを抑えながら高価に見える、斬新な「単一形状、カットなし」の視覚的メタファーを実証します。

リポジトリの内容

パス	説明
SKILL.md	Claudeが従うプロンプトとワークフロー。
references/prompts.md	元のプロンプトとレビューノート（他の製品にコピー＆ペーストして再利用）。
references/technique.md	スプリング、カメラリグ、オドメーターアニメーション、オーディオ合成、レンダリングに関する技術ノート。
legacy/	v1スキル（音声駆動、GSAP + HyperFrames）。
examples/	サンプルビデオとプレビュー画像。

要件

• Claude Code (Opus 5.5) – スキルを実行するAI。
• Node ≥ 20 + Playwright – ヘッドレスHTMLレンダリング用。
• FFmpeg – モーションブラー合成とエンコーディング。
• Python 3 + NumPy – ビートグリッド分析と効果音合成。
• オプションのロイヤリティフリー音楽（約120 BPM）をサウンドトラック用に。

なぜ興味深いか

• 大規模言語モデルがディレクターとして機能し、外部のビデオ生成モデルなしで、ブリーフを完全にアニメーション化されたビデオに変える方法を示しています。
• 決定的で数学的に駆動されるアニメーション（スプリング、seek(t)）を使用して、レンダリングを並列化可能かつ再現可能にします。
• 制作コストを抑えながら高価に見える、斬新な「単一形状、カットなし」の視覚的メタファーを実証します。

ライセンス スキルコードと参考資料はMITライセンスです。サンプルフィルムはCheerful.aiが所有しています（NOTICEを参照）。

---

このスキルで発表ビデオを作成した場合は、Xで@Muhamma77800831をタグ付けしてシャウトアウトを受け取りましょう。