Wave Text

【対象要素】
- 見出しやロゴタイプの短い単語に適用する

【演出内容】
- 各文字が順番に上下し、単語全体で波が流れているように見せ続ける

【品質要件】
- 文字ごとの遅延は0.1秒弱にして、波が滑らかにつながるようにする
- 上下の振幅は文字の高さの1/3程度に抑え、読めなくならないようにする
- ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる
- prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する

[Target]
- A short word in a heading or logotype

[Motion]
- Each letter bobs up and down in sequence so a wave travels through the word forever

[Quality]
- Delay per letter just under 0.1s for a smooth wave
- Cap the amplitude at about 1/3 of the letter height to stay readable
- Make the loop seamless: the end state must match the start state exactly
- With prefers-reduced-motion, stop the animation and show a static finished state