Docs·Image Ripple Effect

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

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

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

View source

Click the icon in the preview panel to browse source for each variant.

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