Linear Slider

What is Linear Slider

Fluid Slider is a unique slider component built with GLSL and Three.js. It harnesses the power of shaders to create a circular distortion effect that responds dynamically to drag speed, with multiple post-processing effects like grid distortion, fluid distortion, mouse ripple effect, and more, glitch distortion, along with several other interactive and visual features.

Main features

Responsive Layout – Fully responsive and adaptable regardless of which device is used.

Desktop & Mobile Optimized – Linear Slider will adapt to any screen size and any device, wheater you are using a mobile phone (IOS, Iphone, Android) or on your desktop browser.

Lazy Scrolling/Loading – Option to initialize Linear Slider on scroll when the slider is visible in the page, this way for example if the slider is in a section that is not visible it will not be initialized, instead Linear Slider will be initialized only when the user will scroll to the section in which the slider is added.

Customizable Size – OS can be set to any width or height and placed anywhere on your page or app. Additionally, items size and ratio can be set as needed.

Multiple Display Types – The slider can be displayed using a responsive layout or an “afterparent” mode, which allows it to adapt based on the size of the parent element.

Preloader – Optional animated preloader.

Parallax – Optional parallax scrolling effect.

Caption – Optional caption. The caption can be styled with CSS to match your visual design.

Customizable Item Scale And Gap -The minimum and maximum scale of items, as well as the gap between them, can be set.

Mouse Rotation – Optional mouse slight animated rotation effect based on the mouse position.

Item Noise Animation – Optional item noise animation, the items will add a flag like customizable animation, example here.

Scroll Speed Strength – Adjustable drag speed for smooth, responsive slider control with the mouse.

Scroll Scale Strength – Adjustable scroll scale strength to control how items scale during scrolling

Distortion Curve – Adjustable item distortion curve as the slider is dragged, example here.

Fluid Post-Processing effect – Various post-processing effects included—mouse ripple, fluid distortion, grid effect, afterimage, bulge, and more.