fig. 05 pen oNNzGvv

Waving Rainbow Text

Each letter’s font size rides a sine wave shifted −1.5 per letter while the hue sweeps across the word and glows.

original “Waving rainbow text” codepen.io/izmaelmag/pen/oNNzGvv ↗

● running
up to 4 words, one per row

§1 About

No canvas at all: every letter is a span whose font-size is recomputed each frame. Because the letters sit on a flex baseline, changing sizes pushes their neighbours around, and the wave travels through the layout itself.

The −1.5 frequency divides the letter index, so the phase steps back by 2/3 rad per letter and the crest rolls left to right along the word; the hue steps 20° per letter and drifts with time.

§2 Maths

size
px = ⌊sin(φ + t / 360 + i / −1.5) · (120 − 80) + 120⌋ → 80 … 160
word phase
φ = 180 + rand · 180
colour
hsl(t / 3 + 20i, 50%, 50%), glow 0 0 12px

§3 Adaptation

  • Letters are rendered as text by Svelte, never through innerHTML; the phrase is editable and stays plain text.
  • Every size is multiplied by k, fitted to the stage width and the longest word, so “CONQUERS” fits a 320 px screen.
  • A fixed 60 Hz clock replaces the rAF timestamp, so pausing resumes the wave where it stopped.