About Spherical Flow 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.

Main 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.

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, JavaScript Documentation or WordPress Documentation.

Support & Updates – Direct support from the developer and continuous improvements to keep the slider future‑proof.