Ripple Click

Material Design popularized the ripple effect: a circular highlight that expands outward from the tap point. The key is capturing the exact click coordinates relative to the button and using AnimatePresence to manage multiple overlapping ripples.

#Step 1: Click position

Capture e.clientX - rect.left and e.clientY - rect.top to get the click position relative to the button. Display a dot at that position to verify accuracy.

Loading...

#Step 2: Animated ripple

Spawn a motion.span at the click position that scales from 0 to 14 while fading from 0.5 to 0. AnimatePresence handles mount/unmount. The transform: "translate(-50%, -50%)" centers the ripple on the exact click point regardless of the ripple's size.

Loading...

#Step 3: Multiple ripples and cleanup

Click rapidly to spawn overlapping ripples. crypto.randomUUID() ensures stable keys for AnimatePresence. A setTimeout removes each ripple after 600ms, matching the animation duration, to prevent memory leaks from accumulated elements.

Loading...

#Configuration

Tune the ripple effect.

Loading...