🎨 ButtonStudio.app

██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗
██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║
██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║
██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║
██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║
╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝
                                                        
 ███████╗████████╗██╗   ██╗██████╗ ██╗ ██████╗ 
 ██╔════╝╚══██╔══╝██║   ██║██╔══██╗██║██╔═══██╗
 ███████╗   ██║   ██║   ██║██║  ██║██║██║   ██║
 ╚════██║   ██║   ██║   ██║██║  ██║██║██║   ██║
 ███████║   ██║   ╚██████╔╝██████╔╝██║╚██████╔╝
 ╚══════╝   ╚═╝    ╚═════╝ ╚═════╝ ╚═╝ ╚═════╝

A lush, clean, minimal button generator with serious vibes ✨

Create beautiful, customizable voice recording buttons with real-time transcription, modular effects, and that perfect tactile feel. Built with Deno Fresh and packed with soft neo toybrut aesthetics.

🌟 Features That Slap

🎮 Modular Effects System

• 🫁 Breathe - Gentle breathing animation
• ⬆️ Bounce - Satisfying vertical bounce
• 🐛 Wiggle - Playful rotation wiggle
• ✨ Glow - Dynamic glow that matches your button color
• 💓 Pulse - Smooth opacity pulse
• 🌈 Rainbow - Flowing gradient border magic

🎨 Lush Design Studio

• Live preview with instant updates
• Warm color palette inspired by succulent morning dew
• Shape control - circle, square, rounded with custom radius
• Shadow styles - brutalist hard shadows or soft diffused
• Border thickness - from subtle to chunky
• Smart conflict resolution - effects that play nice together

🎤 Voice Magic

• Real-time transcription using Google Gemini
• Automatic clipboard copy - your voice instantly becomes text
• Haptic feedback on mobile devices
• Visual waveform during recording
• Custom prompts - translate, dramatize, or surprise yourself

🛠️ Developer Friendly

• Export HTML/CSS - grab your button code instantly
• TypeScript throughout - fully typed for safety
• Modular architecture - easy to extend and customize
• Performance optimized - GPU-accelerated animations

🚀 Quick Start

# Clone the vibes
git clone https://github.com/pibulus/button-studio.git
cd button-studio

# Install Deno (if you haven't already)
curl -fsSL https://deno.land/install.sh | sh

# Start the magic
deno task start

Visit http://localhost:8000 and start creating buttons that spark joy! 🎉

🎯 Usage

1. Design Your Button - Use the master controls to set size, shape, and colors
2. Add Effects - Click effect buttons to bring your button to life
3. Configure Voice - Add your Gemini API key for transcription magic
4. Export & Share - Copy the generated HTML/CSS or share your creation

🧬 Tech Stack

• Deno Fresh 1.7.3 - The edge-rendered web framework
• Preact - Fast 3kB alternative to React
• Twind - Tailwind CSS-in-JS
• Google Gemini - AI-powered speech transcription
• Web APIs - MediaRecorder, AudioContext, Vibration for native feel

🎨 Design Philosophy

Soft Neo Toybrut - A unique aesthetic combining:

• Kawaii minimalism with playful, friendly interactions
• Brutalist borders for that chunky, tactile feel
• Warm gradients inspired by natural succulent colors
• Modular effects following the 80/20 rule for maximum impact

🤝 Contributing

ButtonStudio thrives on good vibes and creative energy! Feel free to:

• 🐛 Report bugs with detailed reproduction steps
• 💡 Suggest new effects or features
• 🎨 Share your button creations
• 🛠️ Submit PRs with improvements

📄 License

MIT License - Build amazing things! 🚀

🙏 Credits

Created with love using Claude Code - where AI meets artisanal craftsmanship.

---

Made with 💖 for the button lovers, voice note enthusiasts, and anyone who believes UI should spark joy.

╭──────────────────────────────────╮
│  🎨 Happy button making! ✨       │
╰──────────────────────────────────╯