A browser-based image processing tool for applying pixelation, dithering, and color palette effects to images. Create retro-style pixel art from any image with real-time preview and export capabilities.

Built for Pixel Forecast - This tool was created to generate the pixel art assets for my iOS weather app that brings weather to life with stunning pixel art animations.

• Image Upload: Drag and drop or click to upload images
• Color Palettes: Choose from preset palettes or upload your own color strip (find more at Lospec)
• Pixelation: Adjustable pixel size for different retro effects
• Dithering: Multiple dithering algorithms (Floyd-Steinberg, Ordered, etc.)
• Adjustments: Brightness, contrast, and saturation controls
• Sequence Support: Process multiple images as a sequence
• Export Options: Export as PNG or animated GIF
• Real-time Preview: See changes instantly with Web Worker-powered processing

• Bun (v1.0 or higher)

# Clone the repository
git clone https://github.com/zacharyfmarion/pixelate.git
cd pixelate

# Install dependencies
bun install

# Start the development server
bun dev

The app will be available at http://localhost:5173.

bun run build

The built files will be in the dist directory.

1. Upload an image using the left sidebar
2. Select a color palette from the presets or upload your own
3. Adjust effects in the right sidebar:
   • Pixelation size
   • Dithering algorithm and strength
   • Brightness, contrast, and saturation
4. Preview your changes in real-time
5. Export as PNG or GIF

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• Bun - JavaScript runtime & package manager
• Tailwind CSS - Styling
• Zustand - State management
• Web Workers - Background image processing
• gif.js - GIF encoding

src/
├── components/       # React components
│   ├── ui/          # Reusable UI components
│   └── ...          # Feature components
├── hooks/           # Custom React hooks
├── lib/
│   ├── export/      # Export functionality (PNG, GIF)
│   ├── processing/  # Image processing algorithms
│   └── utils/       # Utility functions
├── store/           # Zustand store
├── types/           # TypeScript type definitions
└── workers/         # Web Worker for image processing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Preset palettes from Lospec
• gif.js for GIF encoding