THE NEXT GEN SLIDER
Linear 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
Linear 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
We’ve thought of everything to make your life easier, from clean structure to flexible options, Linear Slider is built for effortless customization—so you can focus on creativity, not complexity.
Other 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 only when it becomes visible on scroll, preventing initialization if it's in an off-screen section. Linear Slider will load when the user scrolls to the section containing it.
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.
Customizable Size
The slider size (width and height) can be set to any dimensions you need, and the Linear Slider can be added anywhere within your page content.
Parallax
Optional parallax scrolling effect.
Preloader
Optional animated preloader.
Two Bending Vertices Type
The central distortion can has two type, semicircular arc bending or rotation bending.
Caption
Optional captions for slider items, fully customizable with your own CSS styling.
Opacity Strength
Adjustable opacity effect for slider items when not selected or non dragged.
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
Intro fluid effect, example here.
Post Processing
Various post-processing effects included—mouse ripple, fluid distortion, grid effect, afterimage, bulge, and more.
