Animated Gradient

效果簡述

線性漸層的 background-position 無限循環，看起來像顏色在「流動」。 背景區塊、Hero 區、CTA 按鈕都很合用。零 transform、純色彩，效能很便宜。

Claude Code Prompt

參考：B003 animated gradient
技術：Framer Motion 動 backgroundPosition

具體行為:
- backgroundImage: 'linear-gradient(90deg, color1, color2, color3, color1)'
- backgroundSize: '300% 300%'（關鍵！讓 position 有空間移動）
- animate: { backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'] }
- transition: { duration: 8, ease: 'linear', repeat: Infinity }

限制：
- 4 個顏色色站，首尾同色才能無縫銜接
- duration 不要短於 6s（太快會像跑馬燈，不像「流動」）
- 配色用品牌色 + 鄰近色相，跨大色相會看起來像彩虹

完整程式碼

'use client'

import { motion } from 'framer-motion'

export function AnimatedGradient() {
return (
  <motion.div
    animate={{
      backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],
    }}
    transition={{ duration: 8, ease: 'linear', repeat: Infinity }}
    style={{
      backgroundImage:
        'linear-gradient(90deg, #c2410c, #f59e0b, #ef4444, #c2410c)',
      backgroundSize: '300% 300%',
    }}
    className="h-32 rounded-lg"
  />
)
}

何時用

• ✅ Hero 區的背景裝飾
• ✅ CTA 按鈕（突顯重要動作）
• ✅ Loading / 等待狀態的背景

何時別用

• ❌ 內文卡片的背景（會搶閱讀焦點）
• ❌ 已經有複雜內容的區塊（疊太多）
• ❌ 暗色主題用淺色漸層（對比過強看不清字）

我踩過的坑

1. 首尾顏色一定要一樣：keyframes 從 0% 跳回 100% 時，若顏色不同 會看到「彈一下」。陣列首尾用同一個顏色才能無縫。

2. backgroundSize 200% 還是 300%：200% 動起來來回幅度大但很「快」， 300% 比較慢比較優雅。看設計感受選，但別小於 200%。

3. prefers-reduced-motion 一定要顧：無限動畫對動暈使用者很 不友善。用 useReducedMotion hook，true 時就 animate={{}}。

相關效果

• F20 Marquee — 另一個無限循環動畫