Elevate your website’s first impression with the Liquid Distortion WebGL Slider. This isn't just another carousel; it’s a high-performance visual experience that uses custom shaders to create organic, ripple-like transitions between your images. Designed for creators who want that "award-winning agency" look without writing a single line of shader code.
Immersive Liquid Transitions: Powered by WebGL for ultra-smooth, high-frame-rate distortion effects that react to your slides.
Dual Interaction Modes: Choose between intuitive Drag/Swipe gestures or classic Navigation Arrows (with Keyboard support).
Extensive Customization: Control everything from the ripple scale and distortion strength to the animation speed directly from the Framer sidebar.
Performance First: Built-in useInView optimization ensures the WebGL canvas only runs when visible, keeping your site fast and efficient.
Visual Controls: Supports up to 12 custom images with 'Cover' or 'Contain' modes.
Shader Tuning: Adjust Distortion Strength, Ripple Scale, and Ripple Speed for a unique look.
Smart Autoplay: Includes "Pause on Hover" and customizable delays (800ms to 12s).
Fully Responsive: Automatically adapts to any screen size with optimized Device Pixel Ratio.
Adaptive UI: Optional pagination dots, navigation arrows, and customizable border radius.
Accessibility & Fallback: ARIA-ready, keyboard accessible, and includes a 2D crossfade fallback for older browsers.
Drop the component into your Hero section.
Upload your images (up to 12) in the Property Panel.
Tweak the WebGL settings to find your perfect "ripple" style.
Publish to give your visitors a premium, interactive experience.
Refund Policy:
Due to the digital nature of this product, all sales are final and non-refundable once the remix link has been accessed. If you encounter any technical issues, please contact me at agungmahesay@gmail.com
Agung M
