Distortion Slider
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
ResizeObserverfor flawless canvas scaling without pixelation or distortion.
Refund Policy
Because this is a digital product, all sales are considered final.
Once you complete your purchase, you will get instant access to the Framer code component. Please make sure to review the live preview before buying. If you have any questions, feel free to reach out before you commit!
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.