Stack Carousel
A production-ready stack carousel component for your Next.js application. Accessible, customizable, and built with modern standards.
Stack Carousel
A highly interactive, gesture-driven stack carousel that allows users to swipe through cards with physics-based animations. It features a synchronized detail view with a premium double-bordered glassmorphism design, adapting seamlessly to both light and dark modes.
Interaction
- Swipe Gestures: Users can drag the top card to dismiss it, triggering a smooth spring animation.
- Auto-Play/Shuffle: Dismissing a card cycles it to the back of the stack with a satisfying shuffle sound effect.
- Synchronized Details: The detail card on the right updates instantly to reflect the currently active card.
Design Details
- Glassmorphism: The detail card uses
backdrop-blur-3xland translucent backgrounds for a modern, airy feel. - Double Borders: The detail container features a unique double-border design—an outer solid border and an inner dotted border—creating a technical, precision-engineered aesthetic.
- Responsive Layout: The component automatically stacks vertically on mobile devices and expands to a side-by-side layout on larger screens.
Usage
Perfect for showcasing featured content, portfolios, or travel destinations where visual engagement is key.
- Hero Sections
- Galleries
- Featured Content
| Name | Type | Default | Description |
|---|---|---|---|
| items | CarouselCardData[] | Demo Data | Array of card objects containing id, title, location, desc, url, and users. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.