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.