Make cute buttons that do real things.
ButtonSpa is a playful builder for buttons that do things: useful little workflows wrapped in buttons people actually want to tap. Today it starts with voice transcription, tactile effects, and PWA export. The wider shape is simple: polished buttons that can be shared, embedded, installed, and wired to whatever work needs one good tap.
- 🫁 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
- 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
- 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
- Export HTML/CSS - grab your button code instantly
- PWA packaging - save a button to your phone as a tiny app
- TypeScript throughout - fully typed for safety
- Modular architecture - easy to extend and customize
- Performance optimized - GPU-accelerated animations
# 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 startVisit http://localhost:8000 and start creating buttons that spark joy! 🎉
- Design Your Button - Use the master controls to set size, shape, and colors
- Add Effects - Click effect buttons to bring your button to life
- Configure Voice - Add your Gemini API key for transcription magic
- Export & Share - Save as HTML, share a link, or install as a tiny app
- 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
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
ButtonSpa 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
MIT License - Build amazing things! 🚀
Created with love using Claude Code - where AI meets artisanal craftsmanship.
Made for button lovers, voice note enthusiasts, and anyone who believes tiny interfaces can still have a pulse.
╭──────────────────────────────────╮
│ Happy button making. │
╰──────────────────────────────────╯