Text Wave
テキストウェーブ
Animate
どんな動き？
見出しなどのテキストを1文字ずつ分割し、それぞれに少しずつ時間差をつけて上下に揺れさせ続けるループアニメーション。anime.jsの定番デモとして広く知られており、文字が波打つように連なって動く様子が軽快で遊び心のある印象を与える。ロゴやローディング表示、ちょっとした遊び心を加えたい見出しなどで使われることが多い。
よく使う場所
ロゴ見出しローディング表示遊び心のあるUI
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Split the text into characters and make each one bob up and down continuously, offset in sequence to form a wave.Trigger:
Load (starts automatically and loops continuously).
Initial state:
Text split into individual characters, each at translateY: 0.
Animation:
Each character moves up and back down in a smooth loop, with its start time offset slightly from the previous character, creating a traveling wave across the word.
Final state:
Loops continuously; no fixed end state.
Timing:
duration: 1.2s per character cycle
stagger delay: ~0.08s between characters
easing: ease-in-out
iteration: infinite実装方法の候補
この動きは以下の技術で実装できます。
anime.jsGSAPCSS
別名・関連ワード
Wavy TextBouncing LettersText Bounce Loop