THE NEXT GEN SLIDER
Distorted Media Slider is a one-of-a-kind slider built with GLSL and Three.js, harnessing the power of shaders to create a distortion effect that feels natural and organic.
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
Distorted Media Slider is powered by Three.js, bringing together real-time 3D graphics and custom GLSL shaders to create a fluid, immersive scrolling experience.
Fully Customizable
Ive thought of everything to make your life easier, from clean structure to flexible options, Distorted Media Slider is built for effortless customization—so you can focus on creativity, not complexity.
Other Features
Responsive Setup
Built to scale cleanly across screen sizes while keeping the slider anchored inside its own layout area.
Auto Scale
Auto-scale behavior keeps the slider proportional across desktop and mobile breakpoints without extra layout work.
Lazy Scrolling/Loading
Option to initialize Distorted Media Slider only when it becomes visible on scroll, preventing initialization if it's in an off-screen section. Distorted Media Slider will load when the user scrolls to the section containing it.
Display Modes
Supports flexible integration through configurable display types, including parent-based layouts for tighter page composition.
Max Dimensions
Control the overall presentation with configurable max width, max height, and auto-scale start width values.
Parallax Motion
Enable parallax movement to add depth while keeping the core slider interaction intact.
GUI And Preloader
Includes built-in GUI support and a configurable preloader for a cleaner first-load experience.
Intro Animation
Use the intro option to reveal the slider with motion from the start, without relying on extra setup code.
Captions Support
Optional captions can be enabled per item and styled freely for titles, descriptions, and calls to action.
Infinite Looping
Keep navigation continuous with seamless infinite playback from one side of the slider to the other.
Background And Mask
Customize the slider background color and choose whether the mask gradient is visible or completely disabled.
Drag Friction
Adjust drag friction to decide how heavy or loose the slider feels once the user starts interacting.
Hand Cursor Helper
Guide users with a built-in hold-and-drag helper featuring custom text, colors, radius, delay, and repeat count.
Drag Speed
Control how quickly the slider reacts to user movement with a dedicated drag speed parameter.
Wave Distortion
Shape the wave effect through separate frequency and amplitude values for subtle or stronger motion.
Flowmap Distortion
Fine tune flowmap strength, radius, sensitivity, force, and falloff to control the fluid distortion response.
RGB Shift Controls
Use RGB shift and flowmap-based RGB shift values to add controlled chromatic separation during motion.
Noise Pass Controls
Optionally enable the noise layer and tune its size, fade, blur strength, and fade color for the final look.
