Organic Slider

What is Organic Slider

Organic Slider is a one-of-a-kind infinite slider built with GLSL and Three.js, harnessing the power of shaders to create a distortion effect that feels natural and organic

Main features

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

Desktop & Mobile Optimized – Organic 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 Organic 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 Organic 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.

Items Ratio – OS can seamlessly change the items aspect ratio, allowing you to display any formats (portrait, landscape and any variation).

Infinite Loop – Optional infinite loop and non-infinite loop.

Parallax – Optional parallax scrolling effect.

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

Opacity Strength – Adjustable opacity effect for slider items based on their distance from the center.

Snap – Optional snap to align the closest mesh to the center, or let the slider flow seamlessly.

Mouse Distortion – Optional mouse distortion adds a second layer of dynamic effects based on cursor movement.

Black And White – Optional: Desaturate non-centered items. Items outside the center will appear in black and white.

Scroll speed strength – Customizable scroll speed – Fine-tune the scroll speed to match your desired experience.

Scroll scale strength – Customizable scroll scale – Fine-tune the scroll scale to match your desired experience.

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