Build Lab
Web Grok Build · templates & craft
Back to catalog
Creative / VisualIntermediate · A few systems to tune#45

Fluid ripples

Touch the water; watch ripples spread

Snapshot

2D wave/ripple sim responding to pointer.

What this template is for

Satisfying micro-interaction for heroes and playful UIs.

Best when you need

  • Landing micro-interactions
  • Water brand moments
  • Kids sensory pages
  • Shader learning demos

Usually includes

  • Ripple propagation
  • Pointer impulses
  • Damping controls
  • Color/refraction stylization
  • Canvas/WebGL render

Iteration ideas

Ask for these next in the same Build chat — one or two per turn.

  • Rain mode
  • Floating objects
  • Metaball merge
  • Mobile multi-touch

Who it serves

Designers, creative devs

Prompt seed

Paste into web Grok Build, then refine.

Build a "Fluid ripples" using the Grok Build template as the base.
Goal: Touch the water; watch ripples spread
Primary use case: Landing micro-interactions
Requirements: polished UI, mobile-first, working preview in one shot.
Tone: modern, restrained, production-demo quality — not a wireframe.

New to the loop? Learn web Build walks chat → preview → iterate → publish, using templates like this as practice ships.