🤖 Pixel Robot PFP Generator

Generate unique pixel art robot profile pictures with randomisation and multi-resolution downloads.

Features

• Randomised robots: Each click generates a completely unique robot with randomised:

  • Colours (primary, secondary, accents)
  • Body shapes (rounded, square, tall)
  • Antennae styles (straight, wavy, ball-topped) or none
  • Eye styles (round, square, angry, happy)
  • Mouth styles (line, smile, frown, O-shaped)
  • Arms (2 or 4)
  • Legs (2 or 4)
  • Panels and accents

• Multiple resolutions: Download at 480p, 720p, 1080p, 1440p, 2160p, or custom sizes

• Format options: PNG or JPG

• Batch download: Download all standard resolutions at once

• Client-side only: No server required, fully private generation

• Pixel-perfect rendering: Crisp pixelated output

Quick Start

Prerequisites

• Node.js 16+ and npm (or yarn/pnpm)

Installation

# Clone or download the repository
cd pixel-robot-pfp

# Install dependencies
npm install

# Start development server
npm run dev

The app will open automatically at http://localhost:3000.

Build for Production

npm run build

Output will be in the dist/ folder. You can deploy this to any static hosting.

Deploy with Docker

You can also run the app using Docker.

Build and run with Docker Compose

docker-compose up -d --build

Then open http://localhost:3000 in your browser.

Manual Docker build

docker build -t robot-pfp .
docker run -p 3000:80 robot-pfp

Usage

1. Randomise: Click the "Randomise" button to generate a new robot
2. Choose resolution: Select from preset options (480p–2160p) or enter a custom size
3. Select format: Choose PNG or JPG
4. Download:
   • "Download {resolution}p" for single file
   • "Download All Sizes" for all standard resolutions at once

Project Structure

pixel-robot-pfp/
├── index.html           # HTML entry point
├── package.json         # Dependencies and scripts
├── vite.config.js       # Vite configuration
├── Dockerfile           # Docker build instructions
├── docker-compose.yml   # Docker Compose configuration
├── src/
│   ├── main.jsx         # React entry point
│   ├── App.jsx          # Main robot generator component
│   └── App.css          # Styles
└── README.md            # This file

Technologies

• React 18: UI framework
• Vite: Fast build tool and dev server
• Canvas API: Robot pixel art rendering
• CSS Grid: Responsive layout
• Docker (optional): Containerisation for easy deployment

Customisation

Edit src/App.jsx to:

• Add more colours to the colours array
• Modify robot drawing logic in the drawRobot() function
• Add new body shapes, eye styles, mouth styles, etc.
• Adjust canvas size and scaling

All randomisation logic is in the generateRobot() function.

License

CC0 1.0 Universal (Public Domain)

Feel free to use, modify, and distribute without restrictions.

Notes

• Robots are generated using the Canvas API and rendered at pixel-perfect quality
• Large custom resolutions (4000+ px) may take a moment to generate
• PNG format preserves transparency; JPG is slightly smaller
• Batch downloads may trigger popup blockers—allow them to proceed