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 @@
{Math.round(doc.rect.x)}, {Math.round(doc.rect.y)} · {Math.round(doc.rect.w)}×{Math.round(doc.rect.h)}
{/if}
{/if}
+ {#if !hasRect}
+
+ Drag a rectangle on your photo — that's the part that spirals into itself.
+
+ {/if}
{/if}
@@ -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}