HyperFrames 動畫打磨 是做什麼的？
當影片已存在但需要更高級、更流暢的感覺時，使用此技能。
片段診斷
將時間軸劃分為 3 到 5 秒的區塊：
- 觀眾在這段片段中應理解什麼？
- 哪個元素是焦點？
- 游標是否點擊了正確的目標？
- 在點擊發生前，元件是否已經出現？
- 是否有長時間的停頓而無任何動作？
- 任何文字或圖片是否被裁切？
高影響力調整
- 將點擊反饋移近游標接觸點。
- 減少利益點與價格之間的停頓。
- 對 UI 滾動使用
power3.inOut。 - 對文字與卡片入場使用
power2.out或power3.out。 - 避免子動畫與父容器滾動產生衝突。
- 對點擊目標套用輕微的焦點縮放，範圍在
1.015至1.035之間。 - 使用暫時的陰影引導視線。
常見修正
游標點擊空位
- 將點擊延後，直到元件完全入場。
- 從 DOM 邊界框重新計算
x/y座標。 - 如果容器會滾動，請在滾動後（而非之前）驗證位置。
文字重疊
- 增加入場間隔時間。
- 減少區塊的縮放比例，而不僅僅是字型大小。
- 減少每一影格的可見文案數量。
- 確保卡片與按鈕使用固定高度。
缺乏活力的輪播卡
- 讓輪播卡以
y、opacity和輕微scale方式浮現。 - 在水平軸上進行動畫時，在中央卡片處暫停。
- 對選中的卡片套用細微的縮放效果。
- 移除原始網站上不存在的邊框或陰影。
靜態片段
- 將停頓轉變為微動態：輕微視差、細微呼吸效果、游標準備下一步動作。
- 縮短沒有重要閱讀內容的停留時間。
- 以更緊湊的序列展示利益點與價格。
CTA 檢查清單
- 產品早早出現。
- 利益點在價格之前出現。
- 價格顯示在乾淨的畫面上。
- CTA 獲得視覺焦點。
- 游標展現旅程而不顯隨機。
- 過渡到結帳頁面感覺像是點擊的自然結果。
驗證
使用 npx hyperframes inspect 並提供足夠的樣本數：
npx hyperframes inspect ./project --samples 18
如果可能，在客戶批評的秒數處生成快照並審查：
- 第一影格；
- 第一次點擊；
- 主要產品；
- 利益點；
- 價格；
- 結帳頁面；
- 確認頁面。
進行精準修改：在重構 HTML 之前，調整時序、緩動、偏移、縮放與透明度。