Distortion Slider

The Distortion Slider is a premium WebGL slider for Framer — a fully customizable, performance-optimized component built on custom Three.js shaders.

Transform static galleries into immersive, award-winning experiences. Distortion Slider is a premium WebGL image and video slider for Framer, built with custom Three.js shaders for real-time 3D bend, warp, and distortion effects. Made for standout portfolios, creative agencies, design studios, photographers, and premium digital products, it turns ordinary media into an interactive experience. With a refined aesthetic, this Framer component combines smooth 60fps animation, responsive interactions, and precision-tuned easing across desktop, tablet, and mobile. Key Features Dual WebGL Shader Modes: Choose "Cylinder" for a sleek horizontal paper-roll bend with crisp edges, or "Bubble" for a dynamic 4-pin center bulge — two visual styles. Cinematic Reveal Animation: A precisely sequenced, fully customizable fade-and-unbend entrance creates a polished first impression on every load. Smart Media Engine: Supports images and looping video with built-in hysteresis that automatically pauses and resumes clips by active slide, reducing memory and CPU usage. Fluid Interaction Design: Touch, drag, and scroll controls combine with elastic rubber-band snapping for satisfying navigation. Interactive Numeric Timeline: A scroll-synced timeline provides quick-jump navigation with smooth transitions. Total Design Control: Adjust curve depth, bend frequency, slide dimensions, typography, spacing, and timeline styling directly from Framer's native property panel. Built for Production: Clean React and TypeScript code uses ResizeObserver for accurate WebGL canvas scaling and reliable performance at any screen size. 🚀 Who Is Distortion Slider For? Creative Agencies & Design Studios Freelance Designers & Photographers Framer Designers & No-Code Creators SaaS, E-commerce & Premium Brands Make your portfolio or website impossible to ignore with a high-end WebGL gallery experience. Add Distortion Slider to your Framer project today for every project.

Premium WebGL Distortion Slider