From 9e548f8f7f91c86440b61fea32305d1c8bcb9edd Mon Sep 17 00:00:00 2001
From: Silvio Tomatis <silviot@gmail.com>
Date: Tue, 2 Jun 2026 06:42:28 +0000
Subject: [PATCH] improve(make): lead with the looping GIF, prompt the first
 rectangle, humanize lab tooltips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Quick-wins batch 1 (no change to rendering/export logic — copy + one overlay):

- Export & Share menus now lead with the Looping GIF (the shareable
  artifact), reworded in plain language; the misleading "Image" is
  renamed to "Still image (PNG)" with honest copy; dropped the
  "480px · 25fps" jargon.
- Cold-start prompt over the photo until the first rectangle is drawn,
  so a first-timer with their own photo knows what to do.
- Pipeline / Playground rail tooltips rewritten from notation
  ("log · rotated log", "f(z) explorer") to plain language.

Voice/copy changes — awaiting redline before merge + deploy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/ui1/CanvasStage.svelte | 27 +++++++++++++++++++++++++++
 src/components/ui1/ExportMenu.svelte  | 20 ++++++++++----------
 src/components/ui1/ShareMenu.svelte   | 24 ++++++++++++------------
 src/components/ui1/ToolRail.svelte    |  8 ++++----
 4 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/src/components/ui1/CanvasStage.svelte b/src/components/ui1/CanvasStage.svelte
index 4b98163..133a14d 100644
--- a/src/components/ui1/CanvasStage.svelte
+++ b/src/components/ui1/CanvasStage.svelte
@@ -690,6 +690,11 @@
           <div class="hud-br mono">{Math.round(doc.rect.x)}, {Math.round(doc.rect.y)} · {Math.round(doc.rect.w)}×{Math.round(doc.rect.h)}</div>
         {/if}
       {/if}
+      {#if !hasRect}
+        <div class="draw-hint">
+          <span>Drag a rectangle on your photo — that's the part that spirals into itself.</span>
+        </div>
+      {/if}
     {/if}
   </div>
 </section>
@@ -717,6 +722,28 @@
   .stage:not(.has-image) .viewport { box-shadow: none; }
   .layer { position: absolute; display: block; }
   .overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+  /* Cold-start prompt: shown over the photo until the first rectangle is drawn. */
+  .draw-hint {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    padding: 16px;
+  }
+  .draw-hint span {
+    background: var(--ink);
+    color: var(--bg);
+    opacity: 0.92;
+    padding: 9px 15px;
+    border-radius: 999px;
+    font-size: 13px;
+    line-height: 1.35;
+    max-width: 24em;
+    text-align: center;
+    box-shadow: var(--shadow);
+  }
   .badge {
     position: absolute;
     background: var(--accent);
diff --git a/src/components/ui1/ExportMenu.svelte b/src/components/ui1/ExportMenu.svelte
index 8872709..c6658ab 100644
--- a/src/components/ui1/ExportMenu.svelte
+++ b/src/components/ui1/ExportMenu.svelte
@@ -155,27 +155,27 @@
 {#if ui.exportMenuOpen}
   <div class="menu" role="menu">
     <div class="header">SAVE AS</div>
-    <button class="item" disabled={busy || !doc.image} onclick={doPng}>
-      <span class="ic"><Icon name="image" size={14} /></span>
+    <button class="item" disabled={busy || !doc.image} onclick={doGif}>
+      <span class="ic"><Icon name="gif" size={14} /></span>
       <span class="text">
-        <span class="t">Image</span>
-        <span class="s">A tententoon of your picture · {doc.image?.width ?? 0}×{doc.image?.height ?? 0}</span>
+        <span class="t">Looping GIF</span>
+        <span class="s">The seamless infinite zoom — made to share.</span>
       </span>
       <span class="dl"><Icon name="download" size={14} /></span>
     </button>
     <button class="item" disabled={busy || !doc.image} onclick={doVideo}>
       <span class="ic"><Icon name="film" size={14} /></span>
       <span class="text">
-        <span class="t">Video</span>
-        <span class="s">A looping zoom of a tententoon of your picture · {playback.loopLength.toFixed(0)}s</span>
+        <span class="t">Video (MP4)</span>
+        <span class="s">The same loop, crisper and smaller.</span>
       </span>
       <span class="dl"><Icon name="download" size={14} /></span>
     </button>
-    <button class="item" disabled={busy || !doc.image} onclick={doGif}>
-      <span class="ic"><Icon name="gif" size={14} /></span>
+    <button class="item" disabled={busy || !doc.image} onclick={doPng}>
+      <span class="ic"><Icon name="image" size={14} /></span>
       <span class="text">
-        <span class="t">Looping GIF</span>
-        <span class="s">{playback.loopLength.toFixed(0)}s · 480px · 25fps</span>
+        <span class="t">Still image (PNG)</span>
+        <span class="s">A single moment, not the loop.</span>
       </span>
       <span class="dl"><Icon name="download" size={14} /></span>
     </button>
diff --git a/src/components/ui1/ShareMenu.svelte b/src/components/ui1/ShareMenu.svelte
index 6a7bc55..2e82ad7 100644
--- a/src/components/ui1/ShareMenu.svelte
+++ b/src/components/ui1/ShareMenu.svelte
@@ -228,12 +228,12 @@
       <div class="backdrop" onclick={close}></div>
       <div class="menu" role="menu">
         <div class="header">SHARE AS</div>
-        {#if cap.image}
-          <button class="item" disabled={busy} onclick={doShareImage}>
-            <span class="ic"><Icon name="image" size={14} /></span>
+        {#if cap.gif}
+          <button class="item" disabled={busy} onclick={doShareGif}>
+            <span class="ic"><Icon name="gif" size={14} /></span>
             <span class="text">
-              <span class="t">Image</span>
-              <span class="s">A tententoon of your picture</span>
+              <span class="t">Looping GIF</span>
+              <span class="s">The seamless infinite zoom — made to share.</span>
             </span>
           </button>
         {/if}
@@ -241,17 +241,17 @@
           <button class="item" disabled={busy} onclick={doShareVideo}>
             <span class="ic"><Icon name="film" size={14} /></span>
             <span class="text">
-              <span class="t">Video</span>
-              <span class="s">A {playback.loopLength.toFixed(0)}s looping zoom</span>
+              <span class="t">Video (MP4)</span>
+              <span class="s">The same loop, crisper and smaller.</span>
             </span>
           </button>
         {/if}
-        {#if cap.gif}
-          <button class="item" disabled={busy} onclick={doShareGif}>
-            <span class="ic"><Icon name="gif" size={14} /></span>
+        {#if cap.image}
+          <button class="item" disabled={busy} onclick={doShareImage}>
+            <span class="ic"><Icon name="image" size={14} /></span>
             <span class="text">
-              <span class="t">Looping GIF</span>
-              <span class="s">{playback.loopLength.toFixed(0)}s · 480px · 25fps</span>
+              <span class="t">Still image (PNG)</span>
+              <span class="s">A single moment, not the loop.</span>
             </span>
           </button>
         {/if}
diff --git a/src/components/ui1/ToolRail.svelte b/src/components/ui1/ToolRail.svelte
index d761b65..518332e 100644
--- a/src/components/ui1/ToolRail.svelte
+++ b/src/components/ui1/ToolRail.svelte
@@ -46,8 +46,8 @@
   <button
     class="tool"
     class:active={ui.view === 'pipeline'}
-    title="Pipeline (log · rotated log · tententoon)"
-    aria-label="Pipeline view"
+    title="See how the spiral is built — log it, bend it, spiral it"
+    aria-label="See how the spiral is built"
     onclick={() => setView('pipeline')}
   >
     <Icon name="viewPipeline" />
@@ -55,8 +55,8 @@
   <button
     class="tool"
     class:active={ui.view === 'playground'}
-    title="Complex playground (f(z) explorer)"
-    aria-label="Complex playground"
+    title="Playground — bend any image with a complex function"
+    aria-label="Playground — bend an image with a complex function"
     onclick={() => setView('playground')}
   >
     <Icon name="viewPlayground" />