https://github.com/mirayatech/image-card-stack
🃏 A draggable card stack component with smooth animations and TypeScript generics.
https://github.com/mirayatech/image-card-stack
animation anime demon-slayer draggable framer-motion motion react tailwind ui ux
Last synced: 10 months ago
JSON representation
🃏 A draggable card stack component with smooth animations and TypeScript generics.
- Host: GitHub
- URL: https://github.com/mirayatech/image-card-stack
- Owner: mirayatech
- Created: 2025-08-26T08:37:15.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-26T09:07:34.000Z (10 months ago)
- Last Synced: 2025-08-26T10:41:44.245Z (10 months ago)
- Topics: animation, anime, demon-slayer, draggable, framer-motion, motion, react, tailwind, ui, ux
- Language: TypeScript
- Homepage: https://image-card-stack.vercel.app
- Size: 215 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🃏 Dynamic Image Card Stack
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.
## ✨ Technologies
- `React 19`
- `TypeScript`
- `Motion 12` (Framer Motion successor)
- `Tailwind CSS 4`
- `Vite 7`
## 🚀 Features
- **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 `StackableItem` type
- **Configurable Effects** - Customize rotation angles, scaling factors, and 3D perspective
- **Threshold Detection** - Cards automatically move to bottom of stack when dragged beyond limits
## 📍 The Process
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.
## 🎯 Component Architecture
- **`CardStack`** - Generic draggable stack component accepting any `StackableItem`
- **`DraggableContainer`** - Handles drag physics and 3D motion effects
- **`useCardRotation`** - Custom hook managing drag interactions and threshold detection
- **`ImageCardStack`** - Concrete implementation for image galleries
- **`StackableItem`** - TypeScript interface ensuring type safety across components
## 🚦 Running the Project
1. Clone the repository
2. Install dependencies: `npm install`
3. Run development server: `npm run dev`
4. Open `http://localhost:5173` in your browser
## 🎞️ Preview
https://github.com/user-attachments/assets/1d35a074-284f-478f-a95b-541ad3ee242e