The GlassSwiper component is a sleek, interactive card slider built with modern motion and glassmorphism aesthetics. It allows users to swipe through stacked cards smoothly, mimicking a natural drag-and-release interaction. Each card elegantly blurs into the background with frosted glass effects and layered depth using 3D perspective transforms. The design integrates shadcn/ui styling principles for consistency with modern UI systems, offering both light and dark theme support. Ideal for showcasing portfolios, testimonials, or featured projects, this component combines immersive visuals with smooth transitions, creating a premium and dynamic user experience.
import { ShadcnSwiper } from "@/components/ui/shadcn-swiper";
export default function ShadcnSwiperPage() {
const cards = [
{
id: 1,
imageUrl: 'https://images.unsplash.com/photo-1761872782901-f5da62309aad?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=764',
title: 'Twilight Shores',
description: 'Experience calm evenings under pastel skies.',
},
{
id: 2,
imageUrl: 'https://images.unsplash.com/photo-1742201408520-630d5214c006?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=764',
title: 'Whispering Pines',
description: 'Nature’s rhythm, pure and serene.',
},
{
id: 3,
imageUrl: 'https://images.unsplash.com/photo-1761872936306-cede97eb846d?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=764',
title: 'Aurora Nights',
description: 'Lights that paint the heavens in motion.',
},
{
id: 4,
imageUrl: 'https://images.unsplash.com/photo-1761839258623-e232e15f7ff3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687',
title: 'Echo Valley',
description: 'Where silence and echoes meet endlessly.',
},
]
return (
<div className="min-h-screen w-full flex flex-col items-center justify-center bg-gradient-to-b from-background to-muted dark:from-black dark:to-slate-900 transition-colors">
<p className="mb-10 text-muted-foreground text-center max-w-md">
Swipe through immersive landscapes crafted with elegance and motion.
</p>
<ShadcnSwiper cards={cards} />
</div>
)
}