Fade Scale

效果簡述

比 Fade Up 多一層「從中心長出來」的質感。0.94 → 1 的微縮放讓元素感覺 是「展開」而不是「滑入」，更適合卡片、圖片、icon 的進場。

Claude Code Prompt

參考：A002 fade scale
技術：Framer Motion 的 whileInView

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

限制：
- scale 不要低於 0.9，會顯得「縮太小先藏起來」
- 不要搭 y 偏移（會跟縮放打架，看起來不乾淨）
- 配色 token: text-foreground

完整程式碼

'use client'

import { motion } from 'framer-motion'

export function FadeScale() {
return (
  <motion.div
    initial={{ opacity: 0, scale: 0.94 }}
    whileInView={{ opacity: 1, scale: 1 }}
    viewport={{ once: true, amount: 0.4 }}
    transition={{ duration: 0.55, ease: [0.4, 0, 0.2, 1] }}
  >
    從中心輕輕長出來
  </motion.div>
)
}

何時用

• ✅ Pricing 卡片進場
• ✅ Modal / Dialog 出現（搭 opacity 跟背景遮罩）
• ✅ 圖片、頭像、icon 等「方塊狀」元素

何時別用

• ❌ 大段文字（縮放看起來在「呼吸」很怪）
• ❌ 一頁多卡片同時用（要配 stagger 不然每個都跳）
• ❌ 已經有 hover scale 的元素（進場 + hover 都動會視覺打架）

我踩過的坑

1. scale 0.8 進場太誇張：以前覺得縮放幅度大才有戲，實際效果像 元素是「砸下來」。0.94 才剛好。

2. transformOrigin 要顧到：Framer Motion 預設 origin 是中心， 但若用 <motion.div className="origin-top"> 之類覆寫了 origin， 進場會變很怪。記得讓進場保持中心 origin。

相關效果

• F01 Fade Up — 不縮放的純位移版本
• F03 Line Stagger Reveal — 多元素版本