chore: simplified explainer

Author: tamirelazar

docs/index.html

@@ -35,49 +35,23 @@ <h1 class="wordmark">stereo<i>·</i>mosaic<i>·</i>live</h1>
     <div class="cell"><span class="cap">Output</span>
       <span class="live"><span class="dot"></span>re-resampled on input</span></div>
   </div>
-  <a class="scrollhint" id="scrollhint" href="#explainer" aria-label="Scroll for more">
+  <a class="scrollhint" id="scrollhint" href="#about" aria-label="Scroll for more">
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
   </a>
 </section>
-  <section class="below" id="explainer">
-    <span class="num">01 — How it works</span>
-    <h2>The whole thing is a choice of columns.</h2>
-    <p>Each output column is taken from one source frame. The mode picks <em>which</em> source
-       column to sample per frame: pushbroom holds a fixed column (a single slit); xslit slides the
-       column linearly with frame index (a virtual second slit → perspective); forward sweeps it
-       quadratically (a looming push-in). The viewpoint dial shifts the base column.</p>
-    <figure class="inset">
-      <div class="frame"><canvas id="slices-canvas"></canvas></div>
-      <div class="controls slices-controls" id="slices-controls">
-        <label class="toggle"><input class="slices" type="checkbox"> show slices</label>
-        <label class="dial">viewpoint <input class="vp" type="range" min="0" max="1" step="0.005" value="0.5" aria-label="Viewpoint"></label>
-      </div>
-      <figcaption>Tick <b>show slices</b> to draw the per-frame strip seams — the space-time volume the mosaic is cut from.</figcaption>
-    </figure>
-  </section>
-
-  <section class="below" id="lineage">
-    <span class="num">02 — Lineage</span>
-    <h2>Same frames, two slits.</h2>
-    <p>Pushbroom is the original repo: one fixed slit, flat strips. X-slit is this fork — the slit
-       slides across the frames and perspective falls out of it. Same footage, one toggle apart.</p>
-    <figure class="inset">
-      <div class="frame"><canvas id="lineage-canvas"></canvas></div>
-      <div class="controls" id="lineage-controls">
-        <div class="modes">
-          <button data-m="pushbroom" class="on">pushbroom · original</button>
-          <button data-m="xslit">xslit · this fork</button>
-        </div>
-        <label class="dial">viewpoint <input class="vp" type="range" min="0" max="1" step="0.005" value="0.5" aria-label="Viewpoint"></label>
-      </div>
-    </figure>
-  </section>
-
-  <section class="below" id="depth">
-    <span class="num">03 — Depth</span>
-    <h2>Depth — next.</h2>
-    <p class="note">X-slit is quietly stereo — the sweep that bends perspective also leaves depth in
-       the slope of each feature's trail across the frames. Reading it back is the next step. Not built yet.</p>
+  <section class="below" id="about">
+    <span class="num">What this is</span>
+    <h2>A panorama whose viewpoint you set after the shot.</h2>
+    <p>One sideways pan in. Every output column is sampled from a single source frame; the
+       sampling mode decides <em>which</em> column per frame, so projection and viewpoint stay
+       adjustable after capture. The dial shifts the base column.</p>
+    <dl class="specs">
+      <div><dt>pushbroom</dt><dd>Fixed column — one slit, flat strips. The original repo.</dd></div>
+      <div><dt>xslit</dt><dd>Column slides with frame index — perspective falls out. This fork.</dd></div>
+      <div><dt>forward</dt><dd>Column sweeps quadratically — a looming push-in.</dd></div>
+    </dl>
+    <p class="note">X-slit is incidentally stereo: depth survives in the slope of each feature's
+       trail across the frames. Reading it back is the next step — not built yet.</p>
   </section>
 
   <footer class="foot">

docs/js/page.js

@@ -67,8 +67,6 @@ function attract(m, controls) {
 async function main() {
   const hero = await mountViewer("hero-canvas", "hero-controls", { mode: "xslit", drag: true });
   heroLayout(); fadeHint();
-  await mountViewer("slices-canvas", "slices-controls", { mode: "xslit" });
-  await mountViewer("lineage-canvas", "lineage-controls", { mode: "pushbroom" });
   addEventListener("resize", () => { heroLayout(); fadeHint(); });
   addEventListener("scroll", fadeHint, { passive: true });
   if (document.fonts && document.fonts.ready) document.fonts.ready.then(heroLayout);

docs/style.css

@@ -85,21 +85,13 @@ canvas{width:100%;aspect-ratio:3982/527;display:block;background:transparent;
 .below h2{font:700 clamp(28px,4.6vw,54px)/1.04 "Space Grotesk";letter-spacing:-.02em;margin:0 0 18px;max-width:18ch}
 .below p{color:var(--muted);max-width:62ch;font-size:18px}
 .below em{color:var(--ink);font-style:italic}
-.inset{margin:40px 0 0}
-.inset .frame{border:1px solid var(--line2);border-radius:8px;overflow:hidden}
-.inset canvas{width:100%;aspect-ratio:3982/527;display:block;background:#000}
-.inset .controls{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:16px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
-.inset .modes{display:flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
-.inset .modes button{background:transparent;color:var(--muted);border:0;border-right:1px solid var(--line);padding:8px 14px;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.03em}
-.inset .modes button:last-child{border-right:0}
-.inset .modes button.on{background:var(--sig);color:#0a0c11;font-weight:500}
-.inset .dial{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}
-.inset .dial input{flex:1;accent-color:var(--sig)}
-.inset .toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
-.inset .toggle input{accent-color:var(--sig)}
-.inset figcaption{margin-top:12px;font:400 12.5px/1.5 "IBM Plex Mono",monospace;color:var(--faint)}
-.inset figcaption b{color:var(--muted);font-weight:500}
-#depth .note{border-left:2px solid var(--sig);padding:2px 0 2px 18px}
+.specs{margin:32px 0 0;max-width:64ch}
+.specs > div{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
+.specs > div:last-child{border-bottom:1px solid var(--line)}
+.specs dt{font:500 13px/1.4 "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--sig)}
+.specs dd{margin:0;color:var(--muted);font-size:16px}
+.below .note{margin-top:28px;border-left:2px solid var(--sig);padding:2px 0 2px 18px}
+@media (max-width:560px){.specs > div{grid-template-columns:1fr;gap:4px}}
 .foot{max-width:1180px;margin:0 auto;padding:14vh 6vw 10vh;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font:400 13px/1.6 "IBM Plex Mono",monospace;color:var(--faint)}
 .foot a{color:var(--muted);text-decoration:none}
 .foot a:hover{color:var(--sig)}
@@ -109,5 +101,5 @@ canvas{width:100%;aspect-ratio:3982/527;display:block;background:transparent;
 
 /* no-WebGL2 fallback */
 .no-webgl2 .stage{background:#000 center/cover no-repeat url("./asset/poster.jpg")}
-.no-webgl2 .console,.no-webgl2 .inset .controls{opacity:.4;pointer-events:none}
+.no-webgl2 .console{opacity:.4;pointer-events:none}
 .no-webgl2 .hero::after{content:"This demo needs a WebGL2-capable browser.";position:absolute;left:6vw;bottom:120px;z-index:6;font:400 12px/1.4 "IBM Plex Mono",monospace;color:var(--faint)}