🎨 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! ✨        │
   │                                     │
   │  "The best buttons feel like magic  │
   │   but work like clockwork" 🕰️       │
   ╰─────────────────────────────────────╯