Goober is a lightweight web app for building playful avatars from hand-drawn layers. It renders SVG-like PNG layers on a <canvas>, lets you recolor them in real time, and exports the final composite as a high-resolution PNG.

• Layer-based editor – Combine heads, hair, brows, eyes, mouths, accessories, and optional backgrounds from assets/.
• Live recoloring – Every layer marked as white in manifest.json is dynamically recolored to match the color pickers, enabling custom skin, hair, and accessory palettes.
• Background control – Toggle background layers on or off, apply tinting to white-mode backgrounds, and choose a solid export background color.
• Randomizer – Instantly generate a new goober with randomized parts and colors, great for inspiration or quick testing.
• State persistence – Current selections and colors are stored in localStorage and can be exported/imported as JSON for sharing.
• High-res export – Export the current avatar at sizes from 128×128 up to 2048×2048 (or higher) as a PNG with transparent or tinted background.
• Dark/light theme – Theme toggle integrates with the parent site cookie to keep the UI easy on the eyes.

All dependencies are native browser APIs. To run locally you just need a static file server. A few options:

# Python 3
python -m http.server 8000

# Node.js (requires npm)
npx http-server . -p 8000

1. Clone this repository.
2. Start a static server from the project root using one of the commands above.
3. Visit http://localhost:8000 in your browser.
4. Use the controls to craft your goober, then export or download the PNG.

Note: Loading index.html straight from the filesystem (file://) will block fetch calls for manifest.json in many browsers. Use a local server instead.

Available parts and their recolor behavior are described in manifest.json:

• Each category entry defines an id, name, file path, and an optional mode.
• Layers with "mode": "white" are recolored based on their matching color picker.
• Background entries can use mode: "white" to allow tinting via the background color picker.

To add new assets:

1. Drop the PNG into the relevant folder inside assets/ (matching the dimensions of existing parts, 512×512).
2. Add a new manifest entry with a unique id and display name pointing to the asset path.
3. Reload the page; the new option will appear automatically.

• Click Export PNG to download the current avatar at the selected size.
• Click Randomize to generate a new combination.
• Click Load JSON to import a state file previously exported from another Goober session (or saved via browser dev tools using localStorage.getItem('goober_state_v2')).

.
├── app.js           # Canvas renderer and UI logic
├── index.html       # UI markup and theme scripts
├── style.css        # Light/dark theme styling and layout
├── manifest.json    # Catalog of avatar layers and behaviors
└── assets/          # Layer PNGs (backgrounds, heads, eyes, etc.)

1. Fork the project and create a feature branch.
2. Make your changes and update manifest.json or assets as needed.
3. Submit a pull request describing your additions. Contributions of new parts, UI tweaks, and bug fixes are all welcome!

This project bundles original artwork. Please respect any licensing information provided by the maintainers before redistributing assets.