A sliding-puzzle web app built with React + TypeScript and Vite. Upload any image, crop the portion you want to use, choose a grid size (2x2 — 12x12) and play a sliding-tile puzzle generated from your crop.
Recording (screen capture):
Screen.Recording.2026-01-05.at.10.02.39.AM.mov
Live demo: https://sayakaono.github.io/sliding-puzzle/
- Upload an image and crop the exact area to use for the puzzle (react-image-crop).
- Choose grid sizes from 2x2 up to 12x12.
- Works on desktop and mobile (touch/click).
- Built with modern stack: React 19, TypeScript, Vite.
Clone and install
git clone https://github.com/SayakaOno/sliding-puzzle.git
cd sliding-puzzle
npm installRun dev server
npm run dev- Open the app in your browser.
- Select a grid size from the selector (default is 3x3).
- Upload an image.
- Use the crop UI to select the portion of the image you want used for the puzzle.
- A preview canvas displays the crop.
- Click "Start Game" to generate the puzzle from the cropped image.
- Play by clicking or tapping tiles adjacent to the empty space to slide them into place.
Notes:
- The UI enables starting the game only after a valid crop has been created.
- Larger grid sizes (e.g., 10x10+) increase the number of tiles and may be slower on low-powered devices.
- src/
- components/
- ImageSetup — image upload + cropping UI and preview canvas
- Game — game logic and tile rendering
- components/
Key dependencies
- react, react-dom
- typescript
- vite
- react-image-crop (image cropping)
- react-select (grid size selector)
- react-modal, tsparticles (visuals/UX)
- Cropping logic is adapted from the React Image Crop demo patterns.
- The puzzle is client-side only — no backend required.
Dedicated to my niece — she supplied the ideas and the colour palette, which really helped.
Thank you, Reina — it was so much fun building the app with you 🫶❤️
- react-image-crop demo for canvas/cropping patterns
- Vite + React starter for the project scaffold