Curved Carousel

Posters on a 3D cylinder. The first image starts full-bleed and shrinks into the ring, then scrolling turns the cylinder card by card. Also works with drag or slow auto rotation.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/curved-carousel

import { CurvedCarousel } from "@/components/curved-carousel"

// Drop your images into public/gallery/. Missing files fall back to color posters.
const images = [
  { src: "/gallery/01.jpg", title: "Opening Night", caption: "Main stage, 21:00" },
  { src: "/gallery/02.jpg", title: "Neon Garden", caption: "Light installation" },
  { src: "/gallery/03.jpg", title: "Bass Pier", caption: "Late set by the water" },
  { src: "/gallery/04.jpg", title: "Sunrise Club", caption: "Ambient until dawn" },
  { src: "/gallery/05.jpg", title: "Street Food", caption: "Forty stalls, one square" },
]

export function Demo() {
  return (
    <CurvedCarousel images={images} />
  )
}

Updates live as you change the controls. Only non-default props are included.