Ripple Displacement Slider
What it does
Fullscreen Three.js WebGL slider where a click anywhere fires a radial ripple (custom GLSL shader, GSAP-tweened progress over ~3s) that displaces UVs and crossfades to the next image along the expanding wave front. SplitText simultaneously staggers the masked title chars and description lines out (y:-100%) and animates the incoming slide's text in, all overlaid with mix-blend-mode: difference.
How it's built
| Category | slider |
|---|---|
| Tech | gsap, three |
| GSAP plugins | SplitText |
| Complexity | section |
| Performance cost | heavy |
| Mobile-safe | desktop-first |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Ripple Displacement Slider (WebGL radial-wave crossfade on click)
## Goal
Build a full-screen slider that shows one large, boxed image at a time with an editorial title on
the left and a short description on the right. The image is not a DOM `<img>` — it is rendered onto
a **Three.js shader plane**. **Clicking anywhere on the slider fires a radial ripple**: a custom
GLSL wave expands from the center of the image outward, **displacing the UVs** along its front
(the pixels ripple like water) and **crossfading to the next slide's texture** right behind the
advancing wave, with a subtle brightness boost riding the crest. That ripple is a single
**GSAP tween of one shader uniform** (`uProgress`, 0 → maxCornerDistance over ~3s, `power2.out`).
Simultaneously, **SplitText** slides the current slide's title characters and description lines
**out** (`y: -100%`) and, once they clear, builds the next slide and slides its text **in**
(`y: 100%` → `0%`). The overlaid text uses `mix-blend-mode: difference`, so the white type inverts
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.