Run the website#
Requires Node.js 22 or newer and npm.
git clone https://github.com/ai-calypse/avatar-studio.git
cd avatar-studio
npm ci
npm run devOpen Avatar Studio locally. To use another port:
npm run dev -- --port 4175The creator opens immediately, with a live preview and downloads alongside the customization controls:
- Choose body, eye, and accessory colors independently, or enable Match eyes for the accessory.
- Adjust eye size, eye spacing, and head roundness. Choose Fluid / random for an organic body, then Shuffle to find a unique silhouette. Your shape seed is saved with your look.
- Choose from 50 accessories, plus None, in a grouped dropdown. Accessories fit the changing body outline.
- Choose the header language to translate controls, all 50 accessories, showcases, and download messages into English, Spanish, French, German, Portuguese, Japanese, Korean, Simplified Chinese, or Traditional Chinese. The URL and browser remember your selection.
- Try expressions and movement settings, including blinking, pointer following, and interactive head movement.
- See your avatar in live examples of chat, profile cards, an app companion, and project branding.
Your appearance settings are saved in your browser. Reset look restores the defaults.
Download formats#
| Format | Website export |
|---|---|
| SVG | Transparent vector snapshot of the current appearance. |
| PNG | Transparent 512 × 512 image. |
| GIF | 24-frame, 256 × 256 looping recording, with a light background and reduced color palette. |
Exports are generated in the browser. SVG and PNG capture the current appearance; GIF records the live animation.
Build for static hosting#
npm run build:pagesUpload the contents of .pages-site/ to your static host. The generated index.html serves the creator at the site root. This build contains only the website; it does not deploy or expose the MCP server.
Glossy 3D preview#
The creator includes an optional Glossy 3D style with rounded vinyl bodies, reflective materials, raised eyes, and the existing shape-fitting accessory catalog. Switch styles in the editor; colors, eye controls, and body shapes carry over. Expression buttons control the 3D face directly, including heart eyes, happy arcs, sleeping eyes, and error crosses. PNG captures the transparent 3D view; GIF records the selected expression with floating and blinking motion. SVG retains the original vector appearance.
This first version requires browser WebGL. Devices without it keep the SVG editor. Reduced-motion preferences stop the floating motion. Accessory outlines curve around the actual body surface, and headphone bands and cushions fit the silhouette. Individually sculpted accessories and full gesture parity are future work. The npm component and local MCP image tools continue to render the existing SVG style.
The creator loads its self-hosted Three.js renderer only when 3D is selected. For local development, npm run dev builds the renderer automatically; npm run build:glossy rebuilds it after changes. Three.js is MIT licensed; its license is included in the deployed bundle directory.