THE NEXT GEN SLIDER
Mirror Media Slider is a GLSL + Three.js powered media slider built for modern interactive UI. It combines flowmap-driven distortion, ribbon twirl bending, trails, and real-time reflections into smooth, responsive transitions — with optional lightbox support for images, video, and audio.
Trusted by
50.000+ CLIENTS
FWDesign has been creating and innovating since 2000 — over 25 years of pushing the boundaries of what's possible in the browser. With more than 50,000 licenses sold, we've established ourselves as one of the leading creative agencies in the industry.
Created by Elite Author
Trusted by thousands. Built with passion. As an Envato Elite Author, we create standout digital products that push boundaries and set trends.
Powered by Three.js
Powered by Three.js and custom GLSL, Mirror Media Slider renders in real time for silky-smooth motion. Flowmap-driven distortion adds a natural, fluid feel that reacts to the mouse and motion.
Revolution Lightbox Support
Optional Revolution Lightbox integration with deep linking and a full media experience. Supports images plus popular video/audio sources like MP4/MP3, YouTube/Vimeo, HLS/DASH streams, and more, with features like subtitles, thumbnails preview, and Chromecast support.
Other Features
Responsive Layout
Fully responsive and adaptable regardless of which device is used.
Desktop & Mobile Optimized
Mirror Media Slider adapts to any screen size on mobile or desktop, with smooth dragging and GPU-accelerated rendering.
Lazy Scrolling/Loading
Optional: initialize the slider only when it becomes visible on scroll, ideal for long pages and off-screen sections.
Customizable Size
Set any width/height and place the slider anywhere in your page or app. Item plane width/height is configurable too.
Items Ratio
Adjust the item aspect ratio to fit any media format—portrait, landscape, or anything in between, example here.
Infinite Loop
Optional infinite loop for seamless navigation through the entire set of items, or use it non infinite.
Preloader
Optional animated preloader with customizable color.
Bending
Realistic item bending with adjustable bend strength and curvature for a true filmstrip feel.
Gap & Spacing
Control the spacing between items to match your layout, from compact to airy compositions.
Snap
Optional: automatically snap the closest item to the center after dragging.
Scroll Speed Strength
Customizable scroll speed—fine-tune responsiveness to match your preferred interaction feel.
Default & Scroll Curvature
Adjust curvature at rest and while scrolling to get the exact depth and motion you want.
Twirl
Optional twirl motion with controllable strength and start point for extra character during interaction, example here.
Reflections
Optional reflections with adjustable size and opacity to add depth and polish.
Mask Gradient
Optional mask gradient to soften edges and blend the slider naturally into the background.
Black And White
Optional: desaturate non-centered items for an editorial look and stronger focus, example here.
Opacity Strength
Optional: set custom opacity for non-centered items to guide attention.
Noise Distortion
Optional noise distortion and grain with adjustable size, fade, blur strength, and fade color, example here.
Flowmap Distortion
Flowmap-driven mouse distortion that feels fluid and organic. Tune strength, radius, sensitivity, force, and falloff, with optional RGB shift for extra punch, example here.
RGB Shift
Optional RGB shift with adjustable amount and strength for subtle chromatic separation.
Liquid Distortion
Optional liquid distortion based on scroll speed for an organic, fluid feel, example here.
Post Processing
Optional post-processing with waves, noise, and mouse effects. Includes anti-aliasing support for a crisp, clean look.
Built-In Debug GUI
Optional settings panel to tweak key parameters live while building your ideal motion and distortion feel.
Lightbox Ready
Optional Revolution Lightbox with deep linking, keyboard controls, and a full media experience—ideal for portfolios and product showcases, example here.
