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.
React 19TypeScriptMotion 12(Framer Motion successor)Tailwind CSS 4Vite 7
- Dynamic Card Stacking - Cards naturally stack with configurable rotation and scale
- 3D Drag Interactions - Realistic card rotations that respond to drag movements
- Spring Physics - Smooth animations with natural spring transitions
- Generic Architecture - Built with TypeScript generics to work with any
StackableItemtype - Configurable Effects - Customize rotation angles, scaling factors, and 3D perspective
- Threshold Detection - Cards automatically move to bottom of stack when dragged beyond limits
I wanted to create something that felt tactile and fun, like handling real cards. Started with a simple drag concept but realized it needed that extra dimension to feel authentic. The 3D rotations based on drag position make each interaction feel responsive and natural. The generic component design means you can stack anything.. images, content cards, whatever you need. The spring animations give it that satisfying snap-back feeling when you let go. Built the whole thing to be modular, so the core CardStack component can be reused while ImageCardStack shows how to implement it for specific use cases.
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