Mirror Media Slider
About Mirror Media 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.
Main features
Responsive Layout – Fully responsive and adaptable regardless of which device is used.
Desktop & Mobile Optimized – Smooth dragging and GPU-accelerated rendering on all major browsers and devices.
Lazy Scrolling/Loading – Optional initialization when visible for long pages and off-screen sections.
Customizable Size – Set any width/height and place the slider anywhere in your layout.
Items Ratio – Adjust item aspect ratio for portrait, landscape, or custom formats, example here.
Infinite Loop – Seamless navigation through all items with optional infinite mode, or use it non infinite.
Preloader – Optional animated preloader with customizable color.
Bending – Realistic item bending with adjustable strength and curvature for a filmstrip feel.
Gap & Spacing – Control spacing between items from compact to airy compositions.
Snap – Optional snap-to-center behavior after dragging.
Scroll Speed Strength – Tune responsiveness to match your preferred interaction feel.
Default & Scroll Curvature – Adjust curvature at rest and while scrolling for the exact depth you want.
Twirl – Optional twirl motion with controllable strength and start point, example here.
Reflections – Adjustable reflection size and opacity for depth and polish.
Mask Gradient – Optional mask gradient to soften edges and blend into the background.
Black And White – Optional desaturation for non-centered items to focus attention, example here.
Opacity Strength – Set custom opacity for non-centered items.
Noise Distortion – Optional noise distortion and grain with adjustable size, fade, blur, and color, example here.
Flowmap Distortion – Flowmap-driven mouse distortion with configurable strength, radius, sensitivity, force, and falloff, example here.
RGB Shift – Optional RGB shift with adjustable amount and strength.
Liquid Distortion – Optional liquid distortion based on scroll speed for an organic feel, example here.
Post Processing – Optional post-processing with waves, noise, mouse effects, and antialiasing.
Built-in Debug GUI – Optional settings panel for live tweaking during development.
Lightbox Ready – Optional Revolution Lightbox integration with deep linking and full media experience, example here.
Detailed Documentation – Clear setup steps, configuration reference, and examples: JavaScript Documentation or WordPress Documentation.
Support & Updates – Direct support and continuous improvements to keep the slider future-proof.
