Elevate your Framer site with SpatialSlider, a premium, physics-driven 3D carousel designed for maximum visual impact. Built with Framer Motion, this component seamlessly blends Apple-style scroll tracking with buttery-smooth drag physics, creating an immersive spatial experience that makes your images pop.
Whether you are building a high-end photography portfolio, a product showcase, or an editorial landing page, SpatialSlider delivers a flawless, responsive 3D effect without writing a single line of code.
Dual Interaction Modes: Switch instantly between Scroll (scroll-linked sticky track) and Drag (free horizontal swiping with advanced momentum physics).
True Spatial Depth: Cards naturally scale up, push forward, and pull into focus as they reach the center, gracefully fading into the background at the edges.
Cinematic Typography: Smart, threshold-based text animations smoothly crossfade your slide titles exactly when the incoming card takes focus.
Bulletproof Responsiveness: Advanced math decouples the zoom effect from the screen width, guaranteeing perfect gaps and zero overlapping on everything from mobile devices to ultrawide 4K monitors.
Zero-Code Customization: Full integration with Framer's native UI panel. Tweak card sizes, gap spacing, typography, colors, and even drag elasticity right from the properties menu.
Getting SpatialSlider running on your Framer canvas takes less than a minute:
Add to Canvas: Copy the component link from checkout and paste it directly into your Framer canvas.
Set Width (Recommended): Make sure to set the width to Fill for the best responsive layout.
Set the Scroll Track (Crucial for Scroll Mode): If using "Scroll" interaction, select the component on your canvas, change its Height to Viewport (vh), and set it to a larger number (e.g., 300vh). This gives the page enough room to scroll while the slider remains sticky.
Set Height (For Drag Mode): If you're using Drag interaction, set the height to either Fixed or Viewport (vh) (e.g., 100vh) depending on your layout preference.
Customize & Launch: Use the right-hand properties panel to upload your images, type your titles, and dial in the perfect animation smoothness!
Creative Portfolios: Showcase your case studies, design projects, or development work with an interactive, tactile gallery.
Photography & Art Exhibitions: Give high-resolution images the breathing room and focus they deserve in a museum-like digital space.
E-Commerce Product Highlights: Highlight flagship product features or alternate colorways in a premium, engaging format.
Editorial Hero Sections: Replace static hero images with a dynamic, story-driven carousel that immediately hooks the user's attention.
Imesh Dilshan
