Curved Carousel

An interactive, 100% full-width 3D curved arc carousel featuring left-to-right oscillating auto-sway motion, smooth Motion spring physics, perspective depth cards, and dynamic site theme color binding.

CurvedCarousel transforms standard image galleries into an immersive, fanned 3D arc deck with customizable speed, touch/drag controls, and dark mode support.

3D Curved Arc Sway Deck

Usevariant"arc-sweep": to lay the cards along a 3D curved arc with a continuous left-to-right sway. It is the default.

Active Color

Continuous 3D Concave Arc Marquee

Usevariant"infinite-marquee": for an all-time continuous Right-to-Left infinite Marquee movement arranged in a 3D concave curved arc deck.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Curved Carousel

npx shadcn@latest add @algorize-ui/curved-carousel

components/custom/blocks/CurvedCarouselBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Curved Carousel needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

Oscillating Auto-Sway

Cards automatically sway left and right in a continuous, smooth oscillating loop.

3D Curved Arc Geometry

Calculates precise 3D Y-rotation, Z-rotation, and Y-translation to form a realistic curved arc deck.

100% Theme Color Engine

Binds directly to site primary CSS variable var(--primary) or explicit color swatches.

Fluid Responsive & Touch

Fully responsive container sizing with click-to-center navigation and hover pause controls.

Best Practices & Guidelines

When to Use

Use CurvedCarousel on hero sections, portfolio showcases, product galleries, or brand story cards to capture high user engagement with fluid 3D motion.

Props Reference

Prop	Type	Default	Description
`variant`	`"arc-sweep" \| "infinite-marquee"`	`"arc-sweep"`	Selects the active 3D curve layout architecture and movement style.
`items`	`CurvedCarouselCard[]`	`Preset Array`	Array of objects containing `id`, `title`, `code`, and `image`.
`autoPlay`	`boolean`	`true`	Enables or disables continuous automatic left-to-right sway animation.
`speed`	`number`	`1`	Oscillation sway step speed multiplier.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Applies dynamic theme color palettes (`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc"` or custom hex).
`className`	`string`	`""`	Custom Tailwind CSS classes applied to the root container.