Slider

Ripple Displacement Slider

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: Three.js
Trigger: click
Duration: 0.5–3s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Easing: power2
Complexity: 5/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, SplitText, three

click-fired radial displacement wave: a single uProgress uniform ramps 0 → maxCornerDist+0.5 on power2.out, and a sin(age*25) wave damped by exp(-age*10) rides the expanding ring, pushing UVs radially outward while a smoothstep crossfade (width 0.05) swaps textures behind it; SplitText masked char/line reveals run in counterpoint

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev31,390 chars

# 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 edit…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.