Transform your static galleries into interactive, award-winning experiences. The Distortion Slider is a highly customizable, performance-optimized WebGL component built specifically for Framer. Powered by custom Three.js shaders, it introduces fluid 3D bending effects to your images and videos, making it the perfect centerpiece for elite portfolios, agency websites, and high-end digital products.
Designed with a minimal, modern aesthetic in mind, this component delivers silky-smooth 60fps performance and perfectly calibrated easing, ensuring a flawless user experience across all devices.
Key Features:
Dual WebGL Shaders: Toggle between "Cylinder" (a sleek, horizontal paper-roll effect with perfectly flat edges) and "Bubble" (a dynamic, 4-pin center bulge) distortion modes.
Silky-Smooth Reveal Animation: A carefully sequenced, customizable entrance fade and unbend effect that triggers flawlessly every time.
Smart Media Handling: Seamlessly supports both static images and looping videos. Built-in hysteresis logic intelligently pauses and plays videos based on the active slide to optimize browser memory and performance.
Advanced Interactions: Fully responsive touch, drag, and scroll controls with highly satisfying, elastic rubber-band snapping.
Interactive Timeline: A dynamic, minimal numeric timeline that tracks scroll progress and allows for quick-jump navigation with perfectly eased transitions.
Ultimate Customization: Take complete control over curve depth, bend frequency, slide sizing, typography, and timeline aesthetics directly within the Framer property panel.
Production Ready: Built with clean, error-free React and TypeScript, utilizing ResizeObserver for flawless canvas scaling without pixelation or distortion.
Imesh Dilshan
