Create captivating user experiences with the Ring–Rail Carousel, a versatile and meticulously crafted component for Framer. Powered by the fluidity of Framer Motion, it delivers exceptionally smooth, physics-based animations that will give your projects a premium, high-end feel.
Whether you need an immersive 3D ring that pulls users into your content or a classic, sleek linear "film-strip," this single component provides the ultimate flexibility to build the perfect gallery.
🎭 Dual Modes: Instantly switch between an immersive Circle (3D) layout and a clean Linear rail.
💨 Buttery-Smooth Animation: Leveraging Framer Motion for flawless animations, including momentum-based dragging that feels natural and responsive.
🎨 Deep Customization: Fine-tune every detail. Control the 3D perspective, vertical tilt, slide dimensions, shadow intensity, colors, and even the active border glow.
📱 Fully Responsive: Designed to look incredible on every device. Our guide below shows you exactly how to configure it for a perfect responsive experience.
🚀 High Performance: Optimized for a smooth and delightful user experience, ensuring your site feels fast and modern.
We've organized the properties into intuitive groups so you can easily bring your vision to life:
Layout & Behavior: Switch modes, define the Circle Radius, and set your Slide Dimensions.
Camera & Perspective: Adjust the Vertical Tilt and Perspective to create dramatic and unique 3D angles.
Appearance: Control everything from Shadow Intensity and Backgrounds to the subtle Active Border Color that makes your carousel pop.
Responsive Design Guide
Achieve a perfect layout on any screen by adjusting a few key properties. Here are some presets to get you started:
Desktop Example (Immersive & Spacious)
Create a wide, cinematic feel that's perfect for larger screens.
Circle Radius: 380px
Slide Width: 280px
Slide Height: 200px
Bottom Gap: -182px (Positions the UI over the carousel)
Mobile Example (Compact & Polished)
A tighter radius and smaller cards ensure a perfect fit on narrow viewports.
Circle Radius: 200px
Slide Width: 160px
Slide Height: 180px
Bottom Gap: -182px (Saves crucial vertical space on mobile)
Can Girgin
