Liquid Ripple Distortion text animation: the word aimotions animated in this style
008ReactiveWebGL

Liquid Ripple Distortion

Water ripple text effect: the word lies on the tiled floor of a sunny pool, and the cursor drags a wake through the water that refracts the letters. Clicks drop concentric ripples. Ideal as an interactive, animated website hero title.

Prompt · replace [TEXT]

Tool-agnostic
Lay [TEXT] in deep-blue mosaic tiles on the pale aqua tiled floor of a sunny swimming pool, seen straight from above through clear water. A soft network of bright caustic light lines shimmers across the floor, and a gentle swell keeps the letters slowly wavering at rest while a lazy wake drifts across the surface. On hover the pointer drags a strong V-shaped wake through the water; holding still makes small concentric rings. Each press drops a heavy droplet that sends big rings out, bouncing off the pool edges and interfering. The waves refract the floor, bending letters and grout lines, with crisp white sun glints on the crests. Ripples fade within a few seconds so [TEXT] is always readable again. On touch screens the wake follows the finger.

Visual DNA

  • Word laid in deep-blue mosaic tiles on a pale aqua pool floor
  • Real wave simulation: wakes, rings, interference and reflections off the edges
  • Refraction bends the letters and grout lines under every ripple
  • Shimmering caustic light network and sharp sun glints on wave crests
  • Gentle ambient swell at rest; strong wake and splashes on hover and press
Category
Reactive Styles
Demo built with
WebGL
Energy
Calm
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Liquid Ripple Distortion look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

009ReactiveCSS

Magnetic Letters

magnetic text effect · magnetic hover · cursor attraction text · spring letters

Details →
019InkCanvas

Charcoal Lift-Out

charcoal drawing animation · smudged charcoal text · subtractive drawing · eraser drawing

Details →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥