Text Effects · How the words move
Wave text波浪文字
- breezy
- continuous
- rhythmic
Every character rides a sine wave with a shifted phase, so one wave travels along the line. Bringing the pointer near raises the amplitude — it is the line breathing, not characters hopping.
When to use it
For short, light copy read in one glance: a promo line, an empty state, a greeting on a loading screen. Avoid it for paragraphs and form labels — a line that never stops moving is tiring to read. And never set the phase offset to zero: the whole line then hops together, which reads as bounce rather than a wave. On screens people stay on, let it settle to rest.
Parameters
sin(ωt − 0.46i) · amplitude 5→11px · 22% tilt · 160ms proximity ease
Recipe
Wave text → 160msWave text → sin(ωt − 0.46i) · amplitude 5→11px · 22% tilt · 160ms proximity ease
One sentence for your AI
Build a line of wave text: split it into one span per character and float each on sin(ωt minus 0.46 times i) with a fixed 0.46 phase offset (at zero the whole line hops together), plus a slight rotation proportional to the amplitude (about 22%). Drive it from requestAnimationFrame using the timestamp rather than per-character CSS animations, which cannot guarantee the phase relationship. Base amplitude 5px, growing to 11px while the pointer is over the line, eased with a first-order follow of roughly 160ms and released on the way out.