A premium, interactive playground for generating, customizing, and exporting procedural avatars using the Boring Avatars library.
This project wraps the core SVG generation logic in a highly polished, interactive UI featuring dynamic mesh backgrounds, interactive spotlight glassmorphism, native color picking, and one-click SVG/PNG exports.
- 6 Unique Styles: Beam, Marble, Pixel, Sunset, Ring, and Bauhaus.
- Dynamic Color Palettes: Pick exactly the colors you want with native OS color pickers, or randomize the entire 5-color palette instantly.
- Intelligent Exporting: Click any avatar to instantly open a high-end, responsive contextual menu. Export as crisp, infinitely scalable SVG or beautifully anti-aliased PNG (up to Ultra 1200x1200px resolution).
- Responsive Shape Masking: Switch between traditional rounded profiles and modern rounded squares with a single click. Every avatar on screen synchronizes instantly.
- Premium Glassmorphism: Interactive cards feature custom spotlight shaders that follow your cursor, overlaying a dynamic mesh gradient background that actively pulls from your current avatar palette.
Ensure you have Node installed, then run the following commands to spin up the development environment:
# Install dependencies
npm install
# Start the Vite development server
npm run devNavigate to http://localhost:5173 to experience the playground!
- React 19
- Vite
- Tailwind CSS v4
- Boring Avatars
The UI eschews traditional flat components in favor of deep Z-axis layering. The interactive SpotlightCard components use mix-blend-overlay and custom radial gradients bound to mousemove event listeners in React. The layout enforces a strict mathematical grid to ensure visual harmony regardless of scale.