3D Bend Carousel

A physics-driven bent stack of cards - drag, wheel, keyboard, snap, and optional autoplay. Pass items or image URLs; install ships demo photos next to the component.

Default

Vertical concave bend with drag, snap, loop, and autoplay. Off-center cards fade to grayscale; glare tracks the curve.

Loading…

Installation

CLI

npx @sonojs/ui@latest add 3d-bend-carousel

Also needsnpm i lucide-react

Usage

Demo images install under components/carousels/3d-bend-carousel/images/ and are imported by the defaults. Pass your own items when you replace them.

page.tsx

"use client"

import { ThreeDBendCarousel } from "@/components/carousels/3d-bend-carousel"

export default function Page() {
  return (
    <ThreeDBendCarousel
      orientation="vertical"
      curveDirection="concave"
      grayscaleInactive
      itemWidth={340}
      aspectRatio={0.8}
      gap={-35}
      perspective={1100}
      bendAngle={48}
      depth={420}
      snap
      loop
      autoPlay
      autoPlayInterval={4000}
    />
  )
}

Props

Prop	Type	Default	Description
items	(string · BendCarouselItem)[]	bundled images	Cards as objects or image URL strings. Defaults to static imports from `./images/`.
images	string[]	-	Alias for a list of image URLs when not using `items`.
orientation	"vertical" · "horizontal"	"vertical"	Bend axis - vertical stack or horizontal rail.
curveDirection	"concave" · "convex"	"concave"	Curve away into the screen or forward toward the viewer.
itemWidth	number	320	Card width in pixels. Height follows `aspectRatio`.
gap	number	-40	Spacing between cards (negative for a shingle stack).
bendAngle	number	45	Max bend rotation in degrees.
depth	number	400	Z displacement for off-center cards.
autoPlay	boolean	false	Advance automatically while mounted.
loop	boolean	true	Seamless infinite looping.
grayscaleInactive	boolean	true	Desaturate cards away from the center.
showControls	boolean	true	Floating prev / next / play controls.
showIndicators	boolean	true	Counter and pagination dots.
className	string	-	Extra classes on the stage.