← All effects
Ripple Click
click anywhere in the box
-- fps
prefers-reduced-motion detected — ripples appear without animation
X-ray · layers
the expanding circle line
fading disc inside the ring
extra rings follow the first
Parameters
Duration0.9 s
Max radius180 px
Ring width2 px
Waves2
your version · updates as you tinker
How this effect works
Each click stores three numbers: where and when it happened. Every frame, each ripple computes its progress — time since the click divided by DURATION — and that single 0-to-1 number drives everything: the radius grows with it, the opacity fades with it. Once progress passes 1, the ripple deletes itself.
The growth uses an ease-out curve (fast at first, slowing at the end) because that's how real waves in water behave — energy spends itself. The multi-wave layer just draws the same ripple again with a small time offset, like echoes. The soft fill is a radial gradient inside the ring that sells the "impact" feeling.
Production notes: respects prefers-reduced-motion (a brief static ring instead of animation) · cost is per active ripple, and ripples live under a second — effectively free · classic use: buttons, cards, full-screen click feedback · the copied snippet is self-contained HTML + JS.