Hover Lift

效果簡述

卡片 hover 時往上浮 4px，加一道帶 accent 色的陰影。最常見的「我可以 點」訊號，比單純 border 變色更立體，比 scale 1.05 又不那麼浮誇。

Claude Code Prompt

參考：A032 hover lift
技術：Framer Motion 的 whileHover

具體行為:
- whileHover: { y: -4, boxShadow: '0 12px 24px -8px rgba(194, 65, 12, 0.35)' }
- transition: { duration: 0.2, ease: 'easeOut' }

限制：
- y 不要超過 -8（會像在飛）
- 陰影顏色用品牌色的低透明度，比純黑陰影有設計感
- 手機不依賴 hover：把 :focus-visible 也加上同樣效果

完整程式碼

'use client'

import { motion } from 'framer-motion'

export function HoverLift() {
return (
  <motion.div
    whileHover={{
      y: -4,
      boxShadow: '0 12px 24px -8px rgba(194, 65, 12, 0.35)',
    }}
    transition={{ duration: 0.2, ease: 'easeOut' }}
    className="rounded-lg border bg-card p-5"
  >
    滑上來
  </motion.div>
)
}

何時用

• ✅ Pricing 的精選方案卡片（暗示「點這個」）
• ✅ 服務介紹的三欄並排卡片
• ✅ 部落格文章列表

何時別用

• ❌ 主要 CTA 大按鈕（用 scale 或顏色變化更直接）
• ❌ 已經有 border 動畫的卡片（兩個效果打架）
• ❌ 純手機畫面（hover 用不上）

我踩過的坑

1. y 跟 transform 衝突：如果卡片本身已經有 transform: scale(...) 寫在 CSS class 上，motion 的 y 會被覆蓋。解法：所有 transform 都 交給 motion 控制，CSS 只負責靜態樣式。

2. 陰影顏色不要用純黑：純黑陰影在淺色背景太搶眼，在深色背景看不到。 用 accent 色低透明度（0.3-0.4）兩邊都討喜。

相關效果

• F06 Hover Color Shift — 文字版的 hover 反饋