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.
"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>}