A WebGL image ripple component powered by React Three Fiber. Cursor movement paints displacement waves that refract image cards in real time.
Brush Asset Note: This component works without any extra file using its built-in radial brush. If you setbrushTextureUrl="/brush.png", then your project must include that file underpublic/brush.png.
| Prop | Type | Default |
|---|---|---|
imagesImage descriptors. Each item accepts src, x, y, widthScale and heightScale. | RippleImageItem[] | gradient demo images |
brushTextureUrlBrush texture used for displacement stamps. | string | generated radial brush |
distortionStrengthHow strongly waves distort sampled image UVs. | number | 0.075 |
waveCountPool size for simultaneous ripple waves. | number | 100 |
waveSizeBase wave stamp plane size. | number | 48 |
waveRotationSpeedPer-frame rotation speed of each visible wave. | number | 0.025 |
waveFadeMultiplierOpacity multiplier applied per frame (lower fades faster). | number | 0.95 |
waveGrowthHow fast each wave expands while fading. | number | 0.155 |
waveSpawnThresholdMinimum pointer delta required to spawn a new ripple. | number | 0.1 |
classNameAdditional classes for the root container. | string | — |
childrenOptional overlay content rendered above the canvas. | ReactNode | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { ImageRippleEffect } from "@/components/ui/image-ripple-effect"
const images = [
{ src: "/images/picture.jpg", x: 0, y: 0, widthScale: 0.34, heightScale: 0.42 },
]
<ImageRippleEffect
images={images}
/>