THE NEXT GEN SLIDER
Spherical Flow Slider is a Three.js powered 3D slider designed for smooth, drag‑driven interaction with configurable sensitivity and snap easing. It supports parallax, an optional hand‑cursor helper with on‑screen guidance, and built‑in GUI controls for live tweaking. Captions are rendered using MSDF fonts with adjustable bend strength, spacing, offsets, and colors, and navigation buttons can be enabled with custom styling. A modern post‑processing stack adds wave deformation and flowmap‑based effects for a fluid, cinematic feel.
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
Spherical Flow 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
I’ve thought of everything to make your life easier, from clean structure to flexible options, Spherical Flow Slider is built for effortless customization—so you can focus on creativity, not complexity.
Other Features
Responsive Auto-Scale
Auto-scales to fit your layout with configurable start width and max size limits (up to 1920×1080).
Full HD Canvas Limits
Designed to look sharp at large sizes with configurable max width/height and consistent scaling across devices.
Drag Navigation
Smooth drag-driven interaction with adjustable sensitivity. Wheel navigation can be enabled/disabled per setup.
Snap Easing
Configurable snap easing strength for a smooth, polished feel when the slider settles on an item.
Parallax Depth
Built-in parallax adds depth and motion to the scene for a more immersive 3D experience.
Hand Cursor Helper
Optional hand-cursor helper with configurable color, radius, delays, and auto-hide after a set number of interactions.
Center Mesh Controls
Fine-tune the center plane and layout using rotation radius plus width/height ratios for the center content.
MSDF Text Rendering
Crisp, scalable captions using MSDF fonts (JSON font data) for clean typography at any resolution.
Bent Typography Controls
Adjust bend strength, font scale, spacing, offsets, and letter spacing for a distinctive curved caption style.
Centered Current Title
Option to center the current caption for a cleaner composition and consistent alignment.
Navigation Buttons
Optional navigation buttons with configurable offset, scale, and separate normal/active color styling.
Theme & Color Styling
Control background and UI styling, plus caption and counter colors for consistent branding.
Wave Deformation
Subtle wave motion with tunable frequency and amplitude for organic, premium animation.
Flowmap Effects
Flowmap-based distortion with configurable strength, radius, sensitivity, force, and falloff for fluid interaction.
Built-in GUI
Optional GUI panel for live tweaking and quick iteration during development.
Optional Stats Overlay
Stats can be enabled for performance monitoring during development and profiling.
HTML-Driven Slides
Define slider items directly in HTML via the slider data container for fast, code-free content updates.
Image & Video Items
Mix image thumbnails and video sources in the same carousel for rich, varied presentations.
Per-Item Links
Each slide can define its own link URL and target for click-through experiences.
Per-Item Text Styling
Define per-slide text and counter colors to match each item’s media and branding.
Flexible Embedding
Place the slider into any page container using parent ID and display type options.
Caption Layout Controls
Fine-tune vertical gaps, offsets, and scaling for intro and current captions to fit any design.
Touch Friendly
Optimized for touch and drag interaction on mobile and tablet, with consistent feel across devices.
Wheel Control
Wheel navigation can be disabled/enabled to keep normal page scrolling untouched, example here.
Custom Help Text
Configure the on-screen helper message to guide users (“hold and drag”, etc.) for better UX.
Detailed Documentation
Clear setup steps, configuration reference, and examples to help you integrate and customize quickly, JavaScript Documentation or WordPress Documentation.
Support & Updates
Direct support from the developer and continuous improvements to keep the slider future-proof.
