Distortion Slider

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.