製品ローンチビデオスキル
このスキルは、Hyperframes を使用したハイエンドなプレミアム製品ローンチビデオ作成をガイドします。ブランド発見から最終検証までの構造化されたワークフローを重視します。
公式 Hyperframes スキルの活用
このスキルは、ビデオプロジェクトのディレクター兼アーキテクターとして機能します。技術的な正確性と最新のフレームワークパターンへのアクセスを確保するには、公式の Hyperframes スキルと組み合わせて使用する必要があります。
コードを記述する前に、以下を実行してください:
- 公式 /hyperframes スキル を呼び出し、構成ルール、data-attribute セマンティクス、フレームワークの制約を確認します。
- 公式 /gsap スキル を呼び出し、詳細なタイムラインリファレンス、イージング関数、複雑なアニメーションパターンを参照します。
このスキルの戦略的ガイダンスと公式スキルの技術ドキュメントを組み合わせることで、プロダクショングレードのビデオ構成を生成できます。
ステートレスプロジェクト生成（重要）
このディレクトリ（hyperframes-product-launch-video）は読み取り専用のテンプレート兼スキルフォルダです。ここにプロジェクト固有のファイルを決して書き込まないでください。
新しいビデオプロジェクトを作成するときは:
- ターゲットディレクトリ: すべてのプロジェクトファイルは、ユーザーのターゲットビデオプロジェクトフォルダ（例：
my-new-video/またはmy-new-video/assets/）に作成する必要があります。 - プロジェクト DNA:
brand_dna.jsonをターゲットプロジェクトのassets/フォルダまたはルートフォルダに生成します。 - アートディレクション: 最終的な
ART_DIRECTION.mdをターゲットプロジェクトフォルダ内に保存します。 - 副作用なし: プロジェクト実行中に、このスキルフォルダ内のファイルを変更しないでください。
ワークフロー
1. インタロゲーションフェーズ（ブランド DNA）
開始する前に、ブランドを理解する必要があります。
- ウェブサイト分析: Playwright を使用してユーザーのウェブサイトを訪問します。ブランドカラー、タイポグラフィ（フォント）、コアバリュープロポジションを抽出します。
- アセットリクエスト: ユーザーにロゴとアイコンを依頼します。クリーンで透過、タイトにクロップされた PNG または SVG の必要性を指定します。
- ビデオタイプの選択: 100% モーショングラフィックスビデオか、ハイブリッド（例：創業者のトーキングヘッド + Hyperframes モーショングラフィックス）かを尋ねます。
2. プランニングフェーズ（アートディレクション）
計画なしに HTML を記述しないでください。
- アートディレクションの生成: アートディレクションテンプレートに基づいて
ART_DIRECTION.mdドキュメントを作成します。 - シーンブレイクダウン: ビデオの毎秒を定義し、ビジュアルアクション、カメラムーブメント、イージング関数、サウンドエフェクトを指定します。
3. 実装（プレミアムモーションデザイン）
エリートモーションデザイン原則を適用します。コードスニペットについてはモーションデザインパターンを参照してください。
- Apple スタイルカメラ: 巨大なマクロズームとスナップズーム（
back.out）を使用します。 - イレイザーリビール: スライディングロゴによって「食べられる」ように段階的にテキストの不透明度を変化させます。
- クラッシュ/シャッター: GSAP スキャッターを使用した物理的衝撃効果。
- グラスモーフィズム:
backdrop-filter: blur(40px)を使用したプレミアム UI 要素。 - タイプライター物理: カーソルを押すバウンスするスパン。
4. サウンドデザイン（SFX）
- ショッピングリスト: ストーリーボードに基づいて、ユーザーに「サウンドデザインショッピングリスト」を提供します。
- 同期:
<audio data-start="...">タグを使用して、GSAP のヒットに完全に一致させます。
5. 検証とトラブルシューティング
- 落とし穴: 一般的な Hyperframes のバグ（期間の不一致、ターゲット欠落など）を回避するために、重要な落とし穴を確認します。
- FFmpeg: レンダリングが失敗した場合は、ユーザーにローカルに FFmpeg をインストールするようガイドします。
ベストプラクティス
- アトミックシーン: シーンをモジュール化し、
data-startとdata-durationで厳密に管理します。 - 可視性管理: シーン遷移には
autoAlphaを使用して、クリーンなシークを確保します。 - レイアウト vs. トランスフォーム: flexbox のギャップには物理的な寸法を、視覚的な演出にはトランスフォームを使用します。