Skip to content

improve(make): lead with the looping GIF, prompt the first rectangle, humanize lab tooltips #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
silviot wants to merge 1 commit into
base: main
Choose a base branch
from
Open

improve(make): lead with the looping GIF, prompt the first rectangle, humanize lab tooltips #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/components/ui1/CanvasStage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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);
Expand Down
20 changes: 10 additions & 10 deletions src/components/ui1/ExportMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 12 additions & 12 deletions src/components/ui1/ShareMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,30 +228,30 @@
<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}
{#if cap.video.mp4 || cap.video.webm}
<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}
Expand Down
8 changes: 4 additions & 4 deletions src/components/ui1/ToolRail.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,17 @@
<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" />
</button>
<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" />
Expand Down