← All motion patterns
Ripple on press
SubscriptionA circle blooming from the exact point of contact and fading as it grows.
The wave is sized to twice the host's longest edge and positioned so its centre lands on the pointer, which is what makes the bloom read as originating at the finger rather than at the button. It is spawned on pointerdown rather than click, so the feedback arrives before the action resolves — the whole point of a press ripple. The element takes its colour from currentColor, so it inherits whatever tint the host already has instead of imposing one, and removes itself on animationend so no nodes accumulate.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
See plans