Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider

A draggable 3D carousel for React and Next.js, built for the front page of a studio, a portfolio, a product drop or a magazine. Photo, video and text cards sit on a shallow curved arc and move like real objects: drag them 1:1, flick them with momentum, and they always land exactly on a card. It runs on its own small physics engine, written for this component, with no carousel library underneath.

Features

• Momentum and snapping. Cards follow your finger or cursor with no lag. A flick carries them with weight and snaps to the nearest card; a quick flick moves one card, a hard one several (never more than half the set).
• Seamless infinite loop. No cloned slides and no jump back to the start, at any speed. Turn the loop off for a straight rail with rubber-band ends.
• Real 3D depth. Neighbouring cards turn towards you, step back and dim slightly. Fast motion makes the cards lean into it, and they settle with a small overshoot when they stop. Pictures slide inside their frames (parallax).
• Six card types. Image and video cards with a tag, title and caption that rise on the active card; a statement card with one huge word; a text card with a script, serif or sans title; a stat card whose number counts up; and your own custom content.
• Click to expand. The active card morphs into a large detail view with its story and a call to action. Arrow keys move through the slides inside it, and closing returns you to the card you were on.
• Every input. Mouse drag, touch swipe (vertical page scrolling still works), trackpad and Shift + wheel, a mouse wheel that never traps the page, and the keyboard: arrows, Home, End, Space and Enter.
• Autoplay with progress. A segmented progress bar fills as it plays. It pauses on hover, keyboard focus, a hidden tab or when the carousel scrolls out of view, and stops for good once the visitor takes control.
• Polished details. A "Drag" cursor that reads "Open" over the active card, magnetic arrow buttons, paper grain on the colour cards, soft shadows that deepen as a card arrives, and a blurred placeholder while each image loads.
• Light, dark and auto themes. Auto follows your site's .dark class or colour scheme. Set your fonts and accent colour with CSS variables.
• Responsive. Full 3D on desktop, a lighter arc on tablets, and on phones a single card with its neighbours peeking and dot indicators. No horizontal page scroll from 320 px up.

Performance

Nothing in React re-renders while the carousel moves: every frame runs on Motion values, using transforms and opacity only. Images load eagerly only near the start, cards far off screen stay mounted but hidden, and the first screen is laid out before any JavaScript runs, so there is no layout shift. About 13 KB gzipped on top of React and Motion.

Accessibility

A labelled carousel region with a single tab stop for the active card, slide announcements for screen readers ("Slide 3 of 9"), visible focus rings, a proper dialog that keeps and returns focus, an always-available pause button, and full support for reduced motion (no springs, no autoplay, a still arc). axe reports no issues, and captions keep a 4.5:1 contrast over the photos.

Install and use

Installs with the shadcn CLI and adds motion (Framer Motion's current name). React 19 (18 works), Next.js App Router or Vite. Plain CSS with dc- classes, so it sits beside Tailwind CSS without touching it.

<DynamicCarousel slides={slides} label="Selected work" />

Props let you set the card width and aspect ratio, gap, loop, autoplay interval, depth, tilt and parallax strength, alignment, theme, accent colour, and whether a click opens the detail view. There is also a ref with next(), prev(), goTo(), pause() and play(), and an onChange callback.

Demos

The preview shows it four ways: an editorial set of ten mixed cards, a dark product rail at full depth, a flat minimal rail, and a complete studio page with all three. Demo photographs come from Unsplash and the ink clip from Pexels; replace them with your own.