HyperFrames 商業影片
請先在檢查網站，使用 mobile-dom-fidelity 技能後，再使用此技能。
影片結構
- 開場：顯示簡短標題。
- 滾動或進入輪播。
- 主要產品亮點。
- 模擬產品點擊。
- 主要優勢。
- 價格。
- 使用者選擇。
- 購物車或結帳。
- 行動呼籲或最終確認。
互動式旅程
影片應感覺像真實的瀏覽過程，而非幻燈片序列。 將每個動作建模為因果關係：
- 滾動揭示該區段；
- 輪播切換產品；
- 主要卡片回到中央；
- 游標點擊卡片；
- 產品頁面進入；
- 優勢出現；
- 價格與行動呼籲獲得焦點；
- 點擊導向購物車或結帳；
- 最後顯示結論或確認。
構圖規則
- 垂直格式：
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 影片；
- 驗證摘要；
- 整潔的交付資料夾（如有需要）。