Skip to content
motionprompts motionprompts

Cielrose Inspired ThreeJS Slider

WebGL animation component · Published 2026-07-21 · by vanguardia.dev

Open live demo ↗ Download source

What it does

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).

How it's built

Categoryslider
Techthree
Complexitypage
Performance costheavy
Mobile-safedesktop-first

three.js webgl shader slider scroll chromatic distortion experimental gallery

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.

# 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 of the screen over a soft grey-to-white gradient page. Scrolling wheels through an endless loop of 7 images: a custom fragment shader performs a **vertical filmstrip wipe** (the next image slides up from the bottom edge while the current one slides out the top), a vertex shader **bulges the plane toward the camera** proportionally to scroll velocity, and the whole plane **swells/shrinks slightly** with scroll intensity. When scrolling stops, a lerp **snaps to the nearest whole image** and the project title (clipped inside a 16px-tall mask) **slides back up into view** with the new slide's name. Everything is hand-rolled in a `requestAnimationFrame` loop plus one CSS transition — **no GSAP, no ScrollTrigger, no page scroll**.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`three` (npm) only**:
```js
import * as THREE from "three";
```
No GSAP, no Lenis. Structure the JS in three modules: `script.js` (main), `shaders.js` (exports `vertexShader` and `fragmentShader` GLSL strings), and `slides.js` (exports a `slides` array of `{ title, url, image }`).
## Layout / HTML
```html
<body>
…

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

New components in your inbox

One email a week, only when new components ship, each with its live demo and prompt.