Create your own Brawl Stars character, bring it to life with AI, and download it as a card!
BrawlBox is an interactive character creator web app designed for kids and Brawl Stars fans. Users can design their brawler step by step, generate an AI-powered avatar, and download the result as a professional-looking brawler card.
- 🎨 4-Step Character Creator — Name, rarity, class, stats, abilities, and avatar
- 🤖 AI Avatar Generation — Describe your brawler via voice or text to generate an AI character
- 🎤 Voice Input — Describe your brawler using your microphone (Web Speech API)
- 📥 Card Download — Download your brawler card as PNG rendered via Canvas 2D API
- 🎵 Background Music — Ambient game music generated with Web Audio API
- 🔊 Sound Effects — Click, success, and error sound feedback
- 🌐 Multilingual — Turkish and English language support
- 📱 Responsive Design — Mobile and desktop friendly
- 🎮 Brawl Stars Theme — Premium UI faithful to the game's aesthetics
| Technology | Usage |
|---|---|
| Nuxt 3 | Full-stack framework |
| Vue 3 | Reactive UI |
| Tailwind CSS v4 | Styling |
| Pinia | State management |
| Web Audio API | Music & sound effects |
| Canvas 2D API | Card rendering & download |
| Web Speech API | Voice input |
| Pollinations AI | Free AI image generation |
# Install dependencies
npm install
# Start dev server (http://localhost:3000)
npm run dev
# Production build
npm run buildbrawler-creator/
├── app/
│ ├── components/ # Vue components
│ │ ├── BrawlerCard.vue # Card preview & Canvas download
│ │ ├── StepAvatar.vue # AI avatar generation
│ │ ├── StepBasicInfo.vue # Name, rarity, class selection
│ │ └── StepStatsAbilities.vue # Stats & abilities
│ ├── composables/ # Vue composables
│ │ └── useGameMusic.js # Web Audio music system
│ ├── layouts/ # Page layouts
│ ├── pages/ # Pages
│ └── stores/ # Pinia stores
│ └── brawler.ts # Main app state & translations
├── server/
│ └── api/ # Server-side API routes
│ ├── generate-avatar.post.ts # AI image generation
│ └── transform-avatar.post.ts # Image transformation
└── nuxt.config.ts
Design & development: @armutyus
This project was developed through pair programming with Antigravity — Google DeepMind's agentic AI coding assistant.
This project is for personal use. Brawl Stars is a registered trademark of Supercell.