Ring Rail Carousel: Premium Component by Can Girgin

Meet the Ring–Rail Carousel: Where Elegance Meets Motion

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.

Key Features

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

Your Vision, Your Control

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.