Docs·Ripple Transition

Ripple Transition

A WebGL image transition that sends a noisy refractive wave across nature photos, with chromatic edges, glow, pinch, autoplay, and click-triggered origins.

Installation

pnpm dlx shadcn@latest add @componentry/ripple-transition

Usage

API Reference

PropertyTypeDefault
images

Image URLs to transition through. Use at least two for swaps.

readonly string[]nature images
duration

Transition duration in seconds.

number1.4
ease

Framer Motion easing curve for the transition progress.

Easing"easeInOut"
autoPlay

Automatically trigger image transitions.

booleanfalse
autoPlayInterval

Delay between automatic transitions in milliseconds.

number3200
autoPlayOrigin

Ripple origin used for autoplay transitions.

"center" | "random""center"
waveSpeed

Speed of the expanding wavefront.

number1.6
sigma

Thickness of the primary ripple band.

number0.15
waveFreq

Frequency of the smaller concentric ripple lines.

number5
pushAmt

Radial displacement strength applied by the wave.

number0.145
caStrength

Chromatic aberration amount near the ripple edge.

number0.02
glow

Brightness lift along the wavefront.

number0.73
noiseWarp

Organic noise applied to the transition boundary.

number1
pinch

Adds a subtle inward pull at the ripple origin.

booleanfalse
borderRadius

Root border radius in pixels.

number24
className

Additional classes for the root container.

string—

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
import { RippleTransition } from "@/components/ui/ripple-transition"
const images = [
  "https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&q=85&w=1800",
  "https://images.unsplash.com/photo-1473773508845-188df298d2d1?auto=format&fit=crop&q=85&w=1800",
  "https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&q=85&w=1800",
]

<RippleTransition
  images={images}
  className="h-[520px] w-full"
  autoPlay
  autoPlayInterval={3200}
  autoPlayOrigin="random"
  duration={1.4}
  pinch
/>