ThreeJS Infinite Slider

How it works

This slider is a single column of images that never ends. Scroll, drag or swipe and the photos travel vertically through a dark WebGL field, and while they move the whole column bends into a soft curved sheet, bulging towards you when you scroll one way and away from you when you scroll the other. A title on the left and a counter on the right always name the image closest to the centre.

Everything is drawn by Three.js. There are no DOM images, no GSAP and no scroll library: each photo is a textured plane, and the motion is one hand-written animation loop.

The infinite column

Each plane gets a slightly different height, and the planes are stacked head to toe into one tall column with a small gap between them. The page itself does not scroll. Wheel, mouse drag and touch all write into a virtual scroll position, and the rendered position eases towards it, so the motion always glides rather than jumps. When you release a drag or a swipe, the remaining speed becomes momentum that keeps pushing the column and fades out under friction, which gives the slider its weight. To loop, every plane's position is wrapped around the length of the column: a frame that leaves the top reappears at the bottom, so a handful of meshes are enough for an endless strip in both directions.

The velocity bend

The curve is not a shader. Every plane is subdivided into a fine grid of vertices, and on each frame the code moves those vertices along the depth axis. The amount follows a smooth hump that is strongest at the centre of the screen and fades to nothing towards the edges, so the images curve as they pass through the middle. Its size comes from how fast the column is moving, and its sign from the direction, which is why the sheet curls one way going down and the other way going up.

Where the difficulty is

Making the bend feel right is mostly about the speed signal. Raw frame-to-frame velocity is noisy, so the slider keeps a short rolling average and a slowly decaying peak, detects when you are decelerating, and lets the curvature relax faster then. Direction changes are smoothed too, so reversing the scroll eases the sheet through flat instead of snapping it inside out. Getting those reactions balanced is what separates a ripple that feels physical from one that jitters.

Performance and mobile

Bending vertices on the CPU means rewriting every vertex of every visible plane and recomputing normals each frame. With a small number of planes that is cheap, but it grows with the grid density, so keep the subdivision moderate. The same scene runs on phones, driven by touch swipes with their own momentum, and because the page never scrolls natively, this component wants a full screen of its own rather than a slot in a long page.