Pixel Craft

English | 简体中文

A web-based pixel art converter built with Next.js and React that transforms images into customizable retro-style graphics.

Overview

Pixel Craft is a tool designed to convert standard images into pixel art. It provides a real-time preview and allows users to fine-tune parameters like grid density, color quantization, and contrast to achieve the desired aesthetic. The application is fully client-side, ensuring fast processing and privacy.

Features

• Image Upload: Drag and drop support or file selection for PNG, JPEG, and WebP images.
• Real-time Processing: Instant preview of pixel art transformations as parameters change.
• Grid Density Control: Adjust the resolution of the output pixel grid.
• Color Quantization: Reduce the color palette to create a retro, indexed-color look.
• Contrast Adjustment: Modify image contrast to enhance details before pixelation.
• Export: Save the generated pixel art as a PNG file.
• Multi-language Support: Native support for English and Simplified Chinese.
• Dark/Light Mode: Theme support based on user preference or system settings.

Technical Stack

• Framework: Next.js 15
• Library: React 19
• Styling: Tailwind CSS
• UI Components: Radix UI / Shadcn UI
• Icons: Lucide React
• State Management: React Hooks
• Internationalization: Custom i18n implementation

Getting Started

Prerequisites

• Node.js 18.x or higher
• npm

Installation

• Clone the repository:

  git clone https://github.com/ZhanZiyuan/pixel-craft.git
  cd pixel-craft

• Install dependencies:

  npm install

Development

• Run the development server:

  npm run dev

  The application will be available at http://localhost:9002 (or as configured in package.json).

Production

• Build the application:

  npm run build

• Start the production server:

  npm start

Usage

• Load an image by clicking the "LOAD IMAGE" button or dragging a file onto the preview area.
• Use the "PARAMETERS" panel to adjust:
  • Grid Density: Higher values result in more pixels.
  • Color Steps: Lower values create a more restricted color palette.
  • Contrast: Adjusts the dynamic range of the colors.
• Click "EXPORT PIXEL ART" to download your creation as a PNG.

License

This project is licensed under the GNU General Public License v3.0 (GPLv3). See the LICENSE file for details.