A high-performance 3D slider built on a spring-based scroll engine. Three visual presets, velocity-driven motion blur, per-breakpoint controls, and full keyboard and screen-reader accessibility. Drop into any Framer project in seconds.
Live preview: https://long-grammar-959814.framer.app/
Distortion — slides scale with scroll velocity for cinematic, reactive motion.
Carousel — classic orbital arc with 3D depth falloff.
Cards — tilted stack with optional random rotation for an organic feel.
Powered by spring physics over native wheel, touch, and keyboard input. All motion is GPU-accelerated, with zero layout shifts. Motion blur scales with scroll velocity (opt-in).
Content — up to 20 slides with per-slide aspect ratio and offset.
Responsive — custom Tablet and Mobile breakpoints, with min/max width clamps.
Layout, Effect, Animation — independent Desktop, Tablet and Mobile values for slide height, gap, radius, intensity, card rotation, response speed, smoothness and scroll sensitivity.
Motion Blur — optional, velocity-driven, per-breakpoint intensity.
Scroll Behavior — capture scroll with configurable release cycles.
Auto Scroll — optional loop with speed, direction and pause-on-hover.
Tilt on Hover — optional subtle mouse-follow tilt per slide.
Accessibility — customizable ARIA label.
Mouse wheel with velocity-driven spring response.
Touch & drag with native passive listeners for smooth mobile.
Keyboard — Arrow keys advance / reverse, Home resets.
Visible focus outline.
Built on React 18 and Framer Motion.
All transforms GPU-accelerated. Zero layout shifts.
Off-screen: component pauses scroll capture and auto-scroll.
BuiltByKern
