A retro-styled web tool for slicing spritesheets, managing assets, and creating pixel-art animations.

Welcome Screen	Asset Management
System Settings	Sandbox Mode

SpriteLab is a specialized tool designed for game developers and pixel artists. It streamlines the workflow of importing raw spritesheets, slicing them into usable frames, and testing animations in real-time.

Built with a Retro-Futurist UI (inspired by 90s software), it looks like a legacy tool but runs with modern web performance. It features a persistent Sandbox where you can organize assets and build scenes, all saved automatically to your browser's local storage.

• 🎨 Asset Pipeline:

  • Drag-and-drop import for images/spritesheets.
  • Smart Slicer: Automatically detects rows and frames in your sprite sheets.
  • Asset Editor: Dedicated workspace to slice, preview, and configure assets.

• 🎞️ Animation Engine:

  • Instant preview of your sprites.
  • Row-Based Looping: Select specific animation rows (e.g., "Walk Down", "Attack").
  • Adjustable frame rates (FPS).

• 🕹️ Sandbox Mode:

  • A persistent "Scene" editor to test assets together.
  • Keyboard Shortcuts: Nudge, delete, and duplicate items quickly.
  • Drag & Drop placement.

• 💾 Persistence:

  • All settings (Grid size, CRT effects) and Sandbox layout are saved automatically via localStorage.
  • Export your processed assets as ZIP (JSON + PNGs).

• 📼 Retro UX:

  • Custom "Pixel Art" design system.
  • CRT Scanline overlay (togg-able).
  • Keyboard-friendly navigation.

• Framework: React 18
• Build Tool: Vite
• Language: TypeScript
• Styling: Vanilla CSS Variables (No UI libraries, 100% custom Design System)
• Icons: Lucide React
• State: React Context API

1. Clone the repository

   git clone https://github.com/Moussandou/SpriteLab.git
   cd SpriteLab

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Build for production

   npm run build

This project is configured to deploy automatically to GitHub Pages using GitHub Actions.

1. Go to Settings > Pages.
2. Select Source: GitHub Actions.
3. Push changes to the main branch.
4. The site will be live at: https://Moussandou.github.io/SpriteLab/

Built with ❤️ by Moussandou