Image Ripple Effect

A WebGL image ripple component powered by React Three Fiber. Cursor movement paints displacement waves that refract image cards in real time.

Installation

pnpm dlx shadcn@latest add @componentry/image-ripple-effect

Dependencies: three @types/three @react-three/fiber @react-three/drei clsx tailwind-merge

Usage

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.

Download brush.png

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}
/>

API Reference

Prop	Type	Default
`images`	`RippleImageItem[]` Image descriptors. Each item accepts src, x, y, widthScale and heightScale.	`gradient demo images`
`brushTextureUrl`	`string` Brush texture used for displacement stamps.	`generated radial brush`
`distortionStrength`	`number` How strongly waves distort sampled image UVs.	`0.075`
`waveCount`	`number` Pool size for simultaneous ripple waves.	`100`
`waveSize`	`number` Base wave stamp plane size.	`48`
`waveRotationSpeed`	`number` Per-frame rotation speed of each visible wave.	`0.025`
`waveFadeMultiplier`	`number` Opacity multiplier applied per frame (lower fades faster).	`0.95`
`waveGrowth`	`number` How fast each wave expands while fading.	`0.155`
`waveSpawnThreshold`	`number` Minimum pointer delta required to spawn a new ripple.	`0.1`
`className`	`string` Additional classes for the root container.	—
`children`	`ReactNode` Optional overlay content rendered above the canvas.	—

Working with this component

Choose the image source

Use images hosted by your app or a server that allows cross-origin texture loading. A URL opening in a browser tab does not by itself prove it can be loaded as a WebGL texture.

Fit the canvas

Give the effect a visible container with a defined size. If the image does not appear, check the image request, browser console, and graphics support before adjusting ripple settings.

Keep the image useful

Treat the ripple as a visual enhancement. Keep important descriptions and navigation in ordinary HTML, and verify the interaction on the touch devices your audience uses.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

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} />

Prop

Type

Default

images

RippleImageItem[]

Image descriptors. Each item accepts src, x, y, widthScale and heightScale.

gradient demo images

brushTextureUrl

string

Brush texture used for displacement stamps.

generated radial brush

distortionStrength

number

How strongly waves distort sampled image UVs.

0.075

waveCount

number

Pool size for simultaneous ripple waves.

100

waveSize

number

Base wave stamp plane size.

48

waveRotationSpeed

number

Per-frame rotation speed of each visible wave.

0.025

waveFadeMultiplier

number

Opacity multiplier applied per frame (lower fades faster).

0.95

waveGrowth

number

How fast each wave expands while fading.

0.155

waveSpawnThreshold

number

Minimum pointer delta required to spawn a new ripple.

0.1

className

string

Additional classes for the root container.

—

children

ReactNode

Optional overlay content rendered above the canvas.

—