Water Ripple reveals your word through rings expanding across a surface. The text emerges as each ring passes over it, distorting as the water moves and settling once the surface calms.
What Water Ripple is good for
Water, swimming and marine content
Spa, wellness and mindfulness branding
Drinks and hydration product graphics
How this animation is built
The rings are SMIL-driven so their expansion stays independent of the text's own timing, and feTurbulence with feDisplacementMap bends the letterforms as each ring crosses them — genuine refraction rather than a scaling overlay. rp-in and rp-ring handle the reveal and the ring cycle respectively.
Tips for Water Ripple
Blues and teals read as water; the distortion works in any colour but the association does not.
It settles to near-stillness, so it holds well as a final frame.
Water Ripple questions
Does the distortion affect legibility?
Only while a ring is crossing the text. The surface calms as the animation completes, so the word is fully readable by the time it holds.
Related animation styles
Flaming Text — Flames lick upward from letters standing in white-hot fire
Burning Text — Charred letters engulfed in a roaring inferno of tall flames
Blue Fire — Ghostly blue flames rising off cool glowing letters
Smoke Wisp — Pale ghost letters that waver and drift apart like smoke
Molten Rune — Stone-carved letters flooding with molten gold as embers rise
Abyss Caustics — Underwater light ripples over pale type as bubbles rise