G10▸A107▸gsap

Text Mask Reveal

文字遮罩上推

難度 ★★★★★標籤文字 · mask · overflow2 min read

效果簡述

文字像「從遮罩底下被推出來」一樣出現。原理是 overflow: hidden 父層

子層 yPercent: 100 → 0。極簡又有質感，作品集 hero 通用配方。

設計與工程

在這裡會合

做出能用的好東西

▸ 預設|由下推出, stagger 0.08

Claude Code Prompt

💬 Claude Code Prompt

參考：A107 text mask reveal
技術：overflow-hidden + yPercent tween + stagger

具體行為:
- 每行用一個 .line div：overflow-hidden，內含 .inner 文字
- gsap.from('.inner', { yPercent: 110, duration: 0.9, ease: 'power3.out', stagger: 0.12 })
- yPercent: 110 比 100 多一點，避免字底下露出

限制：
- 行高要足夠（line-height 1.1 ~ 1.3）
- 字級小時 stagger 加快（0.08）
- 不要超過 3~4 行

完整程式碼

TextMaskReveal.tsx

'use client'

import gsap from 'gsap'
import { useEffect, useRef } from 'react'

const lines = ['Design.', 'Engineer.', 'Ship.']

export function TextMaskReveal() {
const root = useRef<HTMLDivElement>(null)

useEffect(() => {
  const ctx = gsap.context(() => {
    gsap.from('.inner', {
      yPercent: 110,
      duration: 0.9,
      ease: 'power3.out',
      stagger: 0.12,
    })
  }, root)
  return () => ctx.revert()
}, [])

return (
  <div ref={root}>
    {lines.map((l, i) => (
      <div key={i} className="overflow-hidden">
        <div className="inner text-4xl font-medium">{l}</div>
      </div>
    ))}
  </div>
)
}

何時用

✅ Hero 主標 + 副標
✅ Brand statement
✅ Modal opener

何時別用

❌ 內文段落（讀者要的是直接看見）
❌ 多行（5+）逐行 mask 會拖
❌ 字級 < 16px（mask 看不出來）

我踩過的坑

行高太緊字底切掉：父層 line-height 1.1 以下，字的下緣會被 overflow-hidden 切。給 1.2 ~ 1.3 比較穩。
yPercent: 100 還是露頭：字本身有 ascender / descender，用 110 ~ 120 才確保完全藏住。
inline-block 才接受 yPercent：如果是 inline 元素，yPercent 無效。用 div / inline-block 包裹。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋