Take a selfie. Shuffle it. Solve it.
Selfie Shuffle is a fun and interactive web-based puzzle game where players transform their own selfies into a personalized jigsaw puzzle. Capture a photo using your device's camera or upload an existing image, choose a difficulty level, and rearrange the shuffled pieces to recreate the original picture. Challenge yourself to complete the puzzle in the shortest time with the fewest moves.
- 📸 Capture a selfie directly from your webcam
- 🖼️ Upload an image from your device
- 🧩 Multiple difficulty levels (3×3, 4×4, 5×5, 6×6)
- 🔀 Random puzzle generation using the Fisher–Yates shuffle algorithm
- 🖱️ Smooth drag-and-drop puzzle gameplay
- ⏱️ Live timer and move counter
- 🏆 Performance-based scoring system
- 💡 Hint system to preview the original image
- 🔄 Restart and reshuffle options
- 📱 Fully responsive design for desktop, tablet, and mobile
- 🎉 Celebration animation upon puzzle completion
- React
- Vite
- Tailwind CSS
- MediaDevices API (Camera Access)
- Canvas API (Image Processing)
- dnd-kit (Drag & Drop)
- React Router
- Framer Motion (Animations)
- Open Selfie Shuffle.
- Capture a selfie using your webcam or upload an image.
- Select your preferred difficulty level.
- The image is divided into puzzle pieces and shuffled.
- Drag and swap the tiles to restore the original image.
- Complete the puzzle in the least time and with the fewest moves to achieve a higher score.
| Level | Grid Size | Pieces |
|---|---|---|
| Easy | 3 × 3 | 9 |
| Medium | 4 × 4 | 16 |
| Hard | 5 × 5 | 25 |
| Expert | 6 × 6 | 36 |
Your final score is calculated based on:
- Difficulty level
- Time taken
- Number of moves
- Hint usage (optional deduction)
src/
│── assets/
│── components/
│── hooks/
│── pages/
│ ├── Home
│ ├── Camera
│ ├── Upload
│ ├── Puzzle
│ └── Results
│── context/
│── utils/
│── styles/
│── App.jsx
└── main.jsx
- 👥 Multiplayer mode
- 🌍 Global leaderboard
- 📅 Daily puzzle challenges
- 🎭 Image filters and stickers
- 🧠 AI-powered hints
- 🎵 Background music and sound effects
- 🏅 Achievements and badges
- 🌙 Dark mode
- 📤 Share completed puzzles on social media
- 🧩 Custom puzzle piece shapes
- 🎯 Time Attack and Survival game modes
Contributions are welcome!
- Fork the repository.
- Create a new feature branch.
- Commit your changes.
- Push the branch.
- Open a Pull Request.
Selfie Shuffle aims to make every photo a unique puzzle experience. Future updates will introduce competitive multiplayer, AI-assisted gameplay, themed events, custom puzzle styles, and global leaderboards to create a more engaging and replayable experience.