Alpaca Avatar Generator

A fun and interactive web application that lets you create custom alpaca avatars by mixing and matching different features like backgrounds, hair, eyes, mouth, and accessories.

Features

• 🎨 Customizable alpaca parts:
  • Backgrounds (18 color variations)
  • Hair styles (7 options)
  • Eyes (6 expressions)
  • Ears (3 positions)
  • Mouth (5 expressions)
  • Neck (4 styles)
  • Leg (6 poses)
  • Nose
  • Accessories (4 options)
• 🎲 Randomize feature to generate random combinations
• 💾 Download your creation as PNG
• 🖼️ Live preview canvas
• 📱 Responsive design

Tech Stack

• React
• Vite
• HTML Canvas
• CSS3

Getting Started

Prerequisites

• Node.js 16.x or higher
• npm or yarn

Installation

1. Clone the repository or download the source code
2. Navigate to the project directory:

cd alpacagen

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

5. Open your browser and visit http://localhost:5173

Building for Production

To create a production build:

npm run build

The built files will be in the dist directory.

To preview the production build locally:

npm run preview

Usage

1. Use the control panel on the right to customize your alpaca:
   • Click on different options for each feature
   • See the changes instantly in the preview
2. Click "Randomize" to generate random combinations
3. When satisfied, click "Download PNG" to save your creation

Project Structure

alpacagen/
├── public/
│   └── assets/         # Image assets for alpaca parts
├── src/
│   ├── components/     # React components
│   │   ├── AlpacaCanvas.jsx
│   │   └── Controls.jsx
│   ├── App.jsx        # Main application component
│   └── main.jsx       # Application entry point
└── index.html         # HTML template

Acknowledgments

• Inspired by DevProjects
• Alpaca artwork and assets included in the project