Tweenly Curved Carousel

Component 12

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tweenly Curved Carousel to your project and fits it to your theme.

Code

How Tweenly Curved Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
import { CurvedCarousel } from "@/components/ui/tweenly-curved-carousel"

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

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

function SourceSpecimen(){return <Demo/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}