3D Arc Carousel

3D Arc & Perspective Engine by Karim Saif

Show PreviewBuy for $5
3D Arc Carousel

About 3D Arc Carousel

3D Arc Carousel is a premium, interactive component designed to showcase visual media along a customizable 3D curved trajectory. Built natively with Framer Motion, it combines realistic depth, responsive auto-fitting, continuous infinite looping, and touch-enabled gesture controls.

Preview:: https://threedarccarousel.framer.website/

Key Features

  • 3D Arc & Perspective Engine: Smoothly curves and tilts cards along an arc depth axis with real-time perspective depth (translateZ, rotateY, and scale).

  • Seamless Infinite Looping: Smooth requestAnimationFrame loop for continuous marquee scrolling with zero jitter or frame skips.

  • Interactive Drag & Keyboard Controls: Supports pointer capture drag interactions, adjustable drag sensitivity, and keyboard arrow navigation (ArrowLeft / ArrowRight).

  • Auto-Scaling & Responsive Layout: Automatically recalculates card dimensions based on parent container bounds via an integrated ResizeObserver.

  • Hover & Motion Controls: Built-in pause-on-hover logic and automatic standard preference checks (prefers-reduced-motion).

  • Robust Image Normalization: Out-of-the-box compatibility with standard image URLs, Framer ResponsiveImage assets, and nested image objects.

  • Accessible Architecture: Implements structural ARIA roles (role="region", aria-roledescription="carousel") and customizable labeling.

Support & Feedback

Have questions, requests, or feedback? Reach out anytime: