5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T2557,

3D Curved Carousel Overview

v2.0 — Now with full hover & click support while dragging. The 3D Curve Carousel is a fully interactive 3D carousel built for dynamic visual storytelling. Designed as a curved panoramic 3D carousel, it lets creators build a 3D showcase that feels smooth, responsive, and endlessly rotating. This component supports drag, swipe, and automatic motion, creating a momentum carousel experience that feels both fluid and natural.

What makes this different from other carousels

Unlike many carousel components that force you into predefined image or video placeholders, this one gives you full design freedom.

You design your cards directly on the Framer canvas with hover states, buttons, links, badges, or any custom layout, then simply connect those frames to the carousel. That’s it.

There are:

No locked templates
No predefined media slots
No content restrictions

Because the items are real Framer layers, this works beautifully as a product carousel, portfolio carousel, team carousel, or logo carousel - fully customized to your design system.

Instructions

Simply copy and paste the component into your Framer project. Connect your card designs whether they’re images, or videos to the product carousel using the drag handle. Adjust the carousel’s layout, 3D perspective, and infinite carousel rotation behavior from the properties panel. Customize details such as rotation radius, item spacing, and visual effects to perfect your perspective carousel layout.

How It Works

The 3D Curved Carousel provides 16 adjustable properties arranged into intuitive sections for maximum creative control.

Content & Layout:

Items Array – Connect cards to form a seamless ring carousel layout in 3D space.
Initial Angle – Define the starting rotation position for your circular carousel.
Radius – Set the distance between items and the center point for a dynamic 3D carousel look.
Perspective – Fine-tune the depth and curvature for a truly immersive perspective carousel effect.
Repeat Count – Configure item repetition for an infinite carousel feel with looping visuals.

Auto Rotation:

Auto Rotate – Enable or disable continuous rotation for a smooth carousel motion.
Direction – Choose rotation direction (left or right) for flexible design control.
Speed – Adjust how fast the auto rotate carousel spins to suit your content.
Hover Slow – Add elegant slow-down effects for engaging hover interactions.

Drag Interaction:

Draggable – Activate manual control for a drag carousel experience.
Drag Sensitivity – Fine-tune responsiveness for different user gestures.
Momentum – Configure how long the momentum carousel continues spinning after release for realistic motion.
Mobile Drag – Enable touch gestures to create a swipe carousel optimized for phones and tablets.
Scroll Wheel – Allow users to rotate the carousel using a mouse wheel or trackpad for intuitive interaction.

Visual Effects:

Edge Fade – Apply gradient fades with customizable opacity and width.

Properties Control Panel

Key Features

Production-Ready & Responsive: This responsive carousel is created for seamless performance on any device. The component’s time-based animation system ensures smooth carousel motion and consistent frame rates across screens.
Advanced Interaction Methods: Users can drag, swipe, or scroll to control the drag carousel or swipe carousel with natural physics and momentum. Hover effects, touch gestures, and auto rotate carousel controls make every interaction feel refined and intuitive.
Automatic Rotation System: The configurable auto rotate carousel offers directional control, speed adjustment, and hover-sensitive slowdown. It pauses automatically during user interaction and resumes smoothly afterward, maintaining uninterrupted motion.
Performance Optimized: Leveraging GPU acceleration and direct DOM rendering, this premium carousel delivers ultra-fluid 3D carousel animations at 60fps. Optimizations for video content ensure your video carousel runs stutter-free.
Infinite Loop Effect: A seamless circular carousel layout creates an infinite carousel illusion with no visible start or end point. Items repeat in a perfect loop for continuous engagement.
Momentum Physics: Realistic motion dynamics make the momentum carousel feel alive. Users can swipe and spin with physics-based continuity for a tactile, satisfying experience.
Hover & Click While Dragging : Cards fully support hover effects, button clicks, and link navigation even when drag is enabled. This was a highly requested feature - you no longer have to choose between drag and interactivity. Both work simultaneously.
Flexible Content Support: This component support both - image carousel, and video carousel.

Use Cases

Portfolio Showcases – Display creative projects or artwork in a rotating 3D showcase using the 3D curve carousel.
Product Galleries – Present multiple product angles or styles in an interactive product carousel that enhances browsing engagement.
Team Displays – Rotate through team profiles or testimonials using a visually dynamic circular carousel.
Feature Highlights – Introduce app features or services in an engaging auto rotate carousel layout that encourages exploration.
Image Galleries – Build a smooth carousel for immersive image carousel experiences optimized for touch and drag.
Video Showcases – Present demos or promotional reels in a video carousel optimized for performance and clarity.

This 3D Ring Carousel is the ultimate premium carousel solution combining responsive performance, elegant design, and intuitive interaction. Whether you're building a 3D showcase, product carousel, or immersive curved panoramic 3D carousel, this component transforms ordinary layouts into extraordinary experiences. With v2.0, every card is now fully interactive - drag, hover, and click all work together seamlessly.

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com

5a:[["$","$L5d",null,{"post":{"id":"0199e396-3b5e-7703-8a72-f0985ce65801","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c3bff3a7-7c7d-4186-83a4-ec14bfdad6e4","name":"Soyeb","slug":"soyeb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/867947/avatar-jQxx1q8RWj76NfGo0ZcrLujaVCrKOh.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"E7Kzgcw27D0v8u6mHvTh","resolved":true,"title":"3D Curved Carousel","body":"$5e","bodyJson":null,"introduction":"Rotating 3D infinite carousel for Framer","slug":"3d-curved-carousel","author":{"framerUserId":"c3bff3a7-7c7d-4186-83a4-ec14bfdad6e4","name":"Soyeb","slug":"soyeb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/867947/avatar-jQxx1q8RWj76NfGo0ZcrLujaVCrKOh.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/E7Kzgcw27D0v8u6mHvTh/3d-curved-carousel-IETc2guRswqm8Eja7l2MVA7Pz45ddI","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-06T17:48:50.323Z","updatedAt":"2026-04-08T08:15:37.257Z","publishedAt":"2025-10-14T16:38:17.694Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://curved-carousel.framer.ai","price":"14","paymentUrl":"https://buy.polar.sh/polar_cl_sFsi79KGvXma67sY1lO98xEnZvvWhAX2YTd1W0dz7jW","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"HeRynATUDLF9J5DCVGa3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":35,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-14T16:38:17.694Z","updatedAt":"2025-10-14T16:38:17.694Z","reported":false}}],"$L5f"]

Suggested for you