Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { RippleDisplacementSlider } from "@/registry/tween/ripple-displacement-slider"
export function RippleDisplacementSliderDemo() {
return <RippleDisplacementSlider />
}
import { RippleDisplacementSlider } from "@/components/ui/ripple-displacement-slider"<RippleDisplacementSlider
slides={[
{
title: "The Fog Shift",
description: "…",
image:
"https://images.unsplash.com/photo-1662915975682-7853edba44d3?q=80&w=1600&h=1000&fit=crop&crop=center&auto=format",
},
{
title: "Signal Blue",
description: "…",
image:
"https://images.unsplash.com/photo-1607979035674-71b74fd41552?q=80&w=1600&h=1000&fit=crop&crop=center&auto=format",
},
]}
/>Clicking the slider advances it. A Three.js fragment shader tracks a ripple radius tweened from the center outward: pixels just behind the wavefront are displaced along a decaying sine, given a brightness boost, and crossfaded from the current texture to the next within a thin band — so the new slide is "pushed" into view by the wave. The title is split into characters and the description into masked lines (via SplitText); they slide up and out on click and slide back in once the next slide is committed mid-ripple. The overlay uses mix-blend-difference so the text stays legible over any image.
The renderer sizes to the component via a ResizeObserver, click handling is scoped to the component (never the window), and prefers-reduced-motion: reduce swaps slides instantly with no ripple or text animation.
| Prop | Type | Default | Description |
|---|---|---|---|
slides | RippleSlide[] | 4 defaults | Each slide is { title, description, image, alt? }. |
background | string | "#0d0d0d" | Outer container background. |
duration | number | 2.6 | Seconds for the ripple to cross the screen. |
waveFreq | number | 25 | Ripple oscillation frequency. |
wavePow | number | 0.035 | Ripple displacement amplitude. |
className | string | — | Extra classes on the outer container. |