Line Reveal
ラインリベール
どんな動き？
段落の各行をそれぞれマスクで隠しておき、1行ずつ時間差でスライドインさせるアニメーション。text-revealの複数行版にあたり、文章全体が順番に組み上がっていくような印象を与える。リード文やリストなど、まとまった文章量を見せたい場面に向いている。
よく使う場所
リード文本文リスト引用文
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Reveal each line of a paragraph one after another by sliding it up out of a mask.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
Each line wrapped in its own overflow: hidden container.
Each line: translateY: 120% (hidden below its mask).
Animation:
Lines slide upward into view one after another, offset by a stagger delay.
Final state:
Each line: translateY: 0 (fully visible).
Timing:
duration: 0.6s per line
stagger delay: 0.15s between lines
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSS (overflow: hidden + transform)GSAPIntersection Observer
別名・関連ワード
Line By Line RevealParagraph Reveal