Ripple Distortion
An image that ripples like water under the cursor. An SVG filter, so any image works, cross origin included.
import { RippleDistortion } from "pleate/effects/ripple-distortion";Water
Move the pointer over the photo.
Props
- src
Image URL.
string- alt
Description of the image.
string- strength
How far pixels get pushed (px).
numberdefault 28- radius
Ripple radius (px).
numberdefault 140
Accessibility
- A plain img with its alt text.
- Touch and reduced motion show the still image.