← All effects

Wavy Text

TextVanilla JS · zero dependenciesOne transform per letter
-- fps
prefers-reduced-motion detected — text shown still

X-ray · layers

letters ride a sine curve
each letter tilts with the slope
a rainbow rides the same wave

Parameters

Your text 
Wave height12 px
Speed1.0×
Wavelength5 letters
Tilt10°
your version · updates as you tinker

How this effect works

The text is split into letters, and each letter becomes its own little element that can move independently. Every frame each letter asks one question: where am I on the wave right now? The answer is a single sine call — sin(time × speed + index / wavelength) — where index is the letter's position in the string. Because neighbouring letters plug in neighbouring indices, they land on neighbouring points of the same curve, and the string reads as one flowing wave rather than letters bouncing at random.

The other two layers reuse the same wave for free. Rocking tilts each letter by the cosine of that phase — cosine is the slope of sine, so every letter leans exactly the way its bit of hill is leaning, like boats on a swell. Colour phase maps the phase onto a hue instead of a position, so the rainbow travels along the string at the same speed as the bump. One wave, three readings of it.

Production notes: respects prefers-reduced-motion (still text) · one transform per letter per frame — cheap for headline-length text, don't run it on paragraphs · your text goes in via textContent, never raw HTML · the copied snippet is self-contained HTML + CSS + JS.