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状態を変形します（ボタン → ローダー → チェック → … → トースト → ボタン）、シームレスな視覚的フローを生み出します。
• 閉形式スプリング – 決定的な減衰スプリング数学がすべての遷移を駆動し、弾むようなイージングなしで微妙なオーバーシュートを提供します。
• 音楽優先のタイミング – 約120 BPMのロイヤリティフリーのトラックを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)）を使用して、レンダリングを並列化可能かつ再現可能にします。
• 制作コストを抑えながら高価に見える、斬新な「単一形状、カットなし」の視覚的メタファーを実証します。

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

---

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