文字エフェクト · 文字の動き方
波打つ文字波浪文字
- 軽快
- 連続
- リズム
各文字が位相をずらした正弦波で上下し、1 つの波が文字を伝わります。ポインタを近づけると振幅が増します。
使いどころ
短く軽い、ひと目で読み終わる文に向きます。セールの一言、空の状態、読み込み中の挨拶などです。長い段落やフォームのラベルには使わないでください。動き続ける行は読むのが疲れます。位相差を 0 にしないでください。行全体が一緒に跳ね、「波」ではなく「バウンド」に見えます。長くとどまる画面では静止させてください。
パラメータ
sin(ωt − 0.46i) · amplitude 5→11px · 22% tilt · 160ms proximity ease
レシピ
波打つ文字 → 160ms波打つ文字 → sin(ωt − 0.46i) · amplitude 5→11px · 22% tilt · 160ms proximity ease
AI に渡す一文
波打つ文字を作ってください。1 文字ずつ span に分け、sin(ωt から 0.46 かける i を引いた値) で上下させます。位相差は 0.46 で固定します（0 だと行全体が一緒に跳ねます）。さらに振幅に比例した軽い回転（約 22%）を重ねます。requestAnimationFrame で毎フレーム、タイムスタンプから計算してください。文字ごとの CSS アニメーションでは位相関係を保証できません。基本の振幅は 5px、ポインタが行の上にある間は 11px まで広げ、約 160ms の一次遅れで移行し、離れたら戻します。