F03▸A005▸framer-motion

Line Stagger Reveal

文字一行行進場

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

效果簡述

文字以「行」為單位，從下方依序滑入。比逐字進場更流暢，效能更好。最適合 Hero 標題（2-4 行）跟章節標題。

幫人做好用的網站

以及省時間的

自動化工具

▸ 預設|stagger 0.08s, y=16

Claude Code Prompt

💬 Claude Code Prompt

參考：A005 line stagger reveal
技術：Framer Motion + variants

具體行為:
- 父層 motion.div 用 variants={{ visible: { transition: { staggerChildren: 0.1 } } }}
- 每行 motion.p initial: { opacity: 0, y: 24 }
- whileInView: { opacity: 1, y: 0 }
- duration: 0.6
- ease: [0.4, 0, 0.2, 1]
- viewport: { once: true, amount: 0.4 }

限制：
- 中文用 line 不要用 char（字符不是單字會碎掉）
- staggerChildren 0.08 ~ 0.12 之間
- 超過 4 行就考慮拆段，不要讓使用者等太久

完整程式碼

LineStaggerReveal.tsx

'use client'

import { motion } from 'framer-motion'

const lines = ['幫人做好用的網站', '以及省時間的', '自動化工具']

export function LineStaggerReveal() {
return (
  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true, amount: 0.4 }}
    variants={{ visible: { transition: { staggerChildren: 0.1 } } }}
  >
    {lines.map((line, i) => (
      <motion.p
        key={i}
        variants={{
          hidden: { opacity: 0, y: 24 },
          visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
          },
        }}
      >
        {line}
      </motion.p>
    ))}
  </motion.div>
)
}

何時用

✅ Hero 標題（2-4 行最佳）
✅ 章節標題
✅ 列表項目標題（多項時）

何時別用

❌ 內文段落（會打斷閱讀）
❌ DNA #002 純粹極簡（過動）
❌ 中文標題超過 20 字（太碎）
❌ 同一頁多處用（同樣動畫重複會膩）

我踩過的坑

中文用 char stagger 會很怪：中文字符是獨立單元，逐字進場視覺像散落的碎片。解法：一律用 line 為單位，或最多用 word（但中文沒空格，要靠標點切）。
viewport once 必須加：預設每次進入視口都重播，使用者滾上滾下會煩死。解法：viewport={{ once: true }}。
staggerChildren 太慢顯廉價：超過 0.15s 整體節奏會拖。建議 0.08-0.12s 之間。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋