CurvedCarousel3D is a fully interactive, physics-driven 3D carousel built natively for Framer. Cards are positioned on a virtual cylinder using real trigonometric math — giving an authentic curved depth effect without any external libraries. Every interaction feels alive: drag with momentum, auto-rotation, spring easing, and glass-morphic card surfaces.
How It Works
Each card is positioned around a cylinder using polar coordinates. The X and Z position of every card is calculated using sine and cosine of its angle, so cards curve naturally around an invisible circular track. Scale, opacity, and z-index are dynamically mapped from depth — the front card appears full size and fully opaque, while cards further back shrink and fade proportionally. A spring lerp function smoothly interpolates between the target rotation and the displayed rotation on every animation frame, giving the carousel its signature fluid feel. When you release a drag, a momentum system kicks in — velocity decays gradually through a configurable friction coefficient until the carousel naturally comes to rest.
Interaction & Controls
Dragging or swiping rotates the carousel using real-time delta tracking with a rolling velocity average for natural responsiveness. On release, momentum carries the rotation forward and decays smoothly. Hovering over the carousel pauses auto-rotation instantly, and rotation resumes when the cursor leaves. Arrow buttons snap to the next or previous card, while dot indicators let users jump directly to any card. Full pointer event support ensures the carousel works seamlessly on touch devices without conflicting with page scroll.
What Makes It Different
Most carousels on the Framer Marketplace use flat perspective transforms or CSS hacks to simulate depth. CurvedCarousel3D uses actual cylinder mathematics — every card's position, scale, and opacity is computed from its real angle on a 3D circular track. The momentum physics engine uses a rolling velocity average during drag and a configurable friction coefficient on release, making every interaction feel weighted and natural. Cards feature layered glassmorphism with backdrop blur, edge lighting gradients, and soft corner reflections — all toggleable from the property panel. The entire component is built with React 18 concurrent rendering using startTransition, keeping animations at a smooth 60fps even with many cards
No refunds after purchase. Since this is a digital product, all sales are final. If you face any issues, feel free to reach out and I'll help you resolve them.
ANIMESH MONDAL
