Curved Ribbon Slider
A full-bleed WebGL slider driven by the scroll wheel. A distortion field sits in the middle of the container and bends whatever scrolls through it: the panel at the front stays flat and sharp while the ones either side curl away and smear into a spectrum, mirrored on both sides.
About This Effect
A full-bleed slider rendered in WebGL and driven by the scroll wheel. The distortion is a field anchored to the container rather than an animation applied to each panel: it sits in the space, and whatever scrolls through it is bent by it. The panel in the middle is always flat and always sharp; toward either edge the surface curls away, tapers to a point and smears into a spectrum, the two sides mirroring each other.
Read the full effect overview
Scroll and the whole ribbon squashes like jelly in the direction of travel, the colour separation throwing wider the faster you go, before it eases to a stop and snaps the nearest panel square. Two-finger trackpad swipes, dragging and arrow keys all drive the same motion.
It is three.js and about a hundred lines of GLSL, not a library of sliders. It loops forever from any number of images, cover-fits whatever aspect you give it, and falls back to a plain scroll-snap rail without JavaScript, without WebGL, or under reduced motion.
What's Included
- The distortion is a field fixed to the container, not an animation on each panel, so it stays put and augments whatever passes through it
- Mirrored by construction: the two ends of the ribbon are reflections of each other rather than two copies of the same curl
- The middle of the field is mathematically untouched, so the panel being read is flat and sharp no matter what the rest of the ribbon is doing
- A real spectral smear, not a red and blue offset: twelve taps across the image, each weighted by a different band of the spectrum, concentrated where the surface is turning
- Scroll-velocity jelly, bowing the ribbon in the direction of travel so a fast scroll has visible weight
- Frame-rate independent: the easing and the velocity are both computed against real elapsed time, so it behaves identically at 30, 60 and 120Hz
- Infinite looping from a fixed pool of meshes that are re-textured rather than cloned, so eight images and eighty cost the same
- Renders only while on screen, and disposes every geometry, material, texture and the WebGL context itself on teardown
Perfect For
- Agency and studio landing pages that need one signature above-the-fold moment
- Photography and print portfolios where the imagery is the entire pitch
- Case-study and project indexes where each entry deserves the whole viewport
- Product and collection showcases built around one hero image at a time
- Launch and award-entry pages that want a interaction people will remember
How It Works
The ribbon is a flat row of textured planes under an orthographic camera, so one world unit is one CSS pixel and there is no perspective at all. Every curve is vertex displacement, and every term in it is a function of where a vertex sits ON SCREEN rather than of which panel it belongs to. That is what makes the distortion a field: it stays in the container and bends whatever scrolls through it, instead of travelling along with a panel and leaving a gap wherever a panel's folding edge has left the viewport.
Past a clean central band the surface bends at constant curvature, so arc length becomes sin(theta) across and 1-cos(theta) perpendicular, and once the turn reaches its ceiling the remainder carries straight on along the tangent. Without that second phase the mapping saturates and panels a full pitch apart pile up on the same pixels. Mirroring is a single sign term, so the two ends are reflections rather than repeats.
The fragment shader samples the image twelve times along a horizontal offset, weighting each tap by a different band of a cosine spectrum. At zero offset the taps collapse back to the original pixel, so the flat middle takes a single sample on a fast branch and stays sharp. The wheel feeds a target position chased with a time-based exponential ease, and frame-to-frame travel is normalised into panel widths per sixty-hertz frame and handed to the shaders as the scroll speed.