https://github.com/pibulus/button-studio
Voice button design studio - create gorgeous customizable recording buttons for websites
https://github.com/pibulus/button-studio
deno fresh ui-design voice-recording
Last synced: about 1 month ago
JSON representation
Voice button design studio - create gorgeous customizable recording buttons for websites
- Host: GitHub
- URL: https://github.com/pibulus/button-studio
- Owner: pibulus
- Created: 2025-06-28T15:35:48.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-05-07T15:18:04.000Z (about 2 months ago)
- Last Synced: 2026-05-07T16:40:02.697Z (about 2 months ago)
- Topics: deno, fresh, ui-design, voice-recording
- Language: TypeScript
- Size: 10.6 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ButtonSpa.app
> **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.
## Core Features
### 🎮 **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 Button Builder**
- **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
- **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
## 🚀 Quick Start
```bash
# 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** - Save as HTML, share a link, or install as a tiny app
## 🧬 Tech Stack
- **[Deno Fresh 1.7.3](https://fresh.deno.dev/)** - The edge-rendered web
framework
- **[Preact](https://preactjs.com/)** - Fast 3kB alternative to React
- **[Twind](https://twind.dev/)** - Tailwind CSS-in-JS
- **[Google Gemini](https://ai.google.dev/)** - 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
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
## 📄 License
MIT License - Build amazing things! 🚀
## 🙏 Credits
Created with love using [Claude Code](https://claude.ai/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. │
╰──────────────────────────────────╯
```