copy: broaden ButtonSpa action-app branding

Author: pibulus

.launch-hints.yaml

@@ -3,17 +3,17 @@
 name: ButtonSpa.app
 slug: buttonspa
 app_type: web-app
-audience: people who talk faster than they type and want cute tools that still do useful work
-problem: "most transcription and automation tools feel cold, slow, or built like subscription bait"
+audience: people who want tiny interfaces for real workflows without opening a whole app
+problem: "APIs, webhooks, and automations are powerful but usually ugly, intimidating, or hidden behind dashboards"
 promise: "ButtonSpa - Make cute buttons that do real things."
 cta: Reply if you want the link.
 differentiators:
   - >-
       I'm Pablo. I build tools with personality and soul. ButtonSpa lets you
-      design beautiful voice buttons with real-time AI transcription, then save
-      them as tiny apps.
+      turn useful actions into beautiful tappable buttons, then save them as
+      tiny apps.
   - "Make cute buttons that do real things."
-  - "A playful builder for tiny action apps, starting with voice buttons."
+  - "A playful builder for tiny action apps, starting with voice transcription."
 proof_points:
   - "\U0001FAC1 Breathe - Gentle breathing animation"
   - ⬆️ Bounce - Satisfying vertical bounce
@@ -26,10 +26,12 @@ keywords:
     - ButtonSpa.app
     - button spa
     - web app
-  audience: people who talk faster than they type and want cute tools that still do useful work
+  audience: people who want tiny interfaces for real workflows without opening a whole app
   intent:
+    - API buttons
+    - webhook buttons
     - voice transcription
     - tiny action apps
     - save to phone
 manual_notes:
-  - Lead with voice buttons today. Let webhooks and APIs feel like the next natural room in the spa.
+  - Lead with tiny action apps. Voice transcription is the first working treatment, not the whole brand.

README.md

@@ -2,10 +2,11 @@
 
 > **Make cute buttons that do real things.**
 
-ButtonSpa is a playful builder for tiny action apps. Today it helps you design
-beautiful voice recording buttons with real-time Gemini transcription, tactile
-effects, and PWA export. The wider shape is simple: polished buttons that can be
-shared, embedded, installed, and eventually wired to webhooks or APIs.
+ButtonSpa is a playful builder for tiny action apps: APIs, webhooks, and useful
+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
 

components/PWAShareModal.tsx

@@ -73,7 +73,7 @@ export default function PWAShareModal({
       if (!options.quiet) {
         playSound.success();
         hapticService.buttonSuccess();
-        toast("PWA ready to share! 🎉", "success");
+        toast("Tiny app link ready! 🎉", "success");
       }
     } catch (error) {
       console.error("PWA generation error:", error);
@@ -118,9 +118,9 @@ export default function PWAShareModal({
         <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 text-white">
           <div class="flex justify-between items-center">
             <div>
-              <h2 class="text-2xl font-black">Save Button as App</h2>
+              <h2 class="text-2xl font-black">Save as Tiny App</h2>
               <p class="text-sm opacity-90 mt-1">
-                Install on your phone's home screen
+                Give this button its own home screen icon.
               </p>
             </div>
             <button
@@ -147,9 +147,11 @@ export default function PWAShareModal({
               // PIN Setup UI (only show if API key exists)
               <div class="space-y-4">
                 <div class="text-center">
-                  <h3 class="text-xl font-bold mb-2">🔐 Share with API Key?</h3>
+                  <h3 class="text-xl font-bold mb-2">
+                    🔐 Keep voice transcription with it?
+                  </h3>
                   <p class="text-sm text-gray-600">
-                    Include your transcription features
+                    Protect the Gemini key with a PIN before sharing.
                   </p>
                 </div>
 
@@ -163,7 +165,7 @@ export default function PWAShareModal({
                           (e.target as HTMLInputElement).checked}
                       class="w-5 h-5 rounded"
                     />
-                    <span class="font-medium">Include API Key (Protected)</span>
+                    <span class="font-medium">Include API key with PIN</span>
                   </label>
 
                   {includeApiKey.value && (
@@ -193,7 +195,7 @@ export default function PWAShareModal({
                   disabled={includeApiKey.value && !isValidPIN(pin.value)}
                   class="w-full py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl font-black hover:from-purple-600 hover:to-pink-600 transition-all disabled:opacity-50"
                 >
-                  Generate Share Link
+                  Create Install Link
                 </button>
               </div>
             )
@@ -210,7 +212,7 @@ export default function PWAShareModal({
                     />
                   </div>
                   <p class="mt-3 text-sm text-gray-600">
-                    📱 Scan with your phone's camera
+                    📱 Scan to open this button.
                   </p>
                 </div>
 
@@ -241,57 +243,57 @@ export default function PWAShareModal({
                     onClick={copyLink}
                     class="w-full py-4 bg-black text-white rounded-2xl font-black hover:bg-gray-800 transition-colors flex items-center justify-center gap-2"
                   >
-                    <span>📋</span> Copy Link
+                    <span>📋</span> Copy Install Link
                   </button>
 
                   <button
                     type="button"
                     onClick={openOnPhone}
                     class="w-full py-4 bg-purple-500 text-white rounded-2xl font-black hover:bg-purple-600 transition-colors flex items-center justify-center gap-2"
                   >
-                    <span>📲</span> Open on This Device
+                    <span>📲</span> Open Button
                   </button>
                 </div>
 
                 {/* What Happens Next */}
                 <div class="border-t pt-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-4">
                   <h3 class="font-bold mb-3 text-purple-800">
-                    ✨ What You Get:
+                    ✨ What happens next
                   </h3>
                   <div class="space-y-2 text-sm text-gray-700">
                     <div class="flex gap-2">
                       <span>📱</span>
                       <span>
-                        Your button becomes an app icon on your home screen
+                        Home screen icon generated from this button
                       </span>
                     </div>
                     <div class="flex gap-2">
-                      <span>🎤</span>
+                      <span>🔘</span>
                       <span>
-                        Tap the icon → Opens just your button (no ButtonSpa)
+                        Opens straight to the action, without the studio
                       </span>
                     </div>
                     <div class="flex gap-2">
                       <span>📋</span>
                       <span>
-                        Record → Get transcription → Auto-copies to clipboard
+                        Voice buttons record, transcribe, and copy text
                       </span>
                     </div>
                     <div class="flex gap-2">
                       <span>🔗</span>
                       <span>
-                        Share this link with friends → They get the same button!
+                        Share the link to send the same tiny app
                       </span>
                     </div>
                   </div>
                 </div>
 
                 {/* Simple Install Steps */}
                 <div class="mt-4 p-3 bg-yellow-50 rounded-xl border-2 border-yellow-200">
-                  <p class="text-xs font-bold text-yellow-800 mb-2">
-                    📲 How to Install:
+                  <p class="text-sm font-bold text-yellow-800 mb-2">
+                    📲 Install steps
                   </p>
-                  <div class="text-xs space-y-1">
+                  <div class="text-sm space-y-1">
                     <div>
                       <span class="font-bold">iPhone:</span>{" "}
                       Open in Safari → Tap Share → Add to Home Screen

components/panels/MagicPanel.tsx

@@ -20,7 +20,7 @@ export default function MagicPanel({
       {onApiKeyChange && (
         <div>
           <h4 class="text-lg font-black text-gray-900 mb-2">
-            Gemini API Key
+            Voice Starter
             {apiKeyValue && apiKeyValue.trim() !== "" && (
               <span class="ml-2 text-green-600">✓ Voice Active</span>
             )}
@@ -29,7 +29,8 @@ export default function MagicPanel({
             {!apiKeyValue || apiKeyValue.trim() === ""
               ? (
                 <>
-                  ⚠️ Add your API key to enable voice transcription -{" "}
+                  Voice transcription is the first ButtonSpa action. Paste a
+                  Gemini key to turn recordings into copied text.{" "}
                   <a
                     href="https://aistudio.google.com/app/apikey"
                     target="_blank"
@@ -40,11 +41,11 @@ export default function MagicPanel({
                       hapticService.buttonPress();
                     }}
                   >
-                    Get free API key →
+                    Get a free Gemini key →
                   </a>
                 </>
               )
-              : "Voice transcription is automatically enabled with your API key"}
+              : "Voice transcription is on. Recordings will be transcribed and copied."}
           </p>
           <input
             type="password"
@@ -69,10 +70,10 @@ export default function MagicPanel({
       {onCustomPromptChange && (
         <div>
           <h4 class="text-lg font-black text-gray-900 mb-2">
-            Custom Instructions
+            Transcript Treatment
           </h4>
           <p class="text-sm text-gray-600 mb-3">
-            Add special instructions for transcription (optional)
+            Tell ButtonSpa how to clean up the transcript.
           </p>
           <textarea
             value={customPromptValue}

components/panels/ShipPanel.tsx

@@ -77,15 +77,19 @@ export default function ShipPanel(
   return (
     <div class="space-y-2">
       <div>
-        <h4 class="text-lg font-black text-gray-900 mb-2">Share Your Button</h4>
+        <h4 class="text-lg font-black text-gray-900 mb-2">Ship Your Button</h4>
         <p class="text-sm text-gray-600 mb-3">
-          Export your button to use anywhere!
+          Turn this design into a link, a phone app, or a standalone file.
         </p>
 
         {/* Export Buttons */}
         <div class="space-y-2">
+          {/* Save to Phone Button */}
           <button
-            onClick={() => handleExport("html")}
+            onClick={() => {
+              playSound.primaryClick();
+              showPWAModal.value = true;
+            }}
             onMouseEnter={() => playSound.hover()}
             type="button"
             class="w-full h-12 px-6 rounded-2xl border-2 font-bold text-sm transition-all hover:shadow-md active:scale-95 bg-yellow-200 hover:bg-yellow-300 text-black"
@@ -94,13 +98,11 @@ export default function ShipPanel(
               boxShadow: "4px 4px 0px rgba(0,0,0,0.85)",
             }}
           >
-            📄 Download HTML File
+            📱 Save as Tiny App
           </button>
 
-          {
-            /* COMMENTED OUT: PWA ZIP Export - not useful for most users
           <button
-            onClick={() => handleExport("pwa")}
+            onClick={() => handleExport("share")}
             onMouseEnter={() => playSound.hover()}
             type="button"
             class="w-full h-12 px-6 rounded-2xl border-2 font-bold text-sm transition-all hover:shadow-md active:scale-95 bg-yellow-200 hover:bg-yellow-300 text-black"
@@ -109,17 +111,11 @@ export default function ShipPanel(
               boxShadow: "4px 4px 0px rgba(0,0,0,0.85)",
             }}
           >
-            📦 Export PWA (ZIP)
+            🔗 Copy Design Link
           </button>
-          */
-          }
 
-          {/* Save to Phone Button */}
           <button
-            onClick={() => {
-              playSound.primaryClick();
-              showPWAModal.value = true;
-            }}
+            onClick={() => handleExport("html")}
             onMouseEnter={() => playSound.hover()}
             type="button"
             class="w-full h-12 px-6 rounded-2xl border-2 font-bold text-sm transition-all hover:shadow-md active:scale-95 bg-yellow-200 hover:bg-yellow-300 text-black"
@@ -128,11 +124,13 @@ export default function ShipPanel(
               boxShadow: "4px 4px 0px rgba(0,0,0,0.85)",
             }}
           >
-            📱 Save to Phone
+            📄 Download HTML
           </button>
 
+          {
+            /* COMMENTED OUT: PWA ZIP Export - not useful for most users
           <button
-            onClick={() => handleExport("share")}
+            onClick={() => handleExport("pwa")}
             onMouseEnter={() => playSound.hover()}
             type="button"
             class="w-full h-12 px-6 rounded-2xl border-2 font-bold text-sm transition-all hover:shadow-md active:scale-95 bg-yellow-200 hover:bg-yellow-300 text-black"
@@ -141,27 +139,29 @@ export default function ShipPanel(
               boxShadow: "4px 4px 0px rgba(0,0,0,0.85)",
             }}
           >
-            🔗 Copy Share Link
+            📦 Export PWA (ZIP)
           </button>
+          */
+          }
         </div>
       </div>
 
       {/* Export Info - More compact and friendly */}
       <div class="mt-2 p-2 bg-yellow-50 rounded-xl border-2 border-yellow-300">
-        <h5 class="font-bold text-xs mb-1">What can I do?</h5>
-        <ul class="text-xs space-y-0.5 text-gray-700">
+        <h5 class="font-bold text-xs mb-1">Best exits</h5>
+        <ul class="text-xs sm:text-sm space-y-1 text-gray-700">
           <li>
-            • <strong>HTML File</strong> - Works on any website
+            • <strong>Tiny app</strong> - home screen button with its own icon
           </li>
           <li>
-            • <strong>Save to Phone</strong> - Add to home screen like an app
+            • <strong>Design link</strong> - send the editable button
           </li>
           <li>
-            • <strong>Share Link</strong> - Send your design to friends
+            • <strong>HTML</strong> - drop it into a site
           </li>
           {apiKeyValue && (
             <li class="text-green-700 font-bold">
-              ✓ Voice transcription included in exports!
+              ✓ Voice transcription included in exports
             </li>
           )}
         </ul>