Vertical Lens Slider

Vertical Lens Slider

A vertical image slider with a WebGL-powered lens distortion effect. Slides warp and bulge in response to scroll speed and direction, then settle smoothly when scrolling stops. Built with Three.js for a fluid, tactile feel that goes beyond a standard carousel.

Features:

• Infinite vertical loop with seamless wraparound, no jump cuts at the start or end

• Randomized masonry-style slide heights for a natural, editorial layout

• Lens warp effect driven by scroll velocity, adjustable strength or fully disabled

• Multi-input support: mouse wheel, click-drag, and touch swipe, all with momentum

• Keyboard navigation (arrow keys) with visible focus ring for accessibility

• Optional overlay showing slide name and index counter

• Automatically pauses rendering when off-screen to save performance

• Recovers gracefully from WebGL context loss

• Static fallback layout for the Framer canvas editor and exports, matching the live version exactly

• Fully responsive images with alt text support

Customization:

• Add unlimited slides, each with its own name and image

• Adjust text color, overlay padding, and font

• Control lens distortion strength from subtle to dramatic