ThreeJS Curved Distortion Slider
What it does
An infinite horizontal Three.js image slider built from textured PlaneGeometry meshes whose vertices bend into a radial curve as you scroll or drag. Wheel, touch and arrow-key input feed velocity-tracked position and distortion factors that are lerped every frame, so faster flicks warp the slides more and the whole strip wraps seamlessly.
How it's built
| Category | slider |
|---|---|
| Tech | three |
| Complexity | page |
| 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.
# Three.js Infinite Curved-Distortion Slider — Velocity-Reactive Vertex Warp
## Goal
Build a **full-viewport, infinitely looping horizontal image slider rendered entirely in Three.js**. Ten textured planes drift left/right in 3D space, driven by mouse wheel, touch drag, or arrow keys. The star effect: as the strip moves, the planes **bend toward the camera in a radial bulge centered on the middle of the screen** — a curved-screen distortion whose intensity is proportional to scroll velocity. Fast flicks warp the slides dramatically; when motion settles, the planes relax back to perfectly flat. The strip wraps seamlessly, so you can scroll forever in either direction. Everything is lerped every frame — position, per-slide easing, and the distortion factor itself — so the whole thing feels weighty and fluid, never snappy.
## Tech
Vanilla HTML/CSS/JS with ES module imports. **`three` (npm) only — no GSAP, no smooth-scroll library.** The entire engine is a hand-rolled `requestAnimationFrame` loop with linear interpolation and a velocity tracker. `import * as THREE from "three";`
## Layout / HTML
```
nav (fixed top strip — two small labels)
p "[ Silhouette ]"
p "/ Experiment by Silhouette"
footer (fixed bottom strip — two small labels)
p "Infinite WebGL Slider"
…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.