Go with the stage on phones, and let For fun follow the scroll

Evyatar chose layout C. The other two layouts, the chooser and the
Show the data buttons are gone: the project row passing just under the
stage now chooses its view, and the landscape holds above the first row.
Links bring a section in below the bar so its stage never covers the
heading.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: evyatarsw

SPEC.md

@@ -26,7 +26,9 @@ These came directly from Evyatar and are not open to reinterpretation.
 - **Side projects stay quiet.** They are hobbies, in their own section ("For fun",
   06): one line each, no screenshots, no cards, no metrics. The two with data
   behind them (sikui, NextPredictor) lend that real data to the model on hover;
-  their descriptions then sit in a caption under it, in one fixed place.
+  their descriptions then sit in a caption under it, in one fixed place. On a
+  phone there is no hover: the stage shows each project's view as its row
+  scrolls up under it.
 - **No invented facts.** Titles, dates, journals, mechanisms and wavelengths come
   from `src/content/data.js`, which was built from his CV and PubMed. If you think
   something is wrong, flag it, do not silently change it.
@@ -137,7 +139,10 @@ A change is finished when all of these hold.
 - Works at 390px, 768px, 1280px and 1920px wide.
 - No horizontal page scroll at any width.
 - At least a 16px gutter at every width.
-- The rail collapses to a top bar below 1080px; the model drops behind the text.
+- The rail collapses to a top bar below 1080px. The model never goes behind the
+  text there: it takes the lower part of the first screen, then each section
+  with a view (Now, Research, For fun, Connect) opens on a stage held under the
+  bar while its text scrolls beneath, and nothing is drawn between stages.
 
 **Accessibility**
 - Every control reachable and operable by keyboard, with a visible focus ring.

docs/mobile-handoff.md

@@ -1,5 +1,18 @@
 # Handoff: the mobile overhaul
 
+> **Status, 2 October 2026 (later the same day).** On branch `mobile-overhaul`,
+> not pushed. Of three mockups (figures, openers, stage) Evyatar chose **C, the
+> stage**: each section with a view opens on a block held under the bar
+> (`position: sticky`, 44svh) while its text scrolls beneath; the one canvas
+> moves into whichever block is on screen and nothing is drawn between them.
+> For fun follows the scroll: the row passing just under the stage chooses the
+> view (his request, instead of a "Show the data" button). Phone framings are
+> `phoneFrames` in `src/scene/frames.js`. Phones also draw a third of the
+> capillaries and every third Lotto draw. The light fix (a
+> `lostpointercapture` bubbling up from the button's labels) is unconfirmed on
+> iOS: the Simulator runtime still has to be installed. Desktop was checked
+> pixel-identical to `main`. Everything below is the original brief.
+
 Written 2 October 2026, at the end of the session that built the Research
 vasculature, the For fun section and the Connect tracts. **The desktop site is
 approved and live. The phone experience is not, and needs a proper redesign,

index.html

@@ -47,14 +47,6 @@
       #more-papers { display: none; }
     </style>
   </noscript>
-  <!-- Mockup round only: ?m=a|b|c picks the phone layout, and is remembered. -->
-  <script>
-    (function () {
-      var m = (location.search.match(/[?&]m=([abc])/) || [])[1]
-      try { if (m) localStorage.setItem('mobile-mockup', m); else m = localStorage.getItem('mobile-mockup') } catch (e) {}
-      document.documentElement.classList.add('m-' + (m || 'a'))
-    })()
-  </script>
 </head>
 <body>
   <a class="skip" href="#main">Skip to content</a>

src/content/render.js

@@ -39,13 +39,12 @@ const eyebrow = (i) => `<span class="tag"><em aria-hidden="true">${n2(i)} — </
 const head = (i, html) => `<h2 id="${esc(C.sections[i].id)}-title">${html}</h2>`
 
 /**
- * Where a phone shows the model: a block of its own in each section that has
- * a view, which the canvas moves into while it is on screen. Above 1080px the
- * model sits beside the column instead and these stay out of the layout.
- * `at` is where in the section the block stands (mockup round: each variant
- * shows one of them). The note carries a line about what the view shows.
+ * Where a phone shows the model: a stage of its own at the head of each
+ * section that has a view, which the canvas moves into while it is on screen.
+ * Above 1080px the model sits beside the column instead and these stay out of
+ * the layout. The note carries a line about what the view is showing.
  */
-const fig = (i, at) => `<div class="fig fig-${at}" data-frame="${i}" aria-hidden="true"><span class="fig-note"></span></div>`
+const fig = (i) => `<div class="fig" data-frame="${i}" aria-hidden="true"><span class="fig-note"></span></div>`
 
 /**
  * Structured data. The page's whole job in search is to be the answer to this
@@ -133,16 +132,15 @@ function lede () {
       <p class="lede-p">${C.person.thesis}</p>
       <p class="sub">${aff}</p>
     </div>
-    ${fig(0, 'lede')}`
+    ${fig(0)}`
 }
 
 function now (i) {
   return `
-    ${fig(i, 'top')}
+    ${fig(i)}
     <div class="col">
       ${eyebrow(i)}
       ${head(i, C.now.heading)}
-      ${fig(i, 'in')}
       ${C.now.paragraphs.map((p) => `<p class="body">${p}</p>`).join('\n      ')}
       <p class="note">${C.now.note}</p>
     </div>`
@@ -162,11 +160,10 @@ function entry (e) {
 
 function research (i) {
   return `
-    ${fig(i, 'top')}
+    ${fig(i)}
     <div class="col">
       ${eyebrow(i)}
       ${head(i, C.research.heading)}
-      ${fig(i, 'in')}
       <p class="body">${C.research.intro}</p>
       <ul class="entries" role="list">${C.research.entries.map(entry).join('')}
       </ul>
@@ -237,11 +234,10 @@ function papers (i) {
 
 function fun (i) {
   return `
-    ${fig(i, 'top')}
+    ${fig(i)}
     <div class="col">
       ${eyebrow(i)}
       ${head(i, C.fun.heading)}
-      ${fig(i, 'in')}
       <ul class="entries" role="list">${C.projects.map(project).join('')}
       </ul>
     </div>
@@ -257,11 +253,10 @@ function contact (i) {
     .map((l) => `<li><a href="${esc(l.href)}"${offsite(l.href)}>${esc(l.label)}</a></li>`)
     .join('')
   return `
-    ${fig(i, 'top')}
+    ${fig(i)}
     <div class="col">
       ${eyebrow(i)}
       ${head(i, esc(C.contact.heading))}
-      ${fig(i, 'in')}
       <p class="body">${esc(C.contact.body)}</p>
       <ul class="links" role="list">${links}</ul>
     </div>`

src/main.js

@@ -128,7 +128,7 @@ addEventListener('scroll', trackSection, { passive: true })
 
 /**
  * Below the layout change there is no side for the model to stand on, so each
- * section with a view has a block of its own (.fig) and the one canvas moves
+ * section with a view has a stage of its own (.fig) and the one canvas moves
  * into whichever block is coming on screen. Moving the element keeps its GL
  * context, and inside a block it scrolls with the page natively. The framing
  * follows the block rather than the section the reader is in, and nothing is
@@ -141,22 +141,12 @@ const nearness = new Map()
 const visible = new Set()
 let host = null
 
-/** Mockup round: which of the three layouts this page is showing. */
-const variant = (document.documentElement.className.match(/\bm-([abc])\b/) || [])[1] || 'a'
-
-/**
- * How each layout wants the view placed in its block, as a vertical shift of
- * the image in normalised coordinates: an opener keeps its heading's room
- * clear at the foot of the block.
- */
-const LENS = { a: 0, b: 0.3, c: 0 }
-
 function hostFig (fig) {
   if (fig === host) return
   host = fig
   fig.prepend(canvas)
   hostNote = fig.querySelector('.fig-note')
-  scene.setLens?.({ shift: Number(fig.dataset.frame) === FUN ? 0 : LENS[variant], phone: true })
+  scene.setPhone?.(true)
   scene.setFrame(Number(fig.dataset.frame))
   measureFun()
 }
@@ -195,22 +185,14 @@ phone.addEventListener('change', () => {
   }
   canvasHome.parent.insertBefore(canvas, canvasHome.next)
   host = null
-  scene.setLens?.({ shift: 0 })
+  read(null)
+  scene.setPhone?.(false)
   scene.setFrame(active)
   measureFun()
 })
 
 let hostNote = null
 
-// Mockup round only: the chooser between the three phone layouts.
-{
-  const chooser = document.createElement('nav')
-  chooser.className = 'mock-switch'
-  chooser.setAttribute('aria-label', 'Mockup layouts')
-  chooser.innerHTML = ['a', 'b', 'c'].map((m) => `<a href="?m=${m}"${m === variant ? ' class="on"' : ''}>${m}</a>`).join('')
-  document.body.append(chooser)
-}
-
 addEventListener('pointermove', (event) => {
   scene.setPointer((event.clientX / innerWidth - 0.5) * 2, (event.clientY / innerHeight - 0.5) * 2)
 }, { passive: true })
@@ -242,6 +224,7 @@ function resize () {
   const rail = document.querySelector('.rail')
   if (rail) document.documentElement.style.setProperty('--bar-h', `${Math.ceil(rail.getBoundingClientRect().height)}px`)
   measureFun()
+  watchReading()
   rules.resize()
   trackSection()
 }
@@ -253,9 +236,8 @@ addEventListener('orientationchange', resize)
 /**
  * At rest the section's model is its general view. Pointing at a project, or
  * tabbing to its link, puts that project's description in the caption under
- * the model, and the two with data behind them bring up their own views. With
- * no hover to point with, the view takes turns on its own while the section is
- * on screen, so a phone still sees both.
+ * the model, and the two with data behind them bring up their own views. A
+ * phone has no pointing, and reads the list as it scrolls instead (below).
  */
 const projectRows = [...document.querySelectorAll('.project')]
 const vizRows = projectRows.filter((row) => row.dataset.viz)
@@ -323,30 +305,41 @@ for (const row of projectRows) {
 showViz(null)
 
 /**
- * On a phone there is no pointing, so a project with data behind it carries a
- * button that brings its view up in the section's block, and its title stays
- * the link it always was. Tapping it again, or another, puts the view back.
+ * On a phone there is no pointing, but the section's stage holds at the top
+ * of the screen while its list scrolls up beneath it. So the row passing just
+ * under the stage is the one being read, and the stage shows its view: a
+ * project with data brings its own up, any other puts the landscape back. In
+ * the gaps between rows the last one read keeps the stage, and above the
+ * first, while the heading is still being read, the landscape has it.
  */
-let picked = null
-const peeks = vizRows.map((row) => {
-  const button = document.createElement('button')
-  button.type = 'button'
-  button.className = 'peek'
-  button.setAttribute('aria-pressed', 'false')
-  button.textContent = 'Show the data'
-  button.addEventListener('click', () => pick(picked === row ? null : row))
-  row.querySelector('h3').after(button)
-  return button
-})
+let reading = null
+let readingWatch = null
 
-function pick (row) {
-  picked = row
-  showViz(row?.dataset.viz ?? null)
+function read (row) {
+  if (row === reading) return
+  reading = row
   shownLive = null
-  vizRows.forEach((r, i) => {
-    peeks[i].setAttribute('aria-pressed', String(r === row))
-    peeks[i].textContent = r === row ? 'Showing, above' : 'Show the data'
-  })
+  showViz(row?.dataset.viz ?? null)
+}
+
+/**
+ * The reading line, a pixel tall, a little below the stage's foot. Its place
+ * depends on the bar and the screen's height, so it is drawn again on resize.
+ */
+function watchReading () {
+  readingWatch?.disconnect()
+  if (!phone.matches || !projectRows.length) return
+  const rail = document.querySelector('.rail')
+  const stage = funSection?.querySelector('.fig')
+  const foot = (rail?.getBoundingClientRect().height ?? 0) + (stage?.getBoundingClientRect().height ?? 0) + 16
+  const line = Math.min(innerHeight - 2, Math.round(foot))
+  readingWatch = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) read(entry.target)
+      else if (entry.target === projectRows[0] && entry.boundingClientRect.top > line) read(null)
+    }
+  }, { rootMargin: `${-line}px 0px ${-(innerHeight - line - 1)}px 0px` })
+  for (const row of projectRows) readingWatch.observe(row)
 }
 
 /**
@@ -362,11 +355,9 @@ document.fonts?.ready.then(() => measureFun())
 
 function measureFun () {
   if (!funSection || !projectRows.length) return
-  // On a phone the views fill their own block, inside a margin, and leave
-  // the foot of an opener to its heading.
+  // On a phone the views fill their own stage, inside a margin.
   if (phone.matches) {
-    const foot = variant === 'b' ? -0.05 : -0.74
-    scene.setFitBox?.({ top: 0.7, bottom: foot, left: -0.84, right: 0.84 })
+    scene.setFitBox?.({ top: 0.7, bottom: -0.74, left: -0.84, right: 0.84 })
     return
   }
   const origin = funSection.getBoundingClientRect().top
@@ -490,7 +481,7 @@ function tick (now) {
   // a phone at the head of its block.
   const onPhone = phone.matches
   const liveLine = onPhone ? (Number(host?.dataset.frame) === FUN ? hostNote : null) : captionLive
-  const describing = onPhone ? Boolean(picked) : Boolean(pointedRow?.dataset.viz) && active === FUN
+  const describing = onPhone ? Boolean(reading?.dataset.viz) : Boolean(pointedRow?.dataset.viz) && active === FUN
   if (describing && liveLine) {
     const live = scene.live ?? ''
     if (live !== shownLive) {

src/scene/index.js

@@ -272,11 +272,9 @@ export function createScene ({ canvas, cool, warm, cord, ink, dim, label, ground
   brain.rotation.set(0.06, wideFrames[0].spin, 0)
 
   // --- state ------------------------------------------------------------
-  /** The framings in use: the wide ones, or a phone's (see setLens). */
+  /** The framings in use: the wide ones, or a phone's (see setPhone). */
   let frames = wideFrames
   let frame = 0
-  /** Vertical shift of the image, in normalised coordinates (see setLens). */
-  let lensShift = 0
   let hotMix = frames[0].hot
   const pointer = { x: 0, y: 0 }
   const smoothed = { x: 0, y: 0 }
@@ -382,14 +380,6 @@ export function createScene ({ canvas, cool, warm, cord, ink, dim, label, ground
     }).catch((error) => console.warn(`Vessel geometry unavailable: ${error.message}`))
   }
 
-  function project () {
-    camera.updateProjectionMatrix()
-    // The principal point's offset lives in the third column; a positive
-    // shift there moves the whole image down, so this moves it up.
-    camera.projectionMatrix.elements[9] -= lensShift
-    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert()
-  }
-
   return {
     setFrame (index) {
       frame = Math.max(0, Math.min(frames.length - 1, index))
@@ -440,21 +430,14 @@ export function createScene ({ canvas, cool, warm, cord, ink, dim, label, ground
       // a narrow window shows more sky rather than less brain.
       const widen = aspect < REFERENCE_ASPECT ? REFERENCE_ASPECT / aspect : 1
       camera.fov = 2 * Math.atan(Math.tan((BASE_FOV * Math.PI) / 360) * widen) * (180 / Math.PI)
-      project()
+      camera.updateProjectionMatrix()
       shared.uPixelRatio.value = renderer.getPixelRatio()
       fitFun()
     },
 
-    /**
-     * Moves the image up by `shift` (normalised device units) without turning
-     * the camera, the way a shifted lens does: on a phone an opener keeps the
-     * foot of its block for the heading set over it.
-     */
-    setLens ({ shift = 0, phone = false } = {}) {
-      frames = phone ? phoneFrames : wideFrames
-      if (shift === lensShift) { fitFun(); return }
-      lensShift = shift
-      project()
+    /** Uses the framings composed for a phone's full-width stage, or not. */
+    setPhone (on) {
+      frames = on ? phoneFrames : wideFrames
       fitFun()
     },
 

src/styles/components.css

@@ -358,47 +358,3 @@ html.is-recovering .stim .lamp::after { background: var(--fade); opacity: 0.55;
   footer { padding-bottom: calc(var(--lead-in) + 78px + env(safe-area-inset-bottom, 0px)); }
 }
 
-/* On a phone, the projects with data behind them show it by a button of
-   their own; with a pointer, hovering the row does the same. */
-.peek { display: none; }
-@media (max-width: 1080px) {
-  .peek {
-    display: inline-block;
-    margin-top: 0.7em;
-    padding: 0.55em 0.8em;
-    border: 1px solid var(--rule);
-    border-radius: 2px;
-    font: 400 var(--t-label)/1.2 var(--mono);
-    letter-spacing: var(--track-meta);
-    text-transform: uppercase;
-    background: none;
-    color: var(--ink-2);
-    -webkit-tap-highlight-color: transparent;
-  }
-  .peek[aria-pressed="true"] { color: var(--accent); border-color: currentColor; }
-}
-
-/* Mockup round only: the a / b / c chooser for the phone layouts. */
-.mock-switch { display: none; }
-@media (max-width: 1080px) {
-  .mock-switch {
-    position: fixed;
-    right: 0;
-    top: 42%;
-    z-index: 6;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .mock-switch a {
-    display: grid;
-    place-items: center;
-    width: 26px; height: 30px;
-    border: 1px solid var(--rule);
-    background: rgba(13, 17, 22, 0.72);
-    font: 400 var(--t-label)/1 var(--mono);
-    text-transform: uppercase;
-    color: var(--ink-3);
-  }
-  .mock-switch a.on { color: var(--ink); border-color: var(--ink-3); }
-}