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