Blur to Clear

效果簡述

標題從模糊淡入清晰，帶有一種「鏡頭對焦」的高級感。Apple、Linear、 Vercel 的官網都愛用。一行 framer 就解決，但要注意 filter 動畫的效能。

Claude Code Prompt

參考：A008 blur to clear
技術：framer-motion filter property

具體行為:
- motion.div initial={ filter: 'blur(12px)', opacity: 0 }
- whileInView={ filter: 'blur(0px)', opacity: 1 }
- viewport={ once: true, amount: 0.4 }
- transition duration 0.9 ease [0.4,0,0.2,1]

限制：
- blur 是 GPU 比較重的 filter，一頁不要太多
- 模糊量 8~14px，過頭看不出字
- 別用在 link / button hover（每次都重做很煩）

完整程式碼

'use client'

import { motion } from 'framer-motion'

export function BlurToClear() {
return (
  <motion.h2
    initial={{ filter: 'blur(12px)', opacity: 0 }}
    whileInView={{ filter: 'blur(0px)', opacity: 1 }}
    viewport={{ once: true, amount: 0.4 }}
    transition={{ duration: 0.9, ease: [0.4, 0, 0.2, 1] }}
    className="text-3xl font-medium"
  >
    從模糊到清晰
  </motion.h2>
)
}

何時用

• ✅ 章節大標進場
• ✅ Hero KV 文字
• ✅ 配合 fade 用，提升質感

何時別用

• ❌ 一頁套很多次（GPU 會喘）
• ❌ 內文（讀者只覺得這頁載入有問題）
• ❌ 已用其他重特效的區塊

我踩過的坑

1. filter 動畫吃 GPU：手機尤其要小心，一頁超過 5 個 blur 動畫 會卡。改用 fade-up 替代部分。

2. once: true 不寫會重播：上下滾動每次都模糊一次，體感變差。

3. 同時 transform 父層會出怪事：parent 有 transform，blur 會 被裁切。把動畫做在獨立 wrapper 上。

相關效果

• F01 Fade Up — 比較輕量的進場
• F15 Char Reveal — 字符版