An interactive image stack component built with React and Motion. Features smooth 3D animations, drag interactions, and a reusable component architecture that can work with any type of stackable content.
ReactTypeScriptMotion(Framer Motion successor)Tailwind CSSVite
Set out to create something that feels a bit tactile like handling real cards. What began as a simple drag interaction evolved into a more authentic experience with 3D rotations that respond to movement, making each interaction dynamic and natural. The design is fully modular: the core CardStack component manages the logic, while ImageCardStack shows how it can be customized. Smooth spring animations add that satisfying snap-back effect, and the flexibility means you can stack images, content cards, or any elements you need.
git status
CardStack<T>- Generic draggable stack component accepting anyStackableItemDraggableContainer- Handles drag physics and 3D motion effectsuseCardRotation- Custom hook managing drag interactions and threshold detectionImageCardStack- Concrete implementation for image galleriesStackableItem- TypeScript interface ensuring type safety across components
- Clone the repository
- Install dependencies:
npm install - Run development server:
npm run dev - Open
http://localhost:5173in your browser