HyperFrames 商用動画 は何をしますか？
このスキルは、mobile-dom-fidelity でサイトを検査した後に使用します。
動画構成
- 短い見出しで始まるイントロ。
- カルーセルへのスクロールまたはエントランス。
- メイン商品のハイライト。
- 商品クリックのシミュレーション。
- 主なメリット。
- 価格。
- ユーザーの選択肢。
- カートまたはチェックアウト。
- CTAまたは最終確認。
インタラクティブジャーニー
動画はスライドシーケンスではなく、実際のブラウジングセッションのように感じられる必要があります。 各アクションを原因と結果としてモデル化します。
- スクロールでセクションを表示。
- カルーセルが商品間を移動。
- メインカードが中央に戻る。
- カーソルがカードをクリック。
- 商品ページが表示される。
- メリットが表示される。
- 価格とCTAにフォーカスが当たる。
- クリックでカートまたはチェックアウトに移動。
- 最後に結論または承認を表示。
構成ルール
- 縦型フォーマット：
1080x1920。 - DOMから抽出した実際のテキストを使用。
- ローカルアセットまたは許可されたURLを使用。
- 一時停止したGSAPタイムラインを
window.__timelinesに登録。 - レンダリング時のフェッチを回避。
- 非決定論的な
Date.now()とMath.random()を回避。 - アニメーション化されたすべてのクリックは、表示されているコンポーネントをヒットする必要があります。
アニメーションパターン
- タイトル：スムーズなタイプイン、急激な速度は避ける。
- カード：
y、opacity、および軽いscaleでエントランス。 - カルーセル：メインカードで一時停止する水平移動。
- クリック：カーソル、リップル、マイクロズーム、フォーカスシャドウ。
- 画面遷移：右から左への横方向のトランジション。
- 商品：メイン画像の軽いズームと、メリットの段階的なエントランス。
クリックマッピング
クリックをアニメーション化する前に、以下を登録します。
target selector:
visible from:
click time:
target rect:
click x/y:
post-click scene:
以下の場合はクリックを受け入れません。
- ターゲットがまだ非表示の場合。
- ターゲットがビューポートの外側にある場合。
- 別のオーバーレイがターゲットを覆っている場合。
- エントランスアニメーションが終了する前にカーソルが到着した場合。
必須バリデーション
配信前に以下を実行します。
npx hyperframes lint ./project
npx hyperframes validate ./project
npx hyperframes inspect ./project --samples 18
シミュレートされたクリックがある場合は、以下も検証します。
- ターゲットが存在すること。
- クリックのタイムスタンプ時にターゲットが表示されていること。
- クリックの中心がバウンディングボックス内にあること。
- 壊れた画像がないこと。
- キーフレームでテキストが重なっていないこと。
期待される出力
- コンポジション
index.html。 - レンダリングされたMP4動画。
- バリデーションサマリー。
- 必要に応じて、クリーンなハンドオフフォルダ。