Vertical Lens Slider

Vertical Lens Slider A vertical image slider with a WebGL-powered lens distortion effect.

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

infinite slider with lens warp