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
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
