Mirror Media Slider

Mirror Media Slider is a GLSL + Three.js powered media slider designed for modern interactive UI. It delivers smooth, drag-driven navigation with snap-to-center behavior, configurable spacing, curvature, bending, and optional twirl motion for a cinematic filmstrip feel. A full post‑processing stack adds waves, noise, RGB shift, and flowmap‑driven distortion that reacts to mouse movement and scroll speed, while trails and real‑time reflections enhance depth and polish. The slider is fully responsive, supports custom sizes and aspect ratios, and can be initialized on visibility for performance. Content is defined via HTML data, with support for images, video, audio, and per-item links. Optional Revolution Lightbox integration adds deep linking and a complete media viewing experience, making it ideal for portfolios, product showcases, and immersive storytelling.

3 Likes

I would appreciate it if I could get some insight into performance. I have an RTX 5070 performance is really good, but a friend on its latptop the browser freeze. I am not sure about the GPU.

Looks really polished. The reflections and flowmap distortion give it a lot of depth and the ribbon bending effect makes the slider feel more dynamic than typical ones.

About the laptop freezing, it could be a few things. Flowmaps, post processing passes, reflections, and high resolution textures can stack up pretty quickly, especially on integrated GPUs. You might want to try lowering the render resolution, reducing texture sizes, or disabling some effects like trails or reflections to see which one is the main hit.

It could also help to check the GPU info with WebGL debug or log the renderer capabilities so you know if the device is running on integrated graphics.

1 Like