Fade Up

效果簡述

最基本的進場：元素從下方 24 像素淡入到原位。每個站幾乎都有它的影子， 是「不知道要做什麼動畫就先放這個」的安全選擇。

Claude Code Prompt

參考：A001 fade up
技術：Framer Motion 的 whileInView

具體行為：
- initial: { opacity: 0, y: 24 }
- whileInView: { opacity: 1, y: 0 }
- transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
- viewport: { once: true, amount: 0.4 }

限制：
- 不要把 y 設超過 40，會讓元素「飛太遠」顯廉價
- 不要在同一頁的每個區塊都用，會膩
- 配色 token: text-foreground

完整程式碼

'use client'

import { motion } from 'framer-motion'

export function FadeUp() {
return (
  <motion.div
    initial={{ opacity: 0, y: 24 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, amount: 0.4 }}
    transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
  >
    幫人做好用的網站
  </motion.div>
)
}

何時用

• ✅ Hero 區塊的副標題、按鈕進場
• ✅ 章節分隔處的第一個元素
• ✅ 滾到 footer / CTA 區的最後一句話

何時別用

• ❌ Header / Navigation（會晚於頁面內容出現，看起來像 bug）
• ❌ 同一頁所有區塊都用（重複會膩，動畫該分主次）
• ❌ DNA #002 純粹極簡（連這個都是過動）

我踩過的坑

1. viewport once 不加會煩死人：預設每次進入視口都重播，使用者 在長頁來回滾動時，同一段內容會一直閃。解法：viewport={{ once: true }}。

2. y 值太大會掉漆：早期試過 y: 60，畫面看起來像「文字砸下來」， 不是進場是入侵。30 以下比較自然，24 是甜蜜點。

3. duration 0.3 太快、1.0 太慢：太快人眼來不及，太慢覺得卡頓。 0.5-0.7 之間最舒服。

相關效果

• F02 Fade Scale — 加上微縮放的進階版本
• F03 Line Stagger Reveal — 多行文字依序進場