A drag, scroll or arrow-key carousel whose items line the inside (or outside) of a cylinder, receding toward the center and growing toward the edges with a springy glide and snap.
"use client";
import { CylinderCarousel } from "@/components/ui/cylinder-carousel";
const GRADIENTS = [
"from-violet-500 to-fuchsia-500",
"from-amber-400 to-orange-500",
"from-emerald-400 to-teal-500",
"from-sky-400 to-blue-500",
"from-rose-400 to-pink-500",
"from-lime-400 to-green-500",
"from-indigo-400 to-purple-500",
];
export default function CylinderCarouselDemo() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8">
<CylinderCarousel
itemSize={220}
height={260}
className="w-full max-w-3xl"
>
{GRADIENTS.map((gradient) => (
<div
key={gradient}
className={`h-full w-full rounded-full bg-gradient-to-br ${gradient}`}
/>
))}
</CylinderCarousel>
</div>
);
}