From 8a3b23583173cda8a03db538db09e4b264ed064a Mon Sep 17 00:00:00 2001
From: Cameron <cameron@pfiffer.org>
Date: Fri, 25 Sep 2026 21:05:11 -0700
Subject: [PATCH] Keep the tide pool's sharp band across the middle of the
 view, moving it to a machine only while following it and easing it there, and
 stop the resolution dropping below one pixel a point when frames run slow.

---
 public/tide-pool.js          | 11 +++++++----
 src/components/tide-pool.tsx |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/tide-pool.js b/public/tide-pool.js
index ae4f668..a70017e 100644
--- a/public/tide-pool.js
+++ b/public/tide-pool.js
@@ -1601,8 +1601,11 @@ async function initialize() {
       if (p.colored && p.mesh.instanceColor) p.mesh.instanceColor.needsUpdate = true;
     }
     if (tilt) {
+      // The sharp band lies across the middle of the view. It moves to a machine only while the view follows it, never
+      // far from the middle, and eases there rather than jumping, so a machine picked near the edge doesn't blur the rest.
       let at = .5;
-      if (focus) { v1.set(focus.x, SPECIES[focus.sp].kind === 'swimmer' ? focus.y : footAt(world, focus), focus.z).project(camera); at = clamp((v1.y + 1) / 2, .2, .8); }
+      if (focus && following) { v1.set(focus.x, SPECIES[focus.sp].kind === 'swimmer' ? focus.y : footAt(world, focus), focus.z).project(camera); at = clamp((v1.y + 1) / 2, .32, .68); }
+      tiltFocus += (at - tiltFocus) * .08; at = tiltFocus;
       const amount = clamp(.55 + (view.zoom - 1.4) * .15, .55, 1) * 2.3 * renderer.getPixelRatio();
       // On a tall screen the sharp band takes a larger share of the height, so a phone keeps as much of the shelf in focus.
       const band = .13 * clamp(stage.clientHeight / Math.max(1, stage.clientWidth) * .75, 1, 1.8);
@@ -1832,7 +1835,7 @@ async function initialize() {
     while (ticker.children.length > 4) ticker.firstElementChild.remove();
   }
 
-  let readoutClock = 0, lastFrame = 0;
+  let readoutClock = 0, lastFrame = 0, tiltFocus = .5;
   function loop(now) {
     frame = 0;
     if (!visible || document.hidden || lost) { previous = 0; return; }
@@ -1879,13 +1882,13 @@ async function initialize() {
   const BUDGET = mobile ? 2.4e6 : 4.2e6;
   let quality = 1, frameTime = 1 / 60, qualityClock = 3;
   const pixelRatio = (width, height) =>
-    Math.max(.75, Math.min(devicePixelRatio, mobile ? 1.5 : 2, Math.sqrt(BUDGET / Math.max(1, width * height))) * quality);
+    Math.max(Math.min(devicePixelRatio, 1), Math.min(devicePixelRatio, mobile ? 1.5 : 2, Math.sqrt(BUDGET / Math.max(1, width * height))) * quality);
   function tuneQuality(dt) {
     frameTime += (dt - frameTime) * .05;
     qualityClock -= dt;
     if (qualityClock > 0) return;
     qualityClock = 3;
-    const next = frameTime > 1 / 40 ? Math.max(.6, quality * .85) : frameTime < 1 / 55 ? Math.min(1, quality * 1.1) : quality;
+    const next = frameTime > 1 / 40 ? Math.max(.8, quality * .9) : frameTime < 1 / 55 ? Math.min(1, quality * 1.1) : quality;
     if (Math.abs(next - quality) > .01) { quality = next; resize(); }
   }
   function resize() {
diff --git a/src/components/tide-pool.tsx b/src/components/tide-pool.tsx
index 70fde96..fbf096f 100644
--- a/src/components/tide-pool.tsx
+++ b/src/components/tide-pool.tsx
@@ -141,7 +141,7 @@ export function TidePoolContent() {
       </details>
       {/* Lets the three.js add-ons resolve the same pinned module the page already uses. */}
       <script type="importmap" dangerouslySetInnerHTML={{ __html: JSON.stringify({ imports: { three: "/public/tide-pool-vendor/three.module.js" } }) }}/>
-      <script type="module" src="/public/tide-pool.js?v=68"></script>
+      <script type="module" src="/public/tide-pool.js?v=69"></script>
     </main>
   );
 }
-- 
2.51.2