Motion & texture

Ripple Effect

Q: How do I implement a Ripple Effect?

Add a ripple on pointerdown: append a span at actual pointer coordinates (not center), scale from 0 until it covers the clipped button, fade out, then remove the node. Keep iOS-style screens on opacity/scale press instead if matching platform conventions.

A circular wave that expands from the press point—visual proof the tap registered.

Also known as material ripple · ink splash · touch wave

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Ripple Effect".

Add a ripple on pointerdown: append a span at actual pointer coordinates (not center), scale from 0 until it covers the clipped button, fade out, then remove the node. Keep iOS-style screens on opacity/scale press instead if matching platform conventions.

Anatomy:
- origin: Must be the real pointer coordinates, not the element center.
- ripple circle: Scales from 0 until it covers the control while fading out.
- pressed state: Ripple is one form of press feedback; iOS prefers dim or scale.

Preferred API / pattern: `MUI Button ripple / custom pointerdown ink`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Ripple always from center
○Avoid: Nodes never removed
○Avoid: Ripple without overflow hidden
○Avoid: Using ripple as the only feedback with no pressed style for keyboard a

In plain wordsHow people search for it

“that Android water-circle that spreads out when I tap a button”“a circle expanding from exactly where my finger landed”“the little halo that blooms when I click”

AnatomyOpen for part names

origin: Must be the real pointer coordinates, not the element center.
ripple circle: Scales from 0 until it covers the control while fading out.
pressed state: Ripple is one form of press feedback; iOS prefers dim or scale.

How to write itOpen for stack patterns

Web (HTML/CSS)JS span at pointer coords + scale keyframes

React + Tailwind + shadcn/uiMUI Button ripple / custom pointerdown ink

SwiftUIno Material ripple—use opacity/scale press states

Ant Designwave effect on Button (Material-inspired)

Notes

Material’s signature “I heard your tap.” It has an accent: native on Android, almost never on iOS (dim/scale instead). Forcing ripples everywhere makes an iOS app feel Android-ish. Implementation: overflow hidden, origin from event coords, remove the node when the animation ends. Rapid taps each get their own wave—don’t cancel siblings mid-flight.

Common mistakesHumans and models trip here

Ripple always from center: tap the corner, wave starts mid-button—fake.
Nodes never removed: a hundred leftover spans after a hundred taps.
Ripple without overflow hidden: the wave paints outside the button.
Using ripple as the only feedback with no pressed style for keyboard activation.

More failure symptoms on AI broke it.

Related patterns

Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.

Spotted a wrong name or missing pattern?

Message on X