pathways: walking mosaic navigator

Replace the scrolling facet-grid with a walkable maze. You start on a
random photo; every photo holds up to four paths (labels, keywords,
camera, lens ranked by count, library as fallback), one per cardinal
direction, each an ordered cycle. Arrow keys or hover-revealed buttons
lock the next photo of that path onto the grid in the direction moved;
visited photos form a panable mosaic with focus-jump on revisits.

Server: precomputes per-photo exits; adds /api/exits/:id and /api/random.
Client: zero-dependency rewrite — splash, hidden exits, drag-pan, pointer
capture, reduced-motion support.

1 files changed, 149 insertions, 124 deletions

diff --git a/public/app.css b/public/app.css
index b72761c..308868f 100644
--- a/public/app.css
+++ b/public/app.css
@@ -1,150 +1,175 @@
 :root {
-  --ink: #111;
-  --paper: #faf8f5;
-  --line: #ddd6cc;
-  --accent: #b3000a;
-  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
-  --serif: Georgia, "Times New Roman", serif;
+  --bg: #0e0f13;
+  --tile: #1b1d24;
+  --ring: #7dd3fc;
+  --ink: #e6e8ee;
+  --muted: #8b90a0;
 }
+
 * { box-sizing: border-box; }
-html { background: var(--paper); }
-body {
+
+html, body {
   margin: 0;
+  height: 100%;
+  background: var(--bg);
   color: var(--ink);
-  font-family: var(--mono);
-  font-size: 14px;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  overflow: hidden;
 }
-.mast {
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 48px 24px 8px;
+
+#stage {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
 }
-.mast h1 {
-  font-family: var(--serif);
-  font-weight: 400;
-  font-size: 44px;
-  letter-spacing: -0.02em;
-  margin: 0 0 4px;
+
+#world {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(0, 0);
+  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
+  will-change: transform;
 }
-.mast h1 .dot { color: var(--accent); }
-.tag { margin: 0 0 22px; color: #555; font-size: 13px; }
-.modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
-.modes button {
-  font: inherit;
-  background: none;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 5px 14px;
-  color: var(--ink);
+
+.tile {
+  position: absolute;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--tile);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
   cursor: pointer;
+  transition: box-shadow .2s;
 }
-.modes button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
-.status { margin: 0; color: #888; font-size: 12px; min-height: 18px; }
-
-.stream { max-width: 980px; margin: 0 auto; padding: 12px 24px 40px; }
+.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.tile.lock { animation: lock .5s cubic-bezier(.22, 1, .36, 1); }
 
-.thread { margin: 34px 0 0; }
-.thread-head {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  margin-bottom: 10px;
+@keyframes lock {
+  0%   { transform: scale(.2); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
 }
-.thread-head h2 {
-  font-family: var(--serif);
-  font-weight: 400;
-  font-size: 22px;
-  margin: 0;
+
+.tile.current {
+  box-shadow: 0 0 0 2px var(--ring), 0 0 26px 2px rgba(125, 211, 252, .4);
 }
-.thread-head .count { color: var(--accent); font-size: 12px; }
-.strip {
-  display: flex;
-  gap: 6px;
-  overflow-x: auto;
-  padding-bottom: 8px;
-  scrollbar-width: thin;
+
+.nav {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity .15s;
 }
-.strip a { flex: 0 0 auto; display: block; }
-.strip img {
-  display: block;
-  width: 140px;
-  height: 140px;
-  object-fit: cover;
-  border-radius: 3px;
-  background: #eee;
-  transition: transform 120ms ease;
+.tile.current:hover .nav { opacity: 1; }
+
+.nav-btn {
+  position: absolute;
+  pointer-events: auto;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, .25);
+  background: rgba(14, 15, 19, .85);
+  color: var(--ink);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: transform .12s, border-color .12s;
 }
-.strip a:hover img { transform: scale(1.03); }
-.swatch {
-  display: block;
-  height: 3px;
-  background: #ccc;
-  border-radius: 0 0 3px 3px;
-  margin-top: 2px;
+.nav-btn:hover { border-color: var(--ring); transform: scale(1.12); }
+.nav-btn[data-dir="N"] { top: 0; left: 50%; translate: -50% -50%; }
+.nav-btn[data-dir="E"] { top: 50%; right: 0; translate: 50% -50%; }
+.nav-btn[data-dir="S"] { bottom: 0; left: 50%; translate: -50% 50%; }
+.nav-btn[data-dir="W"] { top: 50%; left: 0; translate: -50% -50%; }
+
+.nav-label {
+  position: absolute;
+  left: 50%;
+  translate: -50%;
+  white-space: nowrap;
+  font-size: 11px;
+  letter-spacing: .04em;
+  color: var(--ink);
+  background: rgba(14, 15, 19, .92);
+  border: 1px solid rgba(255, 255, 255, .18);
+  border-radius: 4px;
+  padding: 2px 7px;
+  opacity: 0;
+  transition: opacity .12s;
+  pointer-events: none;
 }
+.nav-btn[data-dir="N"] .nav-label { bottom: calc(100% + 8px); }
+.nav-btn[data-dir="S"] .nav-label { top: calc(100% + 8px); }
+.nav-btn[data-dir="E"] .nav-label { top: 50%; left: calc(100% + 10px); translate: 0 -50%; }
+.nav-btn[data-dir="W"] .nav-label { top: 50%; right: calc(100% + 10px); translate: 0 -50%; }
+.nav-btn:hover .nav-label { opacity: 1; }
 
-.lightbox {
+#hint {
   position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.82);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 50;
+  bottom: 12px;
+  left: 50%;
+  translate: -50%;
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted);
+  letter-spacing: .05em;
+  pointer-events: none;
 }
-.lightbox[hidden] { display: none; }
-.lightbox-inner {
-  display: flex;
-  gap: 24px;
-  max-width: 1180px;
-  width: calc(100% - 40px);
-  background: var(--paper);
-  border-radius: 4px;
-  padding: 18px;
-  position: relative;
-  align-items: flex-start;
+
+#flash {
+  position: fixed;
+  top: 18px;
+  left: 50%;
+  translate: -50%;
+  font-size: 14px;
+  letter-spacing: .06em;
+  color: var(--ink);
+  background: rgba(14, 15, 19, .88);
+  border: 1px solid rgba(255, 255, 255, .22);
+  border-radius: 6px;
+  padding: 6px 14px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .25s;
 }
-.lightbox-inner img {
-  max-width: min(760px, 72%);
-  max-height: 82vh;
-  object-fit: contain;
-  border-radius: 2px;
-  background: #000;
+#flash.show { opacity: 1; }
+
+#splash {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: 14px;
+  text-align: center;
+  background: var(--bg);
+  z-index: 10;
+  transition: opacity .4s, visibility .4s;
 }
-.lightbox-side { flex: 1; min-width: 220px; padding-right: 30px; }
-.lightbox-side h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 4px; }
-.dim { color: #666; }
-.conns { margin-top: 16px; }
-.conns h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin: 0 0 8px; }
-.conns .chip {
-  display: inline-block;
-  border: 1px solid var(--line);
+#splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
+#splash h1 { margin: 0; font-size: 44px; font-weight: 300; letter-spacing: .18em; }
+#splash h1 .dot { color: var(--ring); }
+#splash p { max-width: 34ch; color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }
+#start {
+  margin-top: 10px;
+  padding: 10px 34px;
+  font-size: 15px;
+  letter-spacing: .12em;
+  border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 999px;
-  padding: 4px 12px;
-  margin: 0 6px 6px 0;
-  font-size: 12px;
-  cursor: pointer;
-}
-.conns .chip:hover { border-color: var(--accent); color: var(--accent); }
-.conns .chip b { color: var(--accent); font-weight: 600; }
-.close {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  border: none;
-  background: none;
-  font-size: 26px;
+  background: transparent;
+  color: var(--ink);
   cursor: pointer;
-  color: #555;
+  transition: border-color .15s, background .15s;
 }
-.close:hover { color: var(--ink); }
+#start:hover { border-color: var(--ring); background: rgba(125, 211, 252, .08); }
 
-.foot {
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 10px 24px 40px;
-  color: #aaa;
-  font-size: 11px;
+@media (prefers-reduced-motion: reduce) {
+  #world { transition: none; }
+  .tile.lock { animation: none; }
+  #flash { transition: none; }
 }