Slider

Cielrose Inspired ThreeJS Slider

by Vanguardia · motionprompts.dev

A wheel-driven WebGL image slider built with Three.js: scrolling drives a custom shader that vertically wipes between the current and next texture while a distortion/scale uniform bends and swells the plane, then a smooth lerp snaps to the nearest image and slides the project title back into view. Animation is hand-rolled in a requestAnimationFrame loop plus CSS transitions (no GSAP).

Type: Web motion
Framework: Three.js
Trigger: wheel
Duration: 0.3–0.5s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Complexity: 5/5
Pinned: no
Reduced motion: not handled
Libraries: three

wheel/touch-driven double-lerped WebGL vertical UV wipe with sine vertex bulge, ±0.1 plane scale and round-to-nearest snap

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev25,153 chars

# Three.js Wheel-Driven Shader Slider

## Goal
Build a full-viewport **WebGL image slider driven by the mouse wheel**. A single 16:9 plane floats in the center…

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.