Distortion Slider

Turn ordinary galleries into award-winning, interactive experiences. The Distortion Slider is a premium WebGL slider for Framer — a fully customizable, performance-optimized component built on custom Three.js shaders. It brings real-time 3D bend and distortion effects to your images and videos, making it the go-to Framer plugin for elite portfolios, creative agency sites, and high-end digital products.

Crafted with a minimal, modern aesthetic, this Framer component delivers buttery-smooth 60fps animation and precision-tuned easing curves for a flawless experience on any device.

Key Features

• Dual WebGL Shader Modes: Switch between "Cylinder" (a sleek horizontal paper-roll bend with crisp, flat edges) and "Bubble" (a dynamic 4-pin center bulge) for instant visual variety.

• Cinematic Reveal Animation: A precisely sequenced, fully customizable fade-and-unbend entrance that fires flawlessly on every load.

• Smart Media Engine: Native support for images and looping video, with built-in hysteresis logic that auto-pauses and resumes clips based on the active slide — keeping performance and memory usage tight.

• Fluid Interaction Design: Responsive touch, drag, and scroll controls with elastic rubber-band snapping that feels genuinely satisfying to use.

• Interactive Numeric Timeline: A minimal, scroll-synced timeline with quick-jump navigation and smoothly eased transitions.

• Total Design Control: Fine-tune curve depth, bend frequency, slide dimensions, typography, and timeline styling — all from the native Framer property panel.

• Built for Production: Clean, error-free React and TypeScript code using ResizeObserver for pixel-perfect canvas scaling at any screen size.

🚀 Who's the Distortion Slider Built For?

• Creative Agencies & Design Studios

• Freelance Designers & Photographers

• SaaS & E-commerce Brands

• Framer Enthusiasts & No-Code Builders

Turn your static gallery into an award-winning WebGL experience — try the Distortion Slider today.