Text Reveal
テキストリベール
Text Reveal
どんな動き？
見出しなどのテキストを、はみ出した部分を隠すマスク（overflow: hidden）の中に入れ、下から上へスライドさせながら表示するアニメーション。文字自体はフェードせずくっきり動くため、しっかりと印象に残る見出しの登場演出として使われる。
よく使う場所
見出しキャッチコピーセクションタイトル
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Reveal the heading by sliding it up out of a mask, like a curtain lifting off the text.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
Text wrapped in an overflow: hidden container.
Text: translateY: 110% (hidden below the mask).
Animation:
Text slides upward into view within the fixed mask boundary.
Final state:
Text: translateY: 0 (fully visible).
Timing:
duration: 0.7s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSS (overflow: hidden + transform)GSAPIntersection Observer
別名・関連ワード
Text Mask RevealHeading Reveal