Hover Color Shift

效果簡述

連結 / 按鈕的最基本 hover 反饋：顏色變、加一點點 x 位移當「指向感」。 duration 200ms 是節奏的甜蜜點，再慢就顯得遲鈍。

Claude Code Prompt

參考：A031 hover color shift
技術：Framer Motion 的 whileHover

具體行為:
- initial: { color: 'var(--muted-foreground)' }
- whileHover: { color: 'var(--lab-accent)', x: 4 }
- transition: { duration: 0.2, ease: 'easeOut' }

限制：
- 手機沒有 hover，要做對應的 :active 或不依賴 hover
- x 位移不要超過 6px（會像錯位）
- duration 不要超過 250ms（人對 hover 期待瞬時）

完整程式碼

'use client'

import { motion } from 'framer-motion'

export function HoverColorShift() {
return (
  <motion.button
    initial={{ color: 'var(--muted-foreground)' }}
    whileHover={{ color: 'var(--lab-accent)', x: 4 }}
    transition={{ duration: 0.2, ease: 'easeOut' }}
  >
    hover over me →
  </motion.button>
)
}

何時用

• ✅ Navigation 連結
• ✅ Footer 連結列
• ✅ 文字按鈕（不是主要 CTA）

何時別用

• ❌ 主要 CTA（要更明顯的反饋，例如背景變色）
• ❌ 純圖標按鈕（只變色看不出）
• ❌ 純手機應用（hover 用不上）

我踩過的坑

1. CSS transition 也能做為什麼用 motion：因為 motion 能跟其他狀態 （focus、tap）整合，而且 whileTap 順便讓鍵盤跟觸控也有反饋。 單純色變不用 motion 也行，但加進其他動畫就要 motion。

2. x 偏移 + 文字底線會錯位：如果連結有底線，x: 4 會讓底線跟文字 一起跑，視覺像「字飄走」。解法：底線用 background-image 不要用 text-decoration，這樣不會跟 transform 一起動。

相關效果

• F07 Hover Lift — 卡片版本的 hover 反饋