DocsRipple 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

Dependencies: framer-motion clsx tailwind-merge

Usage

API Reference

PropTypeDefault
imagesreadonly string[]

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

nature images
durationnumber

Transition duration in seconds.

1.4
easeEasing

Framer Motion easing curve for the transition progress.

"easeInOut"
autoPlayboolean

Automatically trigger image transitions.

false
autoPlayIntervalnumber

Delay between automatic transitions in milliseconds.

3200
autoPlayOrigin"center" | "random"

Ripple origin used for autoplay transitions.

"center"
waveSpeednumber

Speed of the expanding wavefront.

1.6
sigmanumber

Thickness of the primary ripple band.

0.15
waveFreqnumber

Frequency of the smaller concentric ripple lines.

5
pushAmtnumber

Radial displacement strength applied by the wave.

0.145
caStrengthnumber

Chromatic aberration amount near the ripple edge.

0.02
glownumber

Brightness lift along the wavefront.

0.73
noiseWarpnumber

Organic noise applied to the transition boundary.

1
pinchboolean

Adds a subtle inward pull at the ripple origin.

false
borderRadiusnumber

Root border radius in pixels.

24
classNamestring

Additional classes for the root container.

—

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
PreviousPixel Image TrailNextASCII Effect
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
/>