Touch Ripple
A ring of particles thrown out from the tap point, exactly one per tap.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Touch Ripple
*
* A ring of particles thrown out from wherever the surface was tapped —
* one per tap, no matter how fast the taps come.
*About this effect
Physical feedback for a surface worth touching — a reaction pad, a tile, a big confirm control. The particles are slowed by exponential drag rather than by a timer, which gives every one of them the same reach, so the ring arrives at a distance and stops instead of dissolving mid-flight; a tap that lands somewhere feels answered in a way a fading puff never does. It attaches to whichever positioned element it is dropped inside and listens there, so the canvas never takes the pointer, and it answers Enter and Space as well as taps when that parent is focusable. Only pointerdown is listened for, so a tap can never produce two ripples, and the animation loop stops itself once the last particle has gone.