F15▸A004▸framer-motion

Char Reveal

字符逐個出現

難度 ★★★★★標籤文字 · 進場 · stagger3 min read

效果簡述

逐字進場——比 Line Stagger 更細的精緻感，但只適合英文跟少量字。中文字符獨立性質不同，逐字進場會像「碎片散落」，請改用 F03 Line Stagger。

▸ 預設|由下進場 + stagger 0.04

Claude Code Prompt

💬 Claude Code Prompt

參考：A004 char reveal
技術：Framer Motion variants + 拆字符

具體行為:
- Array.from(text) 拆成字符（英文用，中文不建議）
- 每個字符 motion.span，display: inline-block
- 空白要換成 \u00A0（不換行空白），不然 stagger 後空白會消失
- staggerChildren: 0.04（比 line stagger 更密）
- 每個字符 duration: 0.4

限制：
- 純英文 + 短文字（< 30 字符）
- 中文一律改用 line stagger（F03）
- 加 aria-label 給螢幕閱讀器讀完整字串

完整程式碼

CharReveal.tsx

'use client'

import { motion } from 'framer-motion'

const text = 'Visual Effects Lab'

export function CharReveal() {
const chars = Array.from(text)

return (
  <motion.h2
    aria-label={text}
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true, amount: 0.4 }}
    variants={{ visible: { transition: { staggerChildren: 0.04 } } }}
  >
    {chars.map((c, i) => (
      <motion.span
        key={i}
        aria-hidden
        variants={{
          hidden: { opacity: 0, y: 16 },
          visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.4, ease: [0.4, 0, 0.2, 1] },
          },
        }}
        style={{ display: 'inline-block' }}
      >
        {c === ' ' ? '\u00A0' : c}
      </motion.span>
    ))}
  </motion.h2>
)
}

何時用

✅ 英文 Hero 標題（< 30 字符）
✅ Logo 文字進場
✅ 案例 / 作品名稱

何時別用

❌ 中文標題（用 F03 Line Stagger）
❌ 長文字（30 字以上會等到不耐煩）
❌ 內文段落

我踩過的坑

中文 char stagger 看起來像錯字：跟 F03 一樣的坑，記住中文的字單位是「詞」或「行」，不是字符。逐字出現視覺像「字一個一個蹦出來」很卡通。
空白消失問題：拆字符後空白 ' ' 不會 stagger 進來，因為 display: inline-block 加在 span 上，空白沒寬度。解法：把空白換成 \u00A0（不換行空白），它有實際寬度。
a11y 要顧：螢幕閱讀器讀逐字 span 會逐字念「V-i-s-u-a-l」。父層加 aria-label="Visual"，子 span 加 aria-hidden。

效果簡述

Visual Effects Lab

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋