3D Card Carousel — React Component

Cylindrical 3D card carousel — cards arranged in a circle on the Z axis, rotating continuously or on scroll. Radius, perspective, item size, speed, and direction are all configurable.

Cardsscrollspring3dcarouselscrollframer-motioninteractivecardsanimation

3D Card Carousel

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

radius

Carousel cylinder radius in px (200–1000).

itemWidth

Card width in px (200–800).

itemHeight

Card height in px (200–800).

perspective

CSS perspective depth in px (500–3000).

autoRotate

Enable continuous auto-rotation.

autoSpeed

Auto-rotation speed multiplier (0.1–5).

scrollSpeed

Wheel/drag speed multiplier (0.1–5).

direction

Rotation direction — clockwise or counterclockwise.

Generated JSX

Copy this into your page.

<CardCarousel3D
  radius={380}
  itemWidth={280}
  itemHeight={380}
  perspective={1000}
  autoRotate={true}
  autoSpeed={1}
  scrollSpeed={1}
  direction="cw"
/>

Animation effects

scrollspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About 3D Card Carousel

The 3D Card Carousel is a scroll-driven carousel where the active card scales forward while adjacent cards recede in perspective depth. Built with Framer Motion useScroll, useTransform, and spring transitions, the depth effect communicates clearly which item is active without requiring dots or arrows alone. Touch swipe and mouse drag are supported. Ideal for portfolio pieces, testimonial carousels, and product feature showcases that need a spatial, premium feel.

Common use cases

Portfolio and work showcase carousels
Customer testimonial displays
Product feature story carousels
Case study and project listings