From c96eb0e73804cda824154e3f919f4ef6efb92ef6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20H=C3=A4gele?= <kasper@picqer.com>
Date: Tue, 29 Sep 2026 21:36:44 +0200
Subject: [PATCH] feat(app,web): ease what the map shows by zoom, on one hex
 system

Everything the map showed or hid by zoom was a step: a threshold
crossed, the data rebuilt, the thing there or gone in one frame. A
share between 0 and 1 is now handed to the style as a zoom expression,
so the map eases it while the fingers move.

The app takes the server's cell sizes, one per zoom level at about
28 px, and gives up its ten bands in metres. Two sizes are on the map
while one takes over from the other. The points and the earlier rides
fade in over a hex that stays at full strength, the cell names fade in,
and Auto takes the place of Both. In 3D the pillars wait for zoom 19.

The numbers are Kasper's, picked in a mockup on 29 September 2026, and
live in zoomfade.js, one file on both surfaces.

Closes #634

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 AGENTS.md                                  |   1 +
 app/changelog.json                         |   7 +
 app/src/__tests__/hexgrid.test.js          |  56 ++--
 app/src/__tests__/hexlabels.test.js        |  25 +-
 app/src/__tests__/huntmap-contract.test.js |   2 +-
 app/src/__tests__/huntmap-zoomkeys.test.js |  26 ++
 app/src/__tests__/maplayers.test.js        |  62 +++--
 app/src/__tests__/rides.test.js            |  14 +-
 app/src/__tests__/settings.test.js         |   2 +-
 app/src/__tests__/zoomfade.test.js         | 278 +++++++++++++++++++
 app/src/app.js                             |   8 +-
 app/src/hexgrid.js                         |  57 ++--
 app/src/hexlabels.js                       |  20 +-
 app/src/huntmap.js                         | 180 ++++++++++---
 app/src/maplayers.js                       |  46 ++--
 app/src/noise.js                           |   2 +-
 app/src/rides.js                           |   9 -
 app/src/settings.js                        |   2 +-
 app/src/styles/app.css                     |   2 +-
 app/src/zoomfade.js                        | 208 +++++++++++++++
 changelog.d/2026-09-29-03-zoom-eases.json  |   7 +
 docs/2026-06-29-hex-resolution-zoom.md     |   5 +
 docs/2026-09-29-zoom-transitions.md        |  88 ++++++
 web/auth.test.js                           |   4 +-
 web/changelog.json                         |   7 +
 web/e2e/auth.spec.js                       |   6 +-
 web/e2e/ignorelist.spec.js                 |   4 +-
 web/e2e/receptionticker.spec.js            |   7 +-
 web/e2e/ui.spec.js                         |  12 +-
 web/e2e/view3d.spec.js                     |  21 +-
 web/e2e/zoomfade.spec.js                   | 161 +++++++++++
 web/index.html                             |   2 +-
 web/map.js                                 | 120 ++++++---
 web/mapcore.js                             | 105 ++++++--
 web/maplayers.js                           |  46 ++--
 web/maplayers.test.js                      |  87 ++++--
 web/parity.test.js                         |   4 +-
 web/zoomfade.js                            | 208 +++++++++++++++
 web/zoomfade.test.js                       | 297 +++++++++++++++++++++
 39 files changed, 1891 insertions(+), 307 deletions(-)
 create mode 100644 app/src/__tests__/huntmap-zoomkeys.test.js
 create mode 100644 app/src/__tests__/zoomfade.test.js
 create mode 100644 app/src/zoomfade.js
 create mode 100644 changelog.d/2026-09-29-03-zoom-eases.json
 create mode 100644 docs/2026-09-29-zoom-transitions.md
 create mode 100644 web/e2e/zoomfade.spec.js
 create mode 100644 web/zoomfade.js
 create mode 100644 web/zoomfade.test.js

diff --git a/AGENTS.md b/AGENTS.md
index e0c77960..6c9a54c8 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -68,6 +68,7 @@ app/                  Mobile hunter PWA (Vite ES-module)
     signal.js         Thermal tier helpers (snrTier / rssiTier)
     huntmap.js        Leaflet map: signal points + hex-heat layer
     hexgrid.js        Hex-grid binning geometry
+    zoomfade.js       What the map shows at a zoom, as shares the style eases (#634)
     transport.js      BLE transport (ported from CoreDrive RX)
     frames.js         0x88 RX-log frame decoder
     gps.js            Phone Geolocation wrapper
diff --git a/app/changelog.json b/app/changelog.json
index b2ca7c2a..c60eab22 100644
--- a/app/changelog.json
+++ b/app/changelog.json
@@ -1,4 +1,11 @@
 [
+  {
+    "id": "2026-09-29-zoom-eases",
+    "date": "2026-09-29",
+    "where": "both",
+    "title": "Zooming eases instead of jumping",
+    "body": "Cells change size gradually and points fade in as you zoom. Auto replaces Both. In 3D the pillars appear at the closest zoom."
+  },
   {
     "id": "2026-09-27-hud-bottom-space",
     "date": "2026-09-27",
diff --git a/app/src/__tests__/hexgrid.test.js b/app/src/__tests__/hexgrid.test.js
index 963091e6..ed78944e 100644
--- a/app/src/__tests__/hexgrid.test.js
+++ b/app/src/__tests__/hexgrid.test.js
@@ -1,35 +1,39 @@
 import { describe, it, expect } from 'vitest'
-import { hexSizeForRes, hexResForZoom } from '../hexgrid.js'
+import { hexSizeForRes, hexResForZoom, HEX_TARGET_PX, HEX_MAX_RES } from '../hexgrid.js'
 
-describe('hexSizeForRes', () => {
-  it('keeps the existing coarse bands', () => {
-    expect(hexSizeForRes(11)).toBe(40)
-    expect(hexSizeForRes(10)).toBe(90)
-    expect(hexSizeForRes(9)).toBe(180)
-    expect(hexSizeForRes(7)).toBe(720)
-    expect(hexSizeForRes(6)).toBe(1500)
+describe('hexSizeForRes (#634: the server\'s sizes)', () => {
+  it('halves with every resolution', () => {
+    for (let res = 3; res < 21; res++) expect(hexSizeForRes(res) / hexSizeForRes(res + 1)).toBeCloseTo(2, 12)
   })
-  it('adds finer cells down to 3 m for the zoomed-in resolutions', () => {
-    expect(hexSizeForRes(12)).toBe(20)
-    expect(hexSizeForRes(13)).toBe(10)
-    expect(hexSizeForRes(14)).toBe(5)
-    expect(hexSizeForRes(15)).toBe(3)
-    expect(hexSizeForRes(16)).toBe(3) // clamps at the finest band
+  it('matches server/internal/geo/hexgrid.go: 14 px of Mercator units at that Leaflet zoom', () => {
+    expect(hexSizeForRes(0)).toBeCloseTo(14 * 156543.03392, 6)
+    expect(hexSizeForRes(14)).toBeCloseTo(133.765, 3)
+    expect(hexSizeForRes(18)).toBeCloseTo(8.3603, 4)
+  })
+  it('draws a cell 28 px tall at the zoom it belongs to', () => {
+    // Point to point is twice the circumradius. MapLibre zoom z shows
+    // 156543.03392 / 2^(z + 1) Mercator units per pixel.
+    for (const z of [5, 11, 14, 19]) {
+      const res = hexResForZoom(z)
+      const unitsPerPx = 156543.03392 / Math.pow(2, z + 1)
+      expect(2 * hexSizeForRes(res) / unitsPerPx, `zoom ${z}`).toBeCloseTo(HEX_TARGET_PX, 9)
+    }
   })
 })
 
-describe('hexResForZoom', () => {
-  it('keeps the existing coarse mapping', () => {
-    expect(hexResForZoom(15)).toBe(11)
-    expect(hexResForZoom(14)).toBe(10)
-    expect(hexResForZoom(13)).toBe(10)
-    expect(hexResForZoom(9)).toBe(8)
-    expect(hexResForZoom(6)).toBe(6)
+describe('hexResForZoom (#634: one size per zoom level)', () => {
+  it('is the Leaflet zoom, one above MapLibre\'s, rounded', () => {
+    expect(hexResForZoom(13)).toBe(14)
+    expect(hexResForZoom(13.49)).toBe(14)
+    expect(hexResForZoom(13.5)).toBe(15)
+    expect(hexResForZoom(14)).toBe(15)
+  })
+  it('stops at 3 and at the app\'s finest, 21', () => {
+    expect(hexResForZoom(0)).toBe(3)
+    expect(hexResForZoom(20)).toBe(21)
+    expect(hexResForZoom(22)).toBe(HEX_MAX_RES)
   })
-  it('goes finer each level past 15, down to 3 m at max zoom', () => {
-    expect(hexResForZoom(16)).toBe(12) // 20 m
-    expect(hexResForZoom(17)).toBe(13) // 10 m
-    expect(hexResForZoom(18)).toBe(14) // 5 m
-    expect(hexResForZoom(19)).toBe(15) // 3 m
+  it('ends finer than the 3 units the old bands ended on', () => {
+    expect(hexSizeForRes(HEX_MAX_RES)).toBeLessThan(3)
   })
 })
diff --git a/app/src/__tests__/hexlabels.test.js b/app/src/__tests__/hexlabels.test.js
index 02eb02e0..20d75d55 100644
--- a/app/src/__tests__/hexlabels.test.js
+++ b/app/src/__tests__/hexlabels.test.js
@@ -1,14 +1,17 @@
 import { describe, it, expect } from 'vitest'
-import { HEX_LABEL_MIN_ZOOM, HEX_LABEL_MAX, hexCellLabel, showHexLabels, planHexLabels } from '../hexlabels.js'
+import { HEX_LABEL_MAX, hexCellLabel, planHexLabels } from '../hexlabels.js'
 import { hexCellAt } from '../hexgrid.js'
 
 const at = (s) => `2026-09-04T13:${s}:00Z`
 const rec = (id, kind, rx_at) => ({ sender_id: id, sender_kind: kind, rx_at })
 
 describe('hexCellLabel', () => {
-  it('lists the 4-character prefixes of the nodes heard in the cell, newest first', () => {
+  // One prefix since #634: a cell is 28 px tall at every zoom and about 24
+  // wide, which holds four characters at 10 px and no more. The count of the
+  // others stands on a line of its own under it.
+  it('names the node heard last by its 4-character prefix, and counts the others under it', () => {
     const rows = [rec('7e76aa'.padEnd(64, '0'), 'advert_pubkey', at('10')), rec('4ac3bb', 'discover_pubkey', at('20')), rec('a1b2cc', 'relay', at('15'))]
-    expect(hexCellLabel(rows)).toBe('4ac3 a1b2 7e76')
+    expect(hexCellLabel(rows)).toBe('4ac3\n+2')
   })
   it('names a node once, however many receptions and id variants it has', () => {
     const rows = [rec('7e76aa'.padEnd(64, '0'), 'advert_pubkey', at('10')), rec('7e76aabb', 'discover_pubkey', at('11')), rec('7E76AA', 'relay', at('12'))]
@@ -21,10 +24,10 @@ describe('hexCellLabel', () => {
     expect(hexCellLabel(rows)).toBe('c3d4')
     expect(hexCellLabel([rec('4a', 'direct_hash', at('10'))])).toBe('')
   })
-  it('stops at three, and says how many more there were', () => {
+  it('stops at one, and says how many more there were', () => {
     const rows = ['aaaa11', 'bbbb22', 'cccc33', 'dddd44', 'eeee55'].map((id, i) => rec(id, 'advert_pubkey', at(String(10 + i).padStart(2, '0'))))
-    expect(HEX_LABEL_MAX).toBe(3)
-    expect(hexCellLabel(rows)).toBe('eeee dddd cccc +2')
+    expect(HEX_LABEL_MAX).toBe(1)
+    expect(hexCellLabel(rows)).toBe('eeee\n+4')
   })
   it('is empty for nothing', () => {
     expect(hexCellLabel([])).toBe('')
@@ -32,16 +35,6 @@ describe('hexCellLabel', () => {
   })
 })
 
-describe('showHexLabels', () => {
-  // Four characters at 10px need a cell wider than the label; at zoom 16 a
-  // cell is about 110 m and the label fits with room, at 15 it does not.
-  it('shows labels from zoom 16, not below', () => {
-    expect(HEX_LABEL_MIN_ZOOM).toBe(16)
-    expect(showHexLabels(15.9)).toBe(false)
-    expect(showHexLabels(16)).toBe(true)
-  })
-})
-
 describe('planHexLabels', () => {
   // One marker per cell, kept while the cell stays in view. The map used to
   // rebuild every label marker when any one text changed, so each reception
diff --git a/app/src/__tests__/huntmap-contract.test.js b/app/src/__tests__/huntmap-contract.test.js
index 49d126b5..00dd7b3b 100644
--- a/app/src/__tests__/huntmap-contract.test.js
+++ b/app/src/__tests__/huntmap-contract.test.js
@@ -52,7 +52,7 @@ describe('applyLayerVisibility covers every layer layerVisibility decides', () =
     // one of them names the full set. hex-labels is the single exception: it is
     // not a style layer but DOM markers, applied through drawHexLabels().
     // The noise layer (#410) is decided on top of it, by withNoise.
-    const decided = Object.keys(withNoise(layerVisibility({ mode: 'both', mode3D: true }), true)).filter((id) => id !== 'hex-labels')
+    const decided = Object.keys(withNoise(layerVisibility({ mode: 'auto', mode3D: true }), true)).filter((id) => id !== 'hex-labels')
     expect([...applied].sort()).toEqual([...decided].sort())
   })
 })
diff --git a/app/src/__tests__/huntmap-zoomkeys.test.js b/app/src/__tests__/huntmap-zoomkeys.test.js
new file mode 100644
index 00000000..1db3afb9
--- /dev/null
+++ b/app/src/__tests__/huntmap-zoomkeys.test.js
@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { zoomKeys } from '../huntmap.js'
+import { HEX_MAX_RES } from '../hexgrid.js'
+
+// What a zoom step asks of the draw while the fingers move (#634). The data
+// key names what has to be built at all; the cells key what has to be rebuilt
+// at another size. Only the first needs the full draw.
+const view = { mode: 'auto', mode3D: false }
+const keys = (z) => zoomKeys(z, view, HEX_MAX_RES)
+
+describe('zoomKeys', () => {
+  it('moves the cells key at the half zoom where the labels and the noise change size', () => {
+    // 13.4 and 13.6 share a pair of hex layers, but the size drawn in full is
+    // 14 below 13.5 and 15 above it.
+    expect(keys(13.4).cells).not.toBe(keys(13.6).cells)
+  })
+  it('moves the cells key at the whole zoom where the pair of hex layers moves', () => {
+    expect(keys(13.9).cells).not.toBe(keys(14.1).cells)
+  })
+  it('keeps the data key while no layer\'s share leaves nothing', () => {
+    expect(keys(13.6).data).toBe(keys(14.1).data)
+  })
+  it('moves the data key where the points arrive', () => {
+    expect(keys(13.2).data).not.toBe(keys(13.3).data)
+  })
+})
diff --git a/app/src/__tests__/maplayers.test.js b/app/src/__tests__/maplayers.test.js
index c010d7c8..45413300 100644
--- a/app/src/__tests__/maplayers.test.js
+++ b/app/src/__tests__/maplayers.test.js
@@ -9,8 +9,8 @@ import { layerVisibility, pitchFor, pitchTransition, PITCH_3D, VIEW_STATES, VIEW
 const vis = (mode, mode3D) => layerVisibility({ mode, mode3D })
 
 describe('layerVisibility in 2D', () => {
-  it('both shows the flat hex and the flat points', () => {
-    expect(vis('both', false)).toMatchObject({ hex: true, points: true, 'hex-3d': false, 'points-3d': false })
+  it('auto shows the flat hex and the flat points', () => {
+    expect(vis('auto', false)).toMatchObject({ hex: true, points: true, 'hex-3d': false, 'points-3d': false })
   })
   it('hex shows only the flat hex', () => {
     expect(vis('hex', false)).toMatchObject({ hex: true, points: false })
@@ -19,7 +19,7 @@ describe('layerVisibility in 2D', () => {
     expect(vis('points', false)).toMatchObject({ hex: false, points: true })
   })
   it('never shows a 3D layer in 2D', () => {
-    for (const m of ['both', 'hex', 'points']) {
+    for (const m of ['auto', 'hex', 'points']) {
       expect(vis(m, false)).toMatchObject({ 'hex-3d': false, 'points-3d': false })
     }
   })
@@ -32,17 +32,16 @@ describe('layerVisibility in 3D', () => {
   // write. The pillar's fragments lose the depth test and vanish. Drawing the
   // hex FLAT on the ground removes the occluder entirely while keeping the
   // coverage context under the pillars.
-  it('draws hex FLAT under the pillars when both layers are shown', () => {
-    expect(vis('both', true)).toMatchObject({
-      hex: true, 'hex-3d': false, 'points-3d': true, points: false,
+  // Since #634 the pillars arrive at zoom 19 only and the bars drop to 95%
+  // from there (zoomfade.js), so auto draws the bars extruded, not flat.
+  it('draws the hex extruded in auto, with the pillar layer on beside it', () => {
+    expect(vis('auto', true)).toMatchObject({
+      hex: false, 'hex-3d': true, 'points-3d': true, points: false,
     })
   })
 
-  it('never shows extruded hex and pillars at the same time', () => {
-    for (const m of ['both', 'hex', 'points']) {
-      const v = vis(m, true)
-      expect(v['hex-3d'] && v['points-3d']).toBe(false)
-    }
+  it('never draws the hex flat in 3D', () => {
+    for (const m of ['auto', 'hex', 'points']) expect(vis(m, true).hex).toBe(false)
   })
 
   it('keeps the extruded bars when hex is the only layer — that is what 3D hex is for', () => {
@@ -58,16 +57,16 @@ describe('layerVisibility in 3D', () => {
   })
 
   it('never shows a flat point layer in 3D', () => {
-    for (const m of ['both', 'hex', 'points']) expect(vis(m, true).points).toBe(false)
+    for (const m of ['auto', 'hex', 'points']) expect(vis(m, true).points).toBe(false)
   })
 })
 
 describe('layerVisibility is total', () => {
   it('always answers for every layer it decides, so a caller cannot read undefined', () => {
-    for (const m of ['both', 'hex', 'points']) {
+    for (const m of ['auto', 'hex', 'points']) {
       for (const d of [true, false]) {
         const v = vis(m, d)
-        for (const k of ['hex', 'hex-3d', 'points', 'points-3d', 'hex-labels', 'pulse', 'pulse-3d']) {
+        for (const k of ['hex', 'hex-b', 'hex-3d', 'hex-3d-b', 'points', 'points-3d', 'hex-labels', 'pulse', 'pulse-3d']) {
           expect(typeof v[k], `${m}/${d} ${k}`).toBe('boolean')
         }
       }
@@ -76,6 +75,19 @@ describe('layerVisibility is total', () => {
   it('treats an unknown mode as the cold default (hex), not as nothing visible', () => {
     expect(vis('', false)).toMatchObject({ hex: true, points: false })
   })
+  // Two cell sizes are on the map while one takes over from the other (#634),
+  // so the hex is two layers, and the second follows the first in every view.
+  it('shows the second cell size wherever it shows the first', () => {
+    for (const m of ['auto', 'hex', 'points']) for (const d of [true, false]) {
+      const v = vis(m, d)
+      expect(v['hex-b'], `${m}/${d}`).toBe(v.hex)
+      expect(v['hex-3d-b'], `${m}/${d}`).toBe(v['hex-3d'])
+    }
+  })
+  it('reads both, the name auto had until #634, as auto', () => {
+    expect(vis('both', false)).toEqual(vis('auto', false))
+    expect(vis('both', true)).toEqual(vis('auto', true))
+  })
 })
 
 // #648: with the age fade gone, nothing in 3D said "this one just arrived".
@@ -85,18 +97,18 @@ describe('layerVisibility is total', () => {
 describe('the arrival pulse has a form per dimension (#648)', () => {
   it('rings on the ground in 2D, where the flat dots are', () => {
     expect(vis('points', false)).toMatchObject({ pulse: true, 'pulse-3d': false })
-    expect(vis('both', false)).toMatchObject({ pulse: true, 'pulse-3d': false })
+    expect(vis('auto', false)).toMatchObject({ pulse: true, 'pulse-3d': false })
   })
   it('flashes the pillar in 3D, where the dots are pillars', () => {
     expect(vis('points', true)).toMatchObject({ pulse: false, 'pulse-3d': true })
-    expect(vis('both', true)).toMatchObject({ pulse: false, 'pulse-3d': true })
+    expect(vis('auto', true)).toMatchObject({ pulse: false, 'pulse-3d': true })
   })
   it('does neither in hex mode, which draws no receptions to mark', () => {
     expect(vis('hex', false)).toMatchObject({ pulse: false, 'pulse-3d': false })
     expect(vis('hex', true)).toMatchObject({ pulse: false, 'pulse-3d': false })
   })
   it('never shows both forms at once', () => {
-    for (const m of ['both', 'hex', 'points']) {
+    for (const m of ['auto', 'hex', 'points']) {
       for (const d of [true, false]) {
         const v = vis(m, d)
         expect(v.pulse && v['pulse-3d'], `${m}/${d}`).toBe(false)
@@ -112,10 +124,10 @@ describe('VIEW_STATES / nextViewIndex (#258)', () => {
   it('has exactly the 5 states in the decided order, dropping 2D hex-only', () => {
     expect(VIEW_STATES).toEqual([
       { mode: 'points', mode3D: false },
-      { mode: 'both', mode3D: false },
+      { mode: 'auto', mode3D: false },
       { mode: 'hex', mode3D: true },
       { mode: 'points', mode3D: true },
-      { mode: 'both', mode3D: true },
+      { mode: 'auto', mode3D: true },
     ])
   })
   it('never contains the dropped 2D-hex-only combination', () => {
@@ -153,7 +165,7 @@ describe('VIEW_LABELS covers VIEW_STATES (#258)', () => {
     for (const l of Object.values(VIEW_LABELS)) expect(l).not.toContain('·')
   })
   it('gives 2D and 3D distinct keys for the same layer mode', () => {
-    expect(viewKey({ mode: 'both', mode3D: false })).not.toBe(viewKey({ mode: 'both', mode3D: true }))
+    expect(viewKey({ mode: 'auto', mode3D: false })).not.toBe(viewKey({ mode: 'auto', mode3D: true }))
   })
 })
 
@@ -220,12 +232,12 @@ describe('pitchTransition — which FAB taps move the camera', () => {
 // top would float at ground level under the pillar, so 3D keeps its drawing.
 describe('layerVisibility carries the hex labels', () => {
   it('shows them exactly when the flat hex layer is on, in 2D', () => {
-    expect(vis('both', false)['hex-labels']).toBe(true)
+    expect(vis('auto', false)['hex-labels']).toBe(true)
     expect(vis('hex', false)['hex-labels']).toBe(true)
     expect(vis('points', false)['hex-labels']).toBe(false)
   })
   it('never shows them in 3D', () => {
-    expect(vis('both', true)['hex-labels']).toBe(false)
+    expect(vis('auto', true)['hex-labels']).toBe(false)
     expect(vis('hex', true)['hex-labels']).toBe(false)
   })
 })
@@ -235,17 +247,17 @@ describe('layerVisibility carries the hex labels', () => {
 // reception, and in 3D the flat ring would sit on the ground under its pillar.
 describe('layerVisibility carries the pulse', () => {
   it('rings where the flat points are drawn', () => {
-    expect(vis('both', false).pulse).toBe(true)
+    expect(vis('auto', false).pulse).toBe(true)
     expect(vis('points', false).pulse).toBe(true)
   })
   it('does not ring in hex mode, where no point is drawn', () => {
     expect(vis('hex', false).pulse).toBe(false)
   })
   it('does not ring in 3D, under the pillars', () => {
-    for (const m of ['both', 'hex', 'points']) expect(vis(m, true).pulse).toBe(false)
+    for (const m of ['auto', 'hex', 'points']) expect(vis(m, true).pulse).toBe(false)
   })
   it('never disagrees with the flat point layer', () => {
-    for (const m of ['both', 'hex', 'points', '']) {
+    for (const m of ['auto', 'hex', 'points', '']) {
       for (const d of [true, false]) expect(vis(m, d).pulse).toBe(vis(m, d).points)
     }
   })
diff --git a/app/src/__tests__/rides.test.js b/app/src/__tests__/rides.test.js
index bc7d9e11..97fa0038 100644
--- a/app/src/__tests__/rides.test.js
+++ b/app/src/__tests__/rides.test.js
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { RIDE_GAP_MS, splitRides, currentRideStart, isBacklog, showBacklogPoints } from '../rides.js'
+import { RIDE_GAP_MS, splitRides, currentRideStart, isBacklog } from '../rides.js'
 
 const T0 = Date.parse('2026-09-04T13:10:00Z')
 const MIN = 60_000
@@ -51,15 +51,3 @@ describe('currentRideStart / isBacklog', () => {
     expect(isBacklog(rec(0), null)).toBe(false)
   })
 })
-
-describe('showBacklogPoints', () => {
-  // Kasper, 2026-09-04: outlines come back "reasonably soon" while zooming in.
-  // That was zoom 15 until the field said one pinch out already lost them
-  // (#668, 2026-09-21); 12 keeps them through town level.
-  it('draws backlog points from zoom 12, not below', () => {
-    expect(showBacklogPoints(11.9)).toBe(false)
-    expect(showBacklogPoints(12)).toBe(true)
-    expect(showBacklogPoints(14)).toBe(true)
-    expect(showBacklogPoints(18)).toBe(true)
-  })
-})
diff --git a/app/src/__tests__/settings.test.js b/app/src/__tests__/settings.test.js
index 17bf46c9..a12bb4ea 100644
--- a/app/src/__tests__/settings.test.js
+++ b/app/src/__tests__/settings.test.js
@@ -149,7 +149,7 @@ describe('loadViewIndex', () => {
     vi.stubGlobal('localStorage', storageWith({ 'core-hunter-view': 'points2d' }))
     expect(loadViewIndex()).toBe(0)
   })
-  it('falls back to both/2D (index 1) for a missing or unknown value', () => {
+  it('falls back to auto/2D (index 1) for a missing or unknown value', () => {
     vi.stubGlobal('localStorage', storageWith({}))
     expect(loadViewIndex()).toBe(1)
     vi.stubGlobal('localStorage', storageWith({ 'core-hunter-view': 'hex4d' }))
diff --git a/app/src/__tests__/zoomfade.test.js b/app/src/__tests__/zoomfade.test.js
new file mode 100644
index 00000000..ba896c1b
--- /dev/null
+++ b/app/src/__tests__/zoomfade.test.js
@@ -0,0 +1,278 @@
+import { describe, it, expect } from 'vitest'
+import {
+  ramp, pointShare, hexShare, backlogShare, labelShare, resForZoom, resPair, resShare, resBreaks,
+  zoomRamp, zoomSwitch, stepBreaks, sampledBreaks, hexBlend, STEP_EPS, LAYER_MODES,
+} from '../zoomfade.js'
+
+const MAX = 21
+
+describe('ramp', () => {
+  it('is 0 before, 1 after and a straight line between', () => {
+    const band = { from: 10, to: 12 }
+    expect(ramp(9, band)).toBe(0)
+    expect(ramp(10, band)).toBe(0)
+    expect(ramp(11, band)).toBe(0.5)
+    expect(ramp(12, band)).toBe(1)
+    expect(ramp(20, band)).toBe(1)
+  })
+  it('is a step when the band has no width', () => {
+    expect(ramp(18.99, { from: 19, to: 19 })).toBe(0)
+    expect(ramp(19, { from: 19, to: 19 })).toBe(1)
+  })
+})
+
+describe('the shares of 29 September 2026 (#634)', () => {
+  it('auto in 2D: the points come in from 13.25 to 18.25 over a hex that stays full', () => {
+    const v = { mode: 'auto', mode3D: false }
+    expect(pointShare(13.25, v)).toBe(0)
+    expect(pointShare(15.75, v)).toBe(0.5)
+    expect(pointShare(18.25, v)).toBe(1)
+    for (const z of [5, 13.25, 16, 18.25, 21]) expect(hexShare(z, v), `zoom ${z}`).toBe(1)
+  })
+  it('auto in 3D: the pillars arrive in one step at zoom 19, and the bars drop to 95%', () => {
+    const v = { mode: 'auto', mode3D: true }
+    expect(pointShare(18.99, v)).toBe(0)
+    expect(pointShare(19, v)).toBe(1)
+    expect(hexShare(18.99, v)).toBe(1)
+    expect(hexShare(19, v)).toBe(0.95)
+  })
+  it('hex and points draw one layer at full strength, whatever the zoom', () => {
+    for (const mode3D of [false, true]) for (const z of [5, 14, 19, 21]) {
+      expect(pointShare(z, { mode: 'points', mode3D })).toBe(1)
+      expect(hexShare(z, { mode: 'points', mode3D })).toBe(0)
+      expect(pointShare(z, { mode: 'hex', mode3D })).toBe(0)
+      expect(hexShare(z, { mode: 'hex', mode3D })).toBe(1)
+    }
+  })
+  it('reads an unknown mode as auto, so a stored value from before cannot blank the map', () => {
+    expect(LAYER_MODES).toEqual(['auto', 'hex', 'points'])
+    expect(pointShare(18.25, { mode: 'both', mode3D: false })).toBe(1)
+    expect(hexShare(18.25, { mode: undefined, mode3D: false })).toBe(1)
+  })
+  it('earlier rides come in from 11.25 to 18.75 in 2D, and with the pillars in 3D', () => {
+    expect(backlogShare(11.25, { mode3D: false })).toBe(0)
+    expect(backlogShare(15, { mode3D: false })).toBe(0.5)
+    expect(backlogShare(18.75, { mode3D: false })).toBe(1)
+    expect(backlogShare(5, { mode3D: true })).toBe(1)
+  })
+  it('cell names come in from 15.5 to 16.5', () => {
+    expect(labelShare(15.5)).toBe(0)
+    expect(labelShare(16)).toBe(0.5)
+    expect(labelShare(16.5)).toBe(1)
+  })
+  it('blends two cell sizes over 0.95 of a zoom level in 2D and 0.75 in 3D', () => {
+    expect(hexBlend(false)).toBe(0.95)
+    expect(hexBlend(true)).toBe(0.75)
+  })
+})
+
+describe('cell sizes: one per zoom level, the server\'s rule', () => {
+  it('is the Leaflet zoom, one above MapLibre\'s, rounded and clamped', () => {
+    expect(resForZoom(13, MAX)).toBe(14)
+    expect(resForZoom(13.49, MAX)).toBe(14)
+    expect(resForZoom(13.5, MAX)).toBe(15)
+    expect(resForZoom(0, MAX)).toBe(3)
+    expect(resForZoom(22, MAX)).toBe(21)
+    expect(resForZoom(22, 18)).toBe(18)
+  })
+  it('names the two sizes around the nearest change', () => {
+    expect(resPair(13.2, MAX)).toEqual({ coarse: 14, fine: 15 })
+    expect(resPair(13.9, MAX)).toEqual({ coarse: 14, fine: 15 })
+    expect(resPair(14, MAX)).toEqual({ coarse: 15, fine: 16 })
+    expect(resPair(21.5, MAX)).toEqual({ coarse: 21, fine: 21 })
+  })
+  it('shows a size in full at the middle of its level and half at each end', () => {
+    expect(resShare(14, 13, 0.95, MAX)).toBe(1)
+    expect(resShare(14, 13.5, 0.95, MAX)).toBeCloseTo(0.5, 9)
+    expect(resShare(14, 12.5, 0.95, MAX)).toBeCloseTo(0.5, 9)
+    expect(resShare(14, 14, 0.95, MAX)).toBe(0)
+  })
+  it('adds up to 1 over the pair at every zoom, for both widths', () => {
+    for (const width of [0.95, 0.75]) for (let z = 2; z <= 22; z += 0.05) {
+      const { coarse, fine } = resPair(z, MAX)
+      const sum = coarse === fine ? resShare(coarse, z, width, MAX) : resShare(coarse, z, width, MAX) + resShare(fine, z, width, MAX)
+      expect(sum, `zoom ${z.toFixed(2)} width ${width}`).toBeCloseTo(1, 9)
+    }
+  })
+  it('shows no third size anywhere', () => {
+    for (let z = 2; z <= 22; z += 0.05) {
+      const { coarse, fine } = resPair(z, MAX)
+      for (let res = 3; res <= MAX; res++) {
+        if (res === coarse || res === fine) continue
+        expect(resShare(res, z, 0.95, MAX), `res ${res} at zoom ${z.toFixed(2)}`).toBe(0)
+      }
+    }
+  })
+  it('keeps the coarsest and the finest full past their end of the range', () => {
+    expect(resShare(3, 0, 0.95, MAX)).toBe(1)
+    expect(resShare(MAX, 22, 0.95, MAX)).toBe(1)
+    expect(resShare(18, 22, 0.95, 18)).toBe(1)
+  })
+  it('holds a pair fetched at an earlier zoom in full past both its ends, until the next pair arrives', () => {
+    // The website fetched 14 and 15 at zoom 13; the view zoomed on before the
+    // refetch. Its pair is the whole range there is, so it never falls to 0.
+    for (let z = 10; z <= 17; z += 0.05) {
+      const sum = resShare(14, z, 0.95, 15, 14) + resShare(15, z, 0.95, 15, 14)
+      expect(sum, `zoom ${z.toFixed(2)}`).toBeCloseTo(1, 9)
+    }
+    expect(resShare(14, 11, 0.95, 15, 14)).toBe(1)
+    expect(resShare(15, 14.9, 0.95, 15, 14)).toBe(1)
+    expect(resBreaks(14, 0.5, 15, 14)).toEqual([13.25, 13.75])
+    expect(resBreaks(15, 0.5, 15, 14)).toEqual([13.25, 13.75])
+  })
+  it('is a hard step with no width, which is what it was', () => {
+    expect(resShare(14, 13.49, 0, MAX)).toBe(1)
+    expect(resShare(14, 13.5, 0, MAX)).toBe(0)
+    expect(resShare(15, 13.5, 0, MAX)).toBe(1)
+  })
+  it('breaks where the share bends', () => {
+    expect(resBreaks(14, 0.5, MAX)).toEqual([12.25, 12.75, 13.25, 13.75])
+    expect(resBreaks(3, 0.5, MAX)).toEqual([2.25, 2.75])
+    expect(resBreaks(MAX, 0.5, MAX)).toEqual([19.25, 19.75])
+  })
+})
+
+describe('style expressions', () => {
+  const evalRamp = (expr, z) => {
+    if (!Array.isArray(expr)) return expr
+    const stops = expr.slice(3)
+    if (z <= stops[0]) return stops[1]
+    for (let i = 2; i < stops.length; i += 2) {
+      if (z <= stops[i]) {
+        const t = (z - stops[i - 2]) / (stops[i] - stops[i - 2])
+        return stops[i - 1] + t * (stops[i + 1] - stops[i - 1])
+      }
+    }
+    return stops[stops.length - 1]
+  }
+  const evalStep = (expr, z) => {
+    let v = expr[2]
+    for (let i = 3; i < expr.length; i += 2) if (z >= expr[i]) v = expr[i + 1]
+    return v
+  }
+  it('builds an interpolate on zoom with stops that rise', () => {
+    const expr = zoomRamp([13.25, 18.25, 13.25], (z) => ramp(z, { from: 13.25, to: 18.25 }))
+    expect(expr).toEqual(['interpolate', ['linear'], ['zoom'], 13.25, 0, 18.25, 1])
+  })
+  it('carries the per-feature value in the output, not around the ramp', () => {
+    const expr = zoomRamp([10, 12], (z) => ramp(z, { from: 10, to: 12 }), (v) => ['*', ['get', 'op'], v])
+    expect(expr[0]).toBe('interpolate')
+    expect(expr[4]).toEqual(['*', ['get', 'op'], 0])
+    expect(expr[6]).toEqual(['*', ['get', 'op'], 1])
+  })
+  it('follows a size\'s share through its whole level', () => {
+    const expr = zoomRamp(resBreaks(14, 0.95, MAX), (z) => resShare(14, z, 0.95, MAX))
+    for (let z = 11; z <= 15; z += 0.01) expect(evalRamp(expr, z), `zoom ${z.toFixed(2)}`).toBeCloseTo(resShare(14, z, 0.95, MAX), 2)
+  })
+  it('holds a step inside a ramp, within a thousandth of a zoom level', () => {
+    const share = (z) => resShare(20, z, 0.75, MAX) * hexShare(z, { mode: 'auto', mode3D: true })
+    const expr = zoomRamp([...resBreaks(20, 0.75, MAX), ...stepBreaks(19)], share)
+    expect(evalRamp(expr, 19 - STEP_EPS)).toBeCloseTo(1, 2)
+    expect(evalRamp(expr, 19)).toBeCloseTo(0.95, 2)
+    expect(evalRamp(expr, 19.2)).toBeCloseTo(share(19.2), 2)
+  })
+  it('is a constant when there is nothing to bend', () => {
+    expect(zoomRamp([], () => 1)).toBe(1)
+    expect(zoomRamp([], () => 1, (v) => ['*', ['get', 'op'], v])).toEqual(['*', ['get', 'op'], 1])
+  })
+  it('switches a layer off exactly where its share is nothing', () => {
+    const share = (z) => resShare(14, z, 0.95, MAX)
+    const expr = zoomSwitch(resBreaks(14, 0.95, MAX), share)
+    expect(expr[0]).toBe('step')
+    for (let z = 11; z <= 15; z += 0.01) {
+      // Not on the breaks themselves, where the share is exactly 0 on one side.
+      if (resBreaks(14, 0.95, MAX).some((b) => Math.abs(b - z) < 0.011)) continue
+      expect(evalStep(expr, z), `zoom ${z.toFixed(2)}`).toBe(share(z) > 0 ? 1 : 0)
+    }
+  })
+  it('switches the pillars on at zoom 19 in 3D', () => {
+    const expr = zoomSwitch(stepBreaks(19), (z) => pointShare(z, { mode: 'auto', mode3D: true }))
+    expect(evalStep(expr, 18.9)).toBe(0)
+    expect(evalStep(expr, 19)).toBe(1)
+    expect(evalStep(expr, 21)).toBe(1)
+  })
+  it('samples a curve at every quarter, ends included', () => {
+    expect(sampledBreaks(11.25, 12.1)).toEqual([11.25, 11.5, 11.75, 12, 12.1])
+  })
+})
+
+import { hexSlots, hexFillOpacity, hexBarHeight, hexBarSwitch, pointFillOpacity, pointStrokeOpacity, pillarSwitch } from '../zoomfade.js'
+
+describe('the two hex layers', () => {
+  it('gives the even sizes slot a and the odd ones slot b', () => {
+    expect(hexSlots(13.2, MAX)).toEqual({ a: 14, b: 15 })
+    expect(hexSlots(14.2, MAX)).toEqual({ a: 16, b: 15 })
+  })
+  it('leaves the size that stays in its slot when the pair moves up', () => {
+    for (let n = 3; n < 19; n++) {
+      const before = hexSlots(n - 0.01, MAX), after = hexSlots(n, MAX)
+      const stays = n + 1
+      const slot = stays % 2 === 0 ? 'a' : 'b'
+      expect(before[slot], `zoom ${n}`).toBe(stays)
+      expect(after[slot], `zoom ${n}`).toBe(stays)
+    }
+  })
+  it('swaps the other slot only while both its sizes show nothing', () => {
+    for (const width of [0.95, 0.75]) for (let n = 3; n < 19; n++) {
+      expect(resShare(n, n, width, MAX), `leaving at zoom ${n}`).toBe(0)
+      expect(resShare(n + 2, n, width, MAX), `arriving at zoom ${n}`).toBe(0)
+      expect(resShare(n + 1, n, width, MAX), `staying at zoom ${n}`).toBe(1)
+    }
+  })
+  it('uses one slot at the end of the range', () => {
+    expect(hexSlots(21.5, MAX)).toEqual({ a: null, b: 21 })
+  })
+})
+
+describe('paint', () => {
+  const stopsOf = (expr) => expr.slice(3).filter((_, i) => i % 2 === 0)
+  const rises = (zs) => zs.every((z, i) => i === 0 || z > zs[i - 1])
+  const flat = { mode: 'auto', mode3D: false }, tilted = { mode: 'auto', mode3D: true }
+
+  it('only ever builds stops that rise, which MapLibre refuses otherwise', () => {
+    for (const view of [flat, tilted, { mode: 'hex', mode3D: true }, { mode: 'points', mode3D: false }]) {
+      for (let res = 3; res <= MAX; res++) {
+        for (const expr of [hexFillOpacity(res, view, MAX), hexBarHeight(res, view, MAX), hexBarSwitch(res, view, MAX)]) {
+          expect(rises(stopsOf(expr)), `${JSON.stringify(view)} res ${res}`).toBe(true)
+        }
+      }
+      for (const expr of [pointFillOpacity(view), pointStrokeOpacity(view)]) {
+        if (Array.isArray(expr) && expr[0] === 'interpolate') expect(rises(stopsOf(expr)), JSON.stringify(view)).toBe(true)
+      }
+    }
+  })
+  it('keeps zoom at the top of every expression', () => {
+    const inner = (e) => JSON.stringify(e.slice(3)).includes('"zoom"')
+    for (const expr of [hexFillOpacity(14, flat, MAX), hexBarHeight(20, tilted, MAX), hexBarSwitch(20, tilted, MAX), pointFillOpacity(flat), pointStrokeOpacity(flat), pillarSwitch(tilted)]) {
+      expect(['interpolate', 'step']).toContain(expr[0])
+      expect(inner(expr)).toBe(false)
+    }
+  })
+  it('multiplies a cell\'s own opacity and a bar\'s own height by the share', () => {
+    expect(hexFillOpacity(14, flat, MAX)[4]).toEqual(['*', ['get', 'op'], 0])
+    expect(hexBarHeight(14, tilted, MAX)[4]).toEqual(['*', ['get', 'height'], 0])
+  })
+  it('drops the bars to 95% at zoom 19 in auto, and not in hex mode', () => {
+    const last = (e) => e[e.length - 1]
+    expect(last(hexBarHeight(MAX, tilted, MAX))).toEqual(['*', ['get', 'height'], 0.95])
+    expect(last(hexBarHeight(MAX, { mode: 'hex', mode3D: true }, MAX))).toEqual(['*', ['get', 'height'], 1])
+  })
+  it('gives an earlier ride no fill and the product of both shares on its stroke', () => {
+    const fill = pointFillOpacity(flat)
+    expect(fill[fill.length - 1]).toEqual(['case', ['==', ['get', 'backlog'], 1], 0, ['*', ['get', 'fop'], 1]])
+    const stroke = pointStrokeOpacity(flat)
+    const at = (z) => stroke[3 + 2 * stopsOf(stroke).indexOf(z) + 1]
+    // Zoom 15.75: the points are halfway (0.5), earlier rides at 0.6.
+    expect(at(15.75)).toEqual(['case', ['==', ['get', 'backlog'], 1], ['*', ['get', 'op'], 0.3], ['*', ['get', 'op'], 0.5]])
+    expect(at(18.75)).toEqual(['case', ['==', ['get', 'backlog'], 1], ['*', ['get', 'op'], 1], ['*', ['get', 'op'], 1]])
+  })
+  it('draws the points at full strength in points mode, earlier rides on their own ramp', () => {
+    const view = { mode: 'points', mode3D: false }
+    expect(pointFillOpacity(view)).toEqual(['case', ['==', ['get', 'backlog'], 1], 0, ['*', ['get', 'fop'], 1]])
+    const stroke = pointStrokeOpacity(view)
+    expect(stroke[4]).toEqual(['case', ['==', ['get', 'backlog'], 1], ['*', ['get', 'op'], 0], ['*', ['get', 'op'], 1]])
+  })
+  it('keeps the pillars on at every zoom in points mode', () => {
+    expect(pillarSwitch({ mode: 'points', mode3D: true })).toBe(1)
+  })
+})
diff --git a/app/src/app.js b/app/src/app.js
index ccca2b38..bd5e1cca 100644
--- a/app/src/app.js
+++ b/app/src/app.js
@@ -3198,7 +3198,7 @@ function refreshWhatsNewBadge() {
 // Was two FABs (layer-toggle: both/points/hex · mode3d-toggle: 2D/3D, #147
 // phase 2) — merged into VIEW_STATES' 5-state cycle (maplayers.js) to free a
 // FAB slot. Persisted like the sound mode; unknown/corrupt storage falls back
-// to both/2D (index 1), the app's cold default — see loadViewIndex in
+// to auto/2D (index 1), the app's cold default — see loadViewIndex in
 // settings.js (guarded + unit-tested, #338).
 
 function saveViewIndex(i) {
@@ -3219,7 +3219,7 @@ const VIEW_ICONS = {
   // Hexagon (the hex-heatmap glyph) with a point dot inside — visually
   // combines the other two modes' glyphs instead of reusing a generic
   // stacked-layers icon that doesn't read as "points + hex together".
-  both2d: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" aria-hidden="true">
+  auto2d: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" aria-hidden="true">
     <polygon points="10,2 17,6 17,14 10,18 3,14 3,6"/>
     <circle cx="10" cy="10" r="2.2" fill="currentColor" stroke="none"/>
   </svg>`,
@@ -3241,8 +3241,8 @@ const VIEW_ICONS = {
     <circle cx="14" cy="11" r="1.3" fill="currentColor" stroke="none"/>
   </svg>`,
   // Faded hex-prism outline with one solid pillar standing inside — the 3D
-  // twin of both2d's hex-outline-plus-center-dot.
-  both3d: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true">
+  // twin of auto2d's hex-outline-plus-center-dot.
+  auto3d: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true">
     <path d="M10 3l6 3.5v7L10 17l-6-3.5v-7z" opacity="0.55"/>
     <line x1="10" y1="17" x2="10" y2="8" stroke-width="1.6"/>
     <circle cx="10" cy="8" r="1.6" fill="currentColor" stroke="none"/>
diff --git a/app/src/hexgrid.js b/app/src/hexgrid.js
index 547d8b87..4ddae4fe 100644
--- a/app/src/hexgrid.js
+++ b/app/src/hexgrid.js
@@ -1,6 +1,8 @@
-// Pure-JS port of CoreScope's server hex grid (cmd/server/hexgrid.go) so the
-// app's live map uses the SAME cells as the analyzer coverage map. Pointy-top
-// hexes over Web Mercator; cell id "res:q:r".
+// Pure-JS port of the server's hex grid (server/internal/geo/hexgrid.go) so
+// the app's live map draws the same cells as the website. Pointy-top hexes over
+// Web Mercator; cell id "res:q:r".
+import { resForZoom } from './zoomfade.js'
+
 const R = 6378137.0;
 
 function mercator(lat, lon) {
@@ -10,37 +12,32 @@ function invMercator(x, y) {
   return [(2 * Math.atan(Math.exp(y / R)) - Math.PI / 2) * 180 / Math.PI, x / R * 180 / Math.PI]; // [lat,lon]
 }
 
+// One size per zoom level (#634), the server's rule: a cell is about
+// HEX_TARGET_PX tall on screen at every zoom, point to point. The size is the
+// circumradius in Web Mercator units and halves with every resolution.
+// MERC_UPP_Z0 is Web Mercator units per pixel at Leaflet zoom 0 (world / 256).
+//
+// Until #634 the app had ten bands of a fixed size, 1500 down to 3 Mercator
+// units, which the website had left behind: a cell ran from 19 to 75 px inside
+// one band, and a change of band was a jump of a factor two or more.
+export const HEX_TARGET_PX = 28
+const MERC_UPP_Z0 = 156543.03392
 export function hexSizeForRes(res) {
-  switch (true) {
-    case res >= 15: return 3;
-    case res === 14: return 5;
-    case res === 13: return 10;
-    case res === 12: return 20;
-    case res === 11: return 40;
-    case res === 10: return 90;
-    case res === 9: return 180;
-    case res === 8: return 360;
-    case res === 7: return 720;
-    default: return 1500;
-  }
+  return (HEX_TARGET_PX / 2) * MERC_UPP_Z0 / Math.pow(2, res)
 }
 
-// hexResForZoom maps the map zoom to a hex resolution. Coarser bands mirror the
-// server's zoomToHexRes; res 12–15 (20/10/5/3 m) extend it so the live map gets
-// finer cells than the server's 40 m floor when zoomed in for close-range
-// localization (down to 3 m at max zoom). Below GPS accuracy a single point is
-// mostly noise, but the aggregated heat still surfaces the hotspot.
+// The finest resolution the app draws. The server stops at 18, which is where
+// the website's zoom ends. The app is zoomed in further for the walk-in, and
+// 21 keeps a cell at 28 px up to MapLibre zoom 20: 2.1 Mercator units, finer
+// than the 3 the old bands ended on (docs/2026-06-29-hex-resolution-zoom.md).
+// Below GPS accuracy a single cell is mostly noise; the hotspot the cells pile
+// up into is what reads.
+export const HEX_MAX_RES = 21
+
+// hexResForZoom: the resolution drawn in full at a MapLibre zoom. The map
+// blends it with its neighbour around every change (zoomfade.js).
 export function hexResForZoom(z) {
-  if (z >= 19) return 15;
-  if (z >= 18) return 14;
-  if (z >= 17) return 13;
-  if (z >= 16) return 12;
-  if (z >= 15) return 11;
-  if (z >= 13) return 10;
-  if (z >= 11) return 9;
-  if (z >= 9) return 8;
-  if (z >= 7) return 7;
-  return 6;
+  return resForZoom(z, HEX_MAX_RES)
 }
 
 function hexRound(q, r) {
diff --git a/app/src/hexlabels.js b/app/src/hexlabels.js
index 468a4fe9..ae5fbaec 100644
--- a/app/src/hexlabels.js
+++ b/app/src/hexlabels.js
@@ -1,19 +1,21 @@
 // What a hex cell says about who was heard in it (#556).
 //
 // The cell's colour is the strongest signal heard there; the label is the
-// nodes: the 4-character prefixes of the ids heard in the cell, newest first,
-// three at most. A prefix is the house form for an id (idPrefix, feed.js),
+// node heard there last, as the 4-character prefix of its id, with the count
+// of the others on a line under it. A prefix is the house form for an id (idPrefix, feed.js),
 // never a name, and it comes only from a record that carries an id of a node:
 // a 1-byte hash names one of 256 (direct_hash, path_hash, names.js), and a
 // refused identity carries no id at all (#558). Neither is printed as who was
 // here.
 //
 // Kasper chose prefixes over a count (2026-09-04); #549's reach outline will
-// share this label's spot, so the two never fight for it.
+// share this label's spot, so the two never fight for it. It was three
+// prefixes on one line until #634 made a cell 28 px tall at every zoom, about
+// 24 wide: four characters at 10 px fit that, three prefixes ran over the
+// neighbours (Kasper, 2026-09-29).
 import { isHashIdKind } from './names.js'
 
-export const HEX_LABEL_MIN_ZOOM = 16
-export const HEX_LABEL_MAX = 3
+export const HEX_LABEL_MAX = 1
 const PREFIX_CHARS = 4
 
 export function hexCellLabel(records) {
@@ -26,13 +28,7 @@ export function hexCellLabel(records) {
   if (!seen.length) return ''
   const shown = seen.slice(0, HEX_LABEL_MAX)
   const more = seen.length - shown.length
-  return shown.join(' ') + (more > 0 ? ` +${more}` : '')
-}
-
-// Four characters at 10px need a cell wider than the label: at zoom 16 a cell
-// is about 110 m across and the label fits with room, at 15 it does not.
-export function showHexLabels(zoom) {
-  return Number(zoom) >= HEX_LABEL_MIN_ZOOM
+  return shown.join(' ') + (more > 0 ? `\n+${more}` : '')
 }
 
 // planHexLabels: what the map changes when the labelled cells in view change.
diff --git a/app/src/huntmap.js b/app/src/huntmap.js
index 22a67a1e..23d0146f 100644
--- a/app/src/huntmap.js
+++ b/app/src/huntmap.js
@@ -1,4 +1,5 @@
-import { hexCellAt, hexBoundary, hexResForZoom } from './hexgrid.js'
+import { hexCellAt, hexBoundary, hexResForZoom, HEX_MAX_RES } from './hexgrid.js'
+import { pointShare, backlogShare, labelShare, hexSlots, resForZoom, hexFillOpacity, hexBarHeight, hexBarSwitch, pointFillOpacity, pointStrokeOpacity, pillarSwitch } from './zoomfade.js'
 import { rssiTier, tierColorVar, fillOpacity, effectivePlotOffset, extrusionHeight, tintOver, pillarAlpha, EXTRUSION_LIGHT_INTENSITY } from './signal.js'
 import { getConfig } from './config.js'
 import { nodesInView, driftPresentation, groupSenderPointsForNodes, estimateFor, circleRing } from './nodelayer.js'
@@ -11,8 +12,8 @@ import { coverageStars, coverageFeatures, assignHues, isRepeaterHearing, selecti
 import { createRayLayer } from './raylayer.js'
 import { octagonRing, pillarRadiusM, collapsePillars, PILLAR_MERGE_M } from './pointmarker.js'
 import { recordsKey, lastValueCache, hueKey, selectionKey, ownersKey } from './rendercache.js'
-import { currentRideStart, isBacklog, showBacklogPoints } from './rides.js'
-import { hexCellLabel, showHexLabels, planHexLabels } from './hexlabels.js'
+import { currentRideStart, isBacklog } from './rides.js'
+import { hexCellLabel, planHexLabels } from './hexlabels.js'
 import { senderText } from './receptionlog.js'
 import { pickName } from './feed.js'
 import { skyForHour, currentHour } from './sky.js'
@@ -53,7 +54,9 @@ const bareStyle = (bg) => ({ version: 8, sources: {}, layers: [{ id: 'bg', type:
 export const LAYER_ORDER = [
   'hillshade',      // terrain shading, under everything we draw
   'trail',
-  'hex', 'hex-3d',
+  // Two cell sizes at a time (#634): the second layer of each pair holds the
+  // size that is taking over from, or handing over to, the first.
+  'hex', 'hex-b', 'hex-3d', 'hex-3d-b',
   // The noise floor per cell (#410) takes the signal cells' place while it is
   // on, so it sits where they do: under the buildings and the points.
   'noise',
@@ -102,6 +105,20 @@ const POINT_PILLAR_MIN_RADIUS_PX = 4
 // the same number rather than two copies of 0.5 that could drift apart.
 const TRAIL_OPACITY = 0.5
 
+// What a zoom step asks of the draw while the fingers move (#634). What a
+// zoom fades is the style's work and costs nothing here. `data` moves where a
+// layer's share leaves nothing, so what it shows has to be built at all: that
+// takes the full draw. `cells` moves where a size changes: the pair of hex
+// layers at every whole zoom, and the one size the labels and the noise draw
+// at every half. Only the layers that hold cells are rebuilt for that.
+export function zoomKeys(z, view, maxRes) {
+  const s = hexSlots(z, maxRes)
+  return {
+    data: [pointShare(z, view) > 0 ? 1 : 0, backlogShare(z, view) > 0 ? 1 : 0, labelShare(z) > 0 ? 1 : 0].join('|'),
+    cells: [s.a, s.b, resForZoom(z, maxRes)].join('|'),
+  }
+}
+
 export function createHuntMap(containerId) {
   const stub = { setPosition() {}, centerOn() {}, recenter() {}, onFollowChange() {}, render() {}, setView() {}, applyBasemap() {}, focusReception() {}, setAttenuator() {}, setBearing() {}, onGestureRotate() {}, setHighlight() {}, onMarkerFocus() {}, setNodePositions() {}, releaseFollow() {}, setLookAhead() {}, setNodeLayer() {}, setExaggeration() {}, setNoise() {}, pulse() {}, destroy() {} }
   // Degrade to a no-op map (never throw during app init) when MapLibre did not
@@ -131,7 +148,7 @@ export function createHuntMap(containerId) {
   } catch (e) { return stub }
   map.addControl(new maplibregl.AttributionControl({ compact: true }))
 
-  let mode = 'both', lastRecords = [], lastSelected = null
+  let mode = 'auto', lastRecords = [], lastSelected = null
   let highlightId = null, onMarkerFocusCb = null, rotateCb = null, mode3D = false
   // Terrain (#396): the 3D view raises it (Kasper, 2026-09-06: no switch of
   // its own), at the exaggeration from Settings, applied through terrainPlan.
@@ -301,6 +318,19 @@ export function createHuntMap(containerId) {
   map.on('rotate', () => { if (rotateCb && !settingBearing) rotateCb(map.getBearing()) })
   // Hex resolution depends on zoom — rebuild once the zoom settles.
   map.on('zoomend', () => draw())
+  // While the fingers move, only what zoomKeys names is redrawn: the full
+  // draw when a layer has to be built at all, the cell layers when a size
+  // changed, nothing when only a share moved.
+  let zoomDrawn = { data: '', cells: '' }
+  // The selection of the last full draw, for drawCells (below).
+  let cellsFor = { sel: null, owners: '' }
+  const zoomKeysNow = () => zoomKeys(map.getZoom(), { mode, mode3D }, HEX_MAX_RES)
+  map.on('zoom', () => {
+    fadeHexLabels()
+    const k = zoomKeysNow()
+    if (k.data !== zoomDrawn.data) draw()
+    else if (k.cells !== zoomDrawn.cells) drawCells()
+  })
 
   // ---- feature builders (GeoJSON sources are updated via setData) ----
   // The current ride's first reception (#556): everything before it is
@@ -317,7 +347,9 @@ export function createHuntMap(containerId) {
   // misses one input serves the previous tick's answer for a different question.
   const pointsCache = lastValueCache()
   function buildPointsFC(records, sel, owners) {
-    const outlines = showBacklogPoints(map.getZoom())
+    // An earlier ride is in the collection from the zoom where it starts to
+    // show; how much of it shows is the style's (pointStrokeOpacity).
+    const outlines = backlogShare(map.getZoom(), { mode, mode3D }) > 0
     const sig = recordsKey(records), hues = hueKey(coverageHue)
     // Unsignable on either axis means recompute: a key carrying "null" would
     // match another set that also could not be signed. The selection joined
@@ -331,10 +363,10 @@ export function createHuntMap(containerId) {
   }
   function buildPointsFCUncached(records, outlines, sel) {
     const feats = []
-    // Backlog (#556): below BACKLOG_OUTLINE_ZOOM a reception from an earlier
-    // ride is coverage only, its hex cell; from that zoom it comes back as an
-    // outline, in its tier colour, no fill. The ride itself is drawn filled,
-    // as before.
+    // Backlog (#556): zoomed out, a reception from an earlier ride is coverage
+    // only, its hex cell; zooming in it comes back as an outline, in its tier
+    // colour, no fill, fading in over BACKLOG_FADE_2D (#634). The ride itself
+    // is drawn filled, as before.
     const rideStart = rideStartFor(records)
     for (const r of records) {
       if (r.lat == null || r.lon == null) continue
@@ -423,9 +455,10 @@ export function createHuntMap(containerId) {
   // A cell's colour and height come from the best RSSI in it and the attenuator
   // offset, so the answer changes only when the records, the zoom resolution or
   // that offset do — all three are in the key (#462).
-  const hexCache = lastValueCache()
-  function buildHexFC(records, sel, owners) {
-    const res = hexResForZoom(map.getZoom())   // finer cells the more you zoom in
+  // One cache per hex layer (#634): two cell sizes are drawn at a time, and
+  // a single slot would rebuild both on every tick.
+  const hexCache = { hex: lastValueCache(), 'hex-b': lastValueCache() }
+  function buildHexFC(records, sel, owners, res, slot) {
     // An unsignable set must not be cached under the string "null|10|0", which
     // is a perfectly good cache key and exactly the wrong one — the null has to
     // survive into the lookup.
@@ -435,7 +468,7 @@ export function createHuntMap(containerId) {
     // serve the other theme's cells and bars from the cache. So is the
     // selection (#624), which dims cells without changing a record, and so are
     // the owners (#661), which decide the cells it keeps lit.
-    return hexCache.get(sig === null || owners === null ? null : `${sig}|${res}|${currentOffset()}|${cssVar('--ch-basemap')}|${selectionKey(sel)}|${owners}`, () => buildHexFCUncached(records, res, sel))
+    return hexCache[slot].get(sig === null || owners === null ? null : `${sig}|${res}|${currentOffset()}|${cssVar('--ch-basemap')}|${selectionKey(sel)}|${owners}`, () => buildHexFCUncached(records, res, sel))
   }
   function buildHexFCUncached(records, res, sel) {
     // A cell holds receptions from several repeaters at once, so it cannot ask
@@ -588,7 +621,7 @@ export function createHuntMap(containerId) {
     // darkened a bar against its own cell (#412). Re-applied here like the
     // sky, since setStyle drops it. Guarded for an older MapLibre.
     if (typeof map.setLight === 'function') map.setLight({ anchor: 'viewport', intensity: EXTRUSION_LIGHT_INTENSITY })
-    for (const id of ['trail', 'hex', 'noise', 'points', 'points-3d', 'highlight', 'here', 'nodedrift', 'nodecircle', 'reach', 'pulse', 'pulse-3d', NODE_GLYPH_SOURCE, NODE_DOT_SOURCE]) {
+    for (const id of ['trail', 'hex', 'hex-b', 'noise', 'points', 'points-3d', 'highlight', 'here', 'nodedrift', 'nodecircle', 'reach', 'pulse', 'pulse-3d', NODE_GLYPH_SOURCE, NODE_DOT_SOURCE]) {
       if (!map.getSource(id)) map.addSource(id, { type: 'geojson', data: EMPTY })
     }
     // One decision for all four signal layers (#266) — see maplayers.js. Both
@@ -598,9 +631,16 @@ export function createHuntMap(containerId) {
     const shown = (id) => (vis[id] ? 'visible' : 'none')
     if (!map.getLayer('trail')) map.addLayer({ id: 'trail', type: 'line', source: 'trail',
       paint: { 'line-color': cssVar('--ch-muted'), 'line-width': 3, 'line-opacity': TRAIL_OPACITY } })
-    if (!map.getLayer('hex')) map.addLayer({ id: 'hex', type: 'fill', source: 'hex',
-      layout: { visibility: shown('hex') },
-      paint: { 'fill-color': ['get', 'color'], 'fill-opacity': ['get', 'op'] } })
+    // The opacity and the bar height of the hex layers, and the opacity of the
+    // points, are written by applyFades: they are zoom expressions that depend
+    // on the view and on the cell size a layer holds (#634). A style load drops
+    // them with the layers, so the signature is cleared here.
+    fadeSig = ''
+    // Each id spelled out, not looped: huntmap-order.test.js reads the adds
+    // from this file as text.
+    const hexPaint = { 'fill-color': ['get', 'color'], 'fill-opacity': 0 }
+    if (!map.getLayer('hex')) map.addLayer({ id: 'hex', type: 'fill', source: 'hex', layout: { visibility: shown('hex') }, paint: hexPaint })
+    if (!map.getLayer('hex-b')) map.addLayer({ id: 'hex-b', type: 'fill', source: 'hex-b', layout: { visibility: shown('hex-b') }, paint: hexPaint })
     // Flat in 3D too: a noise floor has no height to give a pillar. The band
     // colours are baked in like every overlay's; a theme swap re-adds them.
     if (!map.getLayer('noise')) map.addLayer({ id: 'noise', type: 'fill', source: 'noise',
@@ -611,14 +651,16 @@ export function createHuntMap(containerId) {
     // tier is what made a faint bar a solid purple on a 19% tint (#412). The
     // bar takes 'pillar', the cell's tint pre-mixed over the background, and
     // draws it opaque: no translucent compounding, shared walls depth-test.
-    if (!map.getLayer('hex-3d')) map.addLayer({ id: 'hex-3d', type: 'fill-extrusion', source: 'hex',
-      layout: { visibility: shown('hex-3d') },
-      paint: { 'fill-extrusion-color': ['get', 'pillar'], 'fill-extrusion-height': ['get', 'height'],
-        // MapLibre shades extrusion sides darker toward their base by default
-        // (#412). On a building that reads as depth; on these it reads as a
-        // different tier, because colour is the signal the palette carries.
-        'fill-extrusion-vertical-gradient': false,
-        'fill-extrusion-base': 0, 'fill-extrusion-opacity': 1 } })
+    const barPaint = { 'fill-extrusion-color': ['get', 'pillar'], 'fill-extrusion-height': 0,
+      // MapLibre shades extrusion sides darker toward their base by default
+      // (#412). On a building that reads as depth; on these it reads as a
+      // different tier, because colour is the signal the palette carries.
+      'fill-extrusion-vertical-gradient': false,
+      // 0 until applyFades has written the switch: a bar of no height still
+      // draws an opaque polygon on the ground.
+      'fill-extrusion-base': 0, 'fill-extrusion-opacity': 0 }
+    if (!map.getLayer('hex-3d')) map.addLayer({ id: 'hex-3d', type: 'fill-extrusion', source: 'hex', layout: { visibility: shown('hex-3d') }, paint: barPaint })
+    if (!map.getLayer('hex-3d-b')) map.addLayer({ id: 'hex-3d-b', type: 'fill-extrusion', source: 'hex-b', layout: { visibility: shown('hex-3d-b') }, paint: barPaint })
     // Buildings reuse the hosted style's own vector source (already fetched for
     // the 2D basemap) — only present on the hosted OpenFreeMap style, not the
     // bare fallback, hence the source guard.
@@ -651,10 +693,10 @@ export function createHuntMap(containerId) {
       // A backlog reception (#556) has no fill and a heavier stroke: colour and
       // place stay, the fill says "this ride".
       paint: { 'circle-radius': 8, 'circle-color': ['get', 'color'],
-        'circle-opacity': ['case', ['==', ['get', 'backlog'], 1], 0, ['get', 'fop']],
+        'circle-opacity': 0,
         'circle-stroke-color': ['get', 'color'],
         'circle-stroke-width': ['case', ['==', ['get', 'backlog'], 1], 1.5, 1],
-        'circle-stroke-opacity': ['get', 'op'] } })
+        'circle-stroke-opacity': 0 } })
     // The pulse (#556): one ring on the reception that just arrived, animated
     // by pulse() below through the paint properties, above the points and
     // shown only where they are.
@@ -796,7 +838,7 @@ export function createHuntMap(containerId) {
     const glyph = nodeGlyphAt(e.point)
     if (glyph) { onGlyphTap(glyph); return }
     if (!coverageSel.size) return
-    const layers = ['points', 'points-3d', 'hex', 'hex-3d'].filter((id) => map.getLayer(id))
+    const layers = ['points', 'points-3d', 'hex', 'hex-b', 'hex-3d', 'hex-3d-b'].filter((id) => map.getLayer(id))
     if (!map.queryRenderedFeatures(e.point, { layers }).length) clearCoverageSelection()
   })
   for (const layerId of NODE_GLYPH_LAYERS) {
@@ -845,10 +887,14 @@ export function createHuntMap(containerId) {
     // Only the reach stop reads it: outside it no dot takes a star's hue and
     // nothing dims, so the fold is skipped there.
     const owners = cov ? ownersKey(records, ownerOf) : ''
-    map.getSource('hex').setData(vis.hex || vis['hex-3d'] ? buildHexFC(records, sel, owners) : EMPTY)
-    map.getSource('noise').setData(vis.noise ? buildNoiseFC() : EMPTY)
-    map.getSource('points').setData(vis.points ? buildPointsFC(records, sel, owners) : EMPTY)
-    map.getSource('points-3d').setData(vis['points-3d'] ? buildPoints3DFC(records, sel, owners) : EMPTY)
+    zoomDrawn.data = zoomKeysNow().data
+    const zoom = map.getZoom(), view = { mode, mode3D }
+    // Nothing is built for a layer that shows nothing at this zoom: in auto
+    // the points wait for their zoom, and in 3D that is what keeps a pillar
+    // per reception off the GPU until the closest one (#634).
+    const pointsOn = pointShare(zoom, view) > 0
+    map.getSource('points').setData(vis.points && pointsOn ? buildPointsFC(records, sel, owners) : EMPTY)
+    map.getSource('points-3d').setData(vis['points-3d'] && pointsOn ? buildPoints3DFC(records, sel, owners) : EMPTY)
     map.getSource('trail').setData(buildTrailFC())
     // The trail belongs to no repeater, so it is never part of a selection and
     // always steps back with one. One LineString with no properties, so this
@@ -857,7 +903,51 @@ export function createHuntMap(containerId) {
     map.getSource('highlight').setData(buildHighlightFC())
     map.getSource('here').setData(buildHereFC())
     drawNodeLayer(records, cov)
+    cellsFor = { sel, owners }
+    drawCells()
+  }
+
+  // The layers that hold cells, at the sizes of this zoom: the two hex layers
+  // (hexSlots, each resolution in its own layer; one whose share is nothing
+  // stays empty), the noise and the labels. With the selection of the last
+  // full draw, so a size change mid-pinch needs no coverage pass.
+  function drawCells() {
+    if (!map.getSource('hex')) return
+    const records = lastRecords, vis = visibleLayers()
+    const slots = hexSlots(map.getZoom(), HEX_MAX_RES)
+    const hexOn = vis.hex || vis['hex-3d']
+    for (const [id, res] of [['hex', slots.a], ['hex-b', slots.b]]) {
+      map.getSource(id).setData(hexOn && res != null ? buildHexFC(records, cellsFor.sel, cellsFor.owners, res, id) : EMPTY)
+    }
+    applyFades(slots)
+    map.getSource('noise').setData(vis.noise ? buildNoiseFC() : EMPTY)
     drawHexLabels(records, vis['hex-labels'])
+    zoomDrawn.cells = zoomKeysNow().cells
+  }
+
+  // The zoom expressions of the hex and point layers (zoomfade.js, #634),
+  // written when the view or the cell size a layer holds has changed. Not on
+  // every draw: a tick that changes no input would re-validate nine
+  // expressions for nothing.
+  let fadeSig = ''
+  function applyFades(slots) {
+    const view = { mode, mode3D }
+    const sig = [mode, mode3D ? 3 : 2, slots.a, slots.b].join('|')
+    if (sig === fadeSig || !map.getLayer('hex')) return
+    fadeSig = sig
+    for (const [flat, bar, res] of [['hex', 'hex-3d', slots.a], ['hex-b', 'hex-3d-b', slots.b]]) {
+      if (res == null) {
+        map.setPaintProperty(flat, 'fill-opacity', 0)
+        map.setPaintProperty(bar, 'fill-extrusion-opacity', 0)
+        continue
+      }
+      map.setPaintProperty(flat, 'fill-opacity', hexFillOpacity(res, view, HEX_MAX_RES))
+      map.setPaintProperty(bar, 'fill-extrusion-height', hexBarHeight(res, view, HEX_MAX_RES))
+      map.setPaintProperty(bar, 'fill-extrusion-opacity', hexBarSwitch(res, view, HEX_MAX_RES))
+    }
+    map.setPaintProperty('points', 'circle-opacity', pointFillOpacity(view))
+    map.setPaintProperty('points', 'circle-stroke-opacity', pointStrokeOpacity(view))
+    map.setPaintProperty('points-3d', 'fill-extrusion-opacity', pillarSwitch(view))
   }
 
   // The noise cells at this zoom's resolution, rebuilt when a sample arrives
@@ -870,8 +960,9 @@ export function createHuntMap(containerId) {
   // ---- hex labels (#556) ----
   // Who was heard in a cell, as id prefixes (hexlabels.js decides the text),
   // drawn as HTML markers like the node layer: the bare fallback style has no
-  // glyphs, so a symbol layer would draw nothing there. Only from
-  // HEX_LABEL_MIN_ZOOM and only for cells in view. One marker per cell id,
+  // glyphs, so a symbol layer would draw nothing there. They fade in over
+  // LABEL_FADE (#634, it was a step at zoom 16), name the cell size drawn in
+  // full at this zoom, and only cells in view. One marker per cell id,
   // kept while the cell stays in view: planHexLabels decides which markers a
   // draw adds, relabels or removes, so a new reception in one cell touches
   // that cell's marker and a tick that changes nothing touches none.
@@ -879,8 +970,15 @@ export function createHuntMap(containerId) {
   function clearHexLabels() {
     hexLabelMarkers.forEach((m) => m.remove()); hexLabelMarkers.clear()
   }
+  // Markers are DOM, so their share is a style on the element, written on
+  // every zoom step.
+  function fadeHexLabels() {
+    if (!hexLabelMarkers.size) return
+    const share = String(labelShare(map.getZoom()))
+    hexLabelMarkers.forEach((m) => { m.getElement().style.opacity = share })
+  }
   function drawHexLabels(records, on) {
-    if (!on || !showHexLabels(map.getZoom())) { if (hexLabelMarkers.size) clearHexLabels(); return }
+    if (!on || !(labelShare(map.getZoom()) > 0)) { if (hexLabelMarkers.size) clearHexLabels(); return }
     const res = hexResForZoom(map.getZoom())
     const b = map.getBounds()
     const cells = new Map()
@@ -911,6 +1009,7 @@ export function createHuntMap(containerId) {
       el.textContent = it.label
       hexLabelMarkers.set(it.id, new maplibregl.Marker({ element: el }).setLngLat([it.lon, it.lat]).addTo(map))
     }
+    fadeHexLabels()
   }
 
   // ---- pulse (#556) ----
@@ -938,6 +1037,9 @@ export function createHuntMap(containerId) {
     const vis = layerVisibility({ mode, mode3D })
     const id = vis.pulse ? 'pulse' : vis['pulse-3d'] ? 'pulse-3d' : null
     if (!id || !map.getSource(id) || !map.getLayer(id)) return
+    // And only at a zoom that draws them (#634): a ring around a point that
+    // is not on the map marks nothing.
+    if (!(pointShare(map.getZoom(), { mode, mode3D }) > 0)) return
     if (pulseTimer) { clearInterval(pulseTimer); pulseTimer = null }
     const tier = rssiTier(rec.rssi, currentOffset())
     const color = cssVar(tierColorVar(tier))
@@ -1229,15 +1331,15 @@ export function createHuntMap(containerId) {
   function setBearing(deg) { settingBearing = true; try { map.setBearing(deg) } finally { settingBearing = false } }
   function onGestureRotate(cb) { rotateCb = cb }
   // Applies the current layer decision to the live style. Both the layer-mode
-  // switch and the 3D toggle need it: in 3D the mode decides whether hex is
-  // drawn flat (under the pillars) or extruded (#266).
+  // switch and the 3D toggle need it: the mode and the dimension together
+  // decide which layers exist (#266, maplayers.js).
   function applyLayerVisibility() {
     const vis = visibleLayers()
     // Every layer layerVisibility decides, or the FAB and the style load
     // disagree again — the exact drift #266 pulled the decision out for. The
     // 3D pulse is the one that shows it: it loads 'none' in 2D, so a tap into
     // 3D that skipped it would leave the flash off until the next style load.
-    for (const id of ['hex', 'hex-3d', 'noise', 'points', 'points-3d', 'pulse', 'pulse-3d']) {
+    for (const id of ['hex', 'hex-b', 'hex-3d', 'hex-3d-b', 'noise', 'points', 'points-3d', 'pulse', 'pulse-3d']) {
       if (map.getLayer(id)) map.setLayoutProperty(id, 'visibility', vis[id] ? 'visible' : 'none')
     }
   }
diff --git a/app/src/maplayers.js b/app/src/maplayers.js
index 6782d4cd..d22b1dba 100644
--- a/app/src/maplayers.js
+++ b/app/src/maplayers.js
@@ -6,17 +6,25 @@
 // visible than a FAB tap. And huntmap.js is DOM-bound, so AGENTS.md §5 keeps
 // it out of the unit suite; this is the part worth pinning.
 //
-// The 3D rule that is not obvious: when pillars are drawn, the hex layer is
-// drawn FLAT rather than extruded. buildHexFC gives a cell the maximum RSSI
+// What a layer shows at a zoom is not decided here: that is a share, handed
+// to the style as a zoom expression (zoomfade.js, #634). This says which
+// layers exist for a view at all.
+//
+// 'auto' took the place of 'both' in #634: hex and points together, each at
+// the share its zoom gives it.
+//
+// The 3D rule that is not obvious: buildHexFC gives a cell the maximum RSSI
 // inside it, so an extruded bar is by construction at least as tall as every
-// pillar standing in that cell — and both are fill-extrusion sharing one depth
+// pillar standing in that cell, and both are fill-extrusion sharing one depth
 // pass with depth write, so the pillar's fragments fail the depth test and are
-// discarded. (fill-extrusion-opacity does not disable depth writes.) Flattening
-// the hex removes the occluder while keeping the coverage context under the
-// pillars. Extruded bars are still what 'hex' mode shows in 3D — there are no
-// pillars to hide there, and the bars are the whole point of that view.
+// discarded. (fill-extrusion-opacity does not disable depth writes.) Until
+// #634 the hex was therefore drawn FLAT whenever pillars shared the scene.
+// Now the pillars only arrive at zoom 19 (POINT_STEP_3D), and from there the
+// bars stand at 95% of their height (HEX_UNDER_PILLARS_3D), so the strongest
+// pillar of a cell clears its bar. Up to that zoom the bars are the whole
+// view, which is what flat cells under no pillars could not give.
 
-const MODES = ['both', 'hex', 'points']
+const MODES = ['auto', 'hex', 'points']
 
 // The 5-state combined layer+3D cycle (#258): merges the old layer-toggle FAB
 // (both/hex/points) and the 2D/3D FAB into one, freeing a FAB slot. "2D · hex
@@ -24,10 +32,10 @@ const MODES = ['both', 'hex', 'points']
 // matrix (decided 2026-07-16).
 export const VIEW_STATES = [
   { mode: 'points', mode3D: false },
-  { mode: 'both', mode3D: false },
+  { mode: 'auto', mode3D: false },
   { mode: 'hex', mode3D: true },
   { mode: 'points', mode3D: true },
-  { mode: 'both', mode3D: true },
+  { mode: 'auto', mode3D: true },
 ]
 
 // Stable key per VIEW_STATES entry — the icon/label lookup in app.js and the
@@ -39,8 +47,8 @@ export const viewKey = (s) => s.mode + (s.mode3D ? '3d' : '2d')
 // missing entry would otherwise reach a screen reader as "undefined".
 // Comma, not "·": a middle dot is either spoken as "middle dot" or dropped.
 export const VIEW_LABELS = {
-  points2d: '2D, points', both2d: '2D, hex + points', hex3d: '3D, hex',
-  points3d: '3D, points', both3d: '3D, hex + points',
+  points2d: '2D, points', auto2d: '2D, hex, points when zoomed in', hex3d: '3D, hex',
+  points3d: '3D, points', auto3d: '3D, hex, points when zoomed in',
 }
 
 // Cycles forward through VIEW_STATES. An out-of-range index (corrupt/legacy
@@ -72,19 +80,23 @@ export function pitchTransition(was3D, is3D) {
 export function layerVisibility({ mode, mode3D } = {}) {
   // Unknown/absent mode follows the app's cold default rather than hiding
   // everything, so a corrupt persisted value can't produce a blank map.
-  const m = MODES.includes(mode) ? mode : 'hex'
+  // 'both' is what a view stored before #634 still says: it reads as auto.
+  const m = mode === 'both' ? 'auto' : MODES.includes(mode) ? mode : 'hex'
   const showHex = m !== 'points'
   const showPoints = m !== 'hex'
 
   if (!mode3D) {
     // The hex labels (#556) ride the flat hex layer, in 2D only; the pulse
     // rings where the flat points are drawn, and its 3D form stays off here.
-    return { hex: showHex, 'hex-3d': false, points: showPoints, 'points-3d': false, 'hex-labels': showHex, pulse: showPoints, 'pulse-3d': false }
+    return { hex: showHex, 'hex-b': showHex, 'hex-3d': false, 'hex-3d-b': false, points: showPoints, 'points-3d': false, 'hex-labels': showHex, pulse: showPoints, 'pulse-3d': false }
   }
   return {
-    // Flat when pillars share the scene, extruded when they don't.
-    hex: showHex && showPoints,
-    'hex-3d': showHex && !showPoints,
+    // Extruded whenever the hex is on (#634); see the 3D rule above.
+    hex: false,
+    'hex-b': false,
+    'hex-3d': showHex,
+    // The second cell size, while one takes over from the other (zoomfade.js).
+    'hex-3d-b': showHex,
     points: false,
     'points-3d': showPoints,
     // A label on a pillar's top would float at ground level under it, and the
diff --git a/app/src/noise.js b/app/src/noise.js
index fa957531..1726a3a7 100644
--- a/app/src/noise.js
+++ b/app/src/noise.js
@@ -113,7 +113,7 @@ export function noiseFill(colors) {
 export function withNoise(vis, on) {
   if (!on) return { ...vis, noise: false }
   const out = { ...vis, noise: true }
-  for (const id of ['hex', 'hex-3d', 'hex-labels']) if (id in out) out[id] = false
+  for (const id of ['hex', 'hex-b', 'hex-3d', 'hex-3d-b', 'hex-labels']) if (id in out) out[id] = false
   return out
 }
 
diff --git a/app/src/rides.js b/app/src/rides.js
index 5e7e4f5a..e973588a 100644
--- a/app/src/rides.js
+++ b/app/src/rides.js
@@ -13,11 +13,6 @@
 
 export const RIDE_GAP_MS = 10 * 60 * 1000
 
-// Below this zoom a backlog reception is coverage only (its hex cell); from
-// it, the backlog comes back as outline circles. Kasper: "redelijk snel al".
-// 15 at first; the field lost the outlines one pinch out, so 12 (#668).
-export const BACKLOG_OUTLINE_ZOOM = 12
-
 const rxMs = (r) => {
   const t = r && r.rx_at != null ? Date.parse(r.rx_at) : NaN
   return Number.isNaN(t) ? null : t
@@ -54,7 +49,3 @@ export function isBacklog(rec, rideStartMs) {
   const t = rxMs(rec)
   return t != null && t < rideStartMs
 }
-
-export function showBacklogPoints(zoom) {
-  return Number(zoom) >= BACKLOG_OUTLINE_ZOOM
-}
diff --git a/app/src/settings.js b/app/src/settings.js
index 575f58e6..cb924691 100644
--- a/app/src/settings.js
+++ b/app/src/settings.js
@@ -86,7 +86,7 @@ export function loadShareName() {
 }
 
 // Index into VIEW_STATES for the persisted view (#258). No/corrupt stored
-// value falls back to both/2D — the app's cold default before that merge
+// value falls back to auto/2D (both/2D until #634) — the app's cold default before that merge
 // (huntmap.js's own mode/mode3D defaults), not index 0.
 export function loadViewIndex() {
   const v = readStored('core-hunter-view')
diff --git a/app/src/styles/app.css b/app/src/styles/app.css
index 98e3e830..0faf4c55 100644
--- a/app/src/styles/app.css
+++ b/app/src/styles/app.css
@@ -84,7 +84,7 @@ html, body { margin: 0; height: 100%; background: var(--ch-bg); color: var(--ch-
 /* A hex cell's label (#556): the id prefixes heard there, centred on the cell,
    in the map's own halo so it reads over any tier colour. Never a tap target. */
 .hex-label { font-family: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
-  font-size: 10px; line-height: 1; white-space: nowrap; color: var(--ch-text);
+  font-size: 10px; line-height: 1; white-space: pre; text-align: center; color: var(--ch-text);
   text-shadow: 0 0 3px var(--ch-bg), 0 0 3px var(--ch-bg); pointer-events: none; }
 .np-muted { color: var(--ch-muted); }
 
diff --git a/app/src/zoomfade.js b/app/src/zoomfade.js
new file mode 100644
index 00000000..502fcc6d
--- /dev/null
+++ b/app/src/zoomfade.js
@@ -0,0 +1,208 @@
+// What the map shows at a zoom, as shares between 0 and 1 (#634). Every rule
+// here used to be a step in JS: a threshold crossed, the data rebuilt, and the
+// thing appeared or vanished in one frame. A share is handed to the style as a
+// zoom expression, so the map eases it while the fingers are still moving.
+//
+// The numbers are Kasper's, picked on 29 September 2026 by pinching through a
+// mockup with 4559 receptions between Nijmegen and Arnhem, in 2D and in 3D.
+// Zoom is MapLibre's throughout.
+//
+// Copied whole between app/src/ and web/ (parity.test.js), since neither deploy
+// path can ship a file outside its own directory (#238). No imports.
+
+// The points of this ride come in over the hex, which stays at full strength.
+export const POINT_FADE_2D = { from: 13.25, to: 18.25 }
+// Earlier rides come in as outlines. It was a step at zoom 12 (#668).
+export const BACKLOG_FADE_2D = { from: 11.25, to: 18.75 }
+// The names in a cell. It was a step at zoom 16.
+export const LABEL_FADE = { from: 15.5, to: 16.5 }
+// In 3D a pillar per reception is the most expensive thing on the map, so the
+// pillars wait for the closest zoom and arrive in one step, this ride and the
+// earlier ones together. From there the hex bars stand at 95% of their height,
+// so the strongest pillar in a cell clears the bar it stands in.
+export const POINT_STEP_3D = 19
+export const HEX_UNDER_PILLARS_3D = 0.95
+// How many zoom levels two cell sizes share while one takes over from the
+// other, centred on the zoom where the size changes.
+export const HEX_BLEND_2D = 0.95
+export const HEX_BLEND_3D = 0.75
+export const hexBlend = (mode3D) => (mode3D ? HEX_BLEND_3D : HEX_BLEND_2D)
+
+const clamp01 = (v) => Math.max(0, Math.min(1, v))
+// ramp: 0 up to `from`, 1 from `to`, a straight line between. A band of no
+// width is a step at `from`.
+export function ramp(z, { from, to }) {
+  if (!(to > from)) return z >= from ? 1 : 0
+  return clamp01((z - from) / (to - from))
+}
+
+// The layer modes. 'auto' took the place of 'both': the two layers together,
+// each at the share its zoom gives it. 'hex' and 'points' draw one layer at
+// full strength, whatever the zoom.
+export const LAYER_MODES = ['auto', 'hex', 'points']
+const modeOf = (mode) => (LAYER_MODES.includes(mode) ? mode : 'auto')
+
+export function pointShare(z, { mode, mode3D } = {}) {
+  const m = modeOf(mode)
+  if (m === 'hex') return 0
+  if (m === 'points') return 1
+  return mode3D ? (z >= POINT_STEP_3D ? 1 : 0) : ramp(z, POINT_FADE_2D)
+}
+export function hexShare(z, { mode, mode3D } = {}) {
+  const m = modeOf(mode)
+  if (m === 'points') return 0
+  if (m === 'hex' || !mode3D) return 1
+  return z >= POINT_STEP_3D ? HEX_UNDER_PILLARS_3D : 1
+}
+// An earlier ride's share of its own point. In 3D it arrives with the pillars.
+export function backlogShare(z, { mode3D } = {}) {
+  return mode3D ? 1 : ramp(z, BACKLOG_FADE_2D)
+}
+export const labelShare = (z) => ramp(z, LABEL_FADE)
+
+// ---- cell sizes -------------------------------------------------------------
+// One size per zoom level, the server's rule (server/internal/geo/hexgrid.go):
+// the resolution is the Leaflet zoom, which is MapLibre's plus one, rounded
+// (web/mapmodel.js leafletZoom). So resolution r is the one drawn from zoom
+// r - 1.5 up to r - 0.5, and the size changes on every half.
+export const HEX_MIN_RES = 3
+export function resForZoom(z, maxRes) {
+  return Math.max(HEX_MIN_RES, Math.min(maxRes, Math.round(Number(z) + 1)))
+}
+// The two sizes alive around the nearest change of size: the coarser below it
+// and the finer above. At the ends of the range the two are the same one.
+export function resPair(z, maxRes) {
+  const k = Math.floor(Number(z))
+  const lim = (r) => Math.max(HEX_MIN_RES, Math.min(maxRes, r))
+  return { coarse: lim(k + 1), fine: lim(k + 2) }
+}
+// resShare: how much of resolution `res` the map shows at zoom z. Full inside
+// its own zoom level, and over `width` levels around each end it hands over to
+// its neighbour, so the two shares always add up to 1. The coarsest and the
+// finest have no neighbour on one side and stay full there. `minRes` and
+// `maxRes` are the sizes there are: the website holds the pair it fetched as
+// its whole range, so that pair stays on the map when the zoom runs past it
+// before the next one arrives.
+export function resShare(res, z, width, maxRes, minRes = HEX_MIN_RES) {
+  const lo = res - 1.5, hi = res - 0.5
+  const up = res <= minRes ? 1 : ramp(z, { from: lo - width / 2, to: lo + width / 2 })
+  const down = res >= maxRes ? 0 : ramp(z, { from: hi - width / 2, to: hi + width / 2 })
+  return Math.min(up, 1 - down)
+}
+// The zooms where resShare bends, which is where an expression needs a stop.
+export function resBreaks(res, width, maxRes, minRes = HEX_MIN_RES) {
+  const lo = res - 1.5, hi = res - 0.5
+  return [
+    ...(res <= minRes ? [] : [lo - width / 2, lo + width / 2]),
+    ...(res >= maxRes ? [] : [hi - width / 2, hi + width / 2]),
+  ]
+}
+
+// ---- style expressions --------------------------------------------------------
+// MapLibre takes ['zoom'] only as the input of a top-level interpolate or
+// step, so a share cannot be multiplied into a paint value around the ramp.
+// It rides in each stop's output instead: `wrap` turns the share at a stop
+// into that output, e.g. (v) => ['*', ['get', 'op'], v].
+//
+// A step inside a ramp is two stops STEP_EPS apart, since stops have to rise.
+export const STEP_EPS = 0.001
+const round3 = (v) => Math.round(v * 1000) / 1000
+function stopsFor(breaks) {
+  const zs = [...new Set(breaks.map(round3))].sort((a, b) => a - b)
+  return zs.length ? zs : [0]
+}
+// zoomRamp: a linear interpolate through shareAt at every break. Exact when
+// shareAt is a straight line between two breaks.
+export function zoomRamp(breaks, shareAt, wrap = (v) => v) {
+  const zs = stopsFor(breaks)
+  if (zs.length === 1) return wrap(round3(shareAt(zs[0])))
+  return ['interpolate', ['linear'], ['zoom'], ...zs.flatMap((z) => [z, wrap(round3(shareAt(z)))])]
+}
+// zoomSwitch: 1 where shareAt is above nothing, 0 elsewhere, as a step. For
+// what cannot be partly there: a fill-extrusion of no height still draws an
+// opaque polygon on the ground, and one with an opacity between 0 and 1
+// dissolves toward black (docs/2026-09-04-new-versus-old-on-the-map.md).
+export function zoomSwitch(breaks, shareAt) {
+  const zs = stopsFor(breaks)
+  const on = (z) => (shareAt(z) > 0 ? 1 : 0)
+  // The value of a segment is the value just inside it.
+  const inside = (i) => on(i + 1 < zs.length ? (zs[i] + zs[i + 1]) / 2 : zs[i] + 1)
+  return ['step', ['zoom'], on(zs[0] - 1), ...zs.flatMap((z, i) => [z, inside(i)])]
+}
+// A step at `at`, as the two breaks a ramp needs for it.
+export const stepBreaks = (at) => [at - STEP_EPS, at]
+// Breaks every `every` zoom levels between two zooms, for a share that is a
+// curve there (the product of two ramps).
+export function sampledBreaks(from, to, every = 0.25) {
+  const out = []
+  for (let z = from; z < to + 1e-9; z += every) out.push(z)
+  out.push(to)
+  return out
+}
+
+// ---- what the layers are painted with ------------------------------------------
+// Two hex layers, since two cell sizes are on the map while one takes over
+// from the other. A size keeps its layer for as long as it is drawn: the even
+// resolutions go to slot a and the odd ones to b. The pair moves up one at
+// every whole zoom, which is the middle of a level, where the size that stays
+// is at full strength and the one that leaves is at nothing. So the swap is
+// never seen.
+export function hexSlots(z, maxRes) {
+  const { coarse, fine } = resPair(z, maxRes)
+  const slots = { a: null, b: null }
+  for (const res of [coarse, fine]) slots[res % 2 === 0 ? 'a' : 'b'] = res
+  return slots
+}
+
+const hexBreaks = (res, view, maxRes, minRes) => [
+  ...resBreaks(res, hexBlend(view.mode3D), maxRes, minRes),
+  // The bars drop to 95% where the pillars arrive, in auto in 3D only.
+  ...(view.mode3D && modeOf(view.mode) === 'auto' ? stepBreaks(POINT_STEP_3D) : []),
+]
+const hexShareOf = (res, view, maxRes, minRes) => (z) => resShare(res, z, hexBlend(view.mode3D), maxRes, minRes) * hexShare(z, view)
+
+// The flat cells: each cell's own opacity ('op') times the share.
+export function hexFillOpacity(res, view, maxRes, minRes) {
+  return zoomRamp(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes), (v) => ['*', ['get', 'op'], v])
+}
+// The bars: a bar cannot be see-through, so its share is its height, and the
+// layer is switched off where the share is nothing.
+export function hexBarHeight(res, view, maxRes, minRes) {
+  return zoomRamp(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes), (v) => ['*', ['get', 'height'], v])
+}
+export function hexBarSwitch(res, view, maxRes, minRes) {
+  return zoomSwitch(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes))
+}
+
+// The flat points. A point of an earlier ride ('backlog' 1) has no fill and
+// takes the share of the points times its own, which is a curve where both
+// move, so that stretch is sampled.
+const BACKLOG = ['==', ['get', 'backlog'], 1]
+const pointBreaks = (view) => (modeOf(view.mode) === 'auto' ? [POINT_FADE_2D.from, POINT_FADE_2D.to] : [])
+export function pointFillOpacity(view) {
+  return zoomRamp(pointBreaks(view), (z) => pointShare(z, view), (v) => ['case', BACKLOG, 0, ['*', ['get', 'fop'], v]])
+}
+export function pointStrokeOpacity(view) {
+  const zs = [...pointBreaks(view), ...sampledBreaks(BACKLOG_FADE_2D.from, BACKLOG_FADE_2D.to)]
+  const at = (z) => {
+    const p = pointShare(z, view)
+    return ['case', BACKLOG, ['*', ['get', 'op'], round3(p * backlogShare(z, view))], ['*', ['get', 'op'], round3(p)]]
+  }
+  const stops = stopsFor(zs)
+  return ['interpolate', ['linear'], ['zoom'], ...stops.flatMap((z) => [z, at(z)])]
+}
+// The pillars: on or off, never partly (zoomSwitch).
+export function pillarSwitch(view) {
+  if (modeOf(view.mode) !== 'auto') return pointShare(0, view)
+  return zoomSwitch(stepBreaks(POINT_STEP_3D), (z) => pointShare(z, view))
+}
+
+// The same two ramps for a layer that names its own properties. The website's
+// cells carry an outline and its points no ride, so it writes its own outputs
+// around the shares the app uses.
+export function hexRamp(res, view, maxRes, wrap, minRes) {
+  return zoomRamp(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes), wrap)
+}
+export function pointRamp(view, wrap) {
+  return zoomRamp(pointBreaks(view), (z) => pointShare(z, view), wrap)
+}
diff --git a/changelog.d/2026-09-29-03-zoom-eases.json b/changelog.d/2026-09-29-03-zoom-eases.json
new file mode 100644
index 00000000..c833b92a
--- /dev/null
+++ b/changelog.d/2026-09-29-03-zoom-eases.json
@@ -0,0 +1,7 @@
+{
+  "id": "2026-09-29-zoom-eases",
+  "date": "2026-09-29",
+  "where": "both",
+  "title": "Zooming eases instead of jumping",
+  "body": "Cells change size gradually and points fade in as you zoom. Auto replaces Both. In 3D the pillars appear at the closest zoom."
+}
diff --git a/docs/2026-06-29-hex-resolution-zoom.md b/docs/2026-06-29-hex-resolution-zoom.md
index 86c123d3..bd209dad 100644
--- a/docs/2026-06-29-hex-resolution-zoom.md
+++ b/docs/2026-06-29-hex-resolution-zoom.md
@@ -45,6 +45,11 @@ time, not the target's.
 > and AGENTS.md §1 carries it. The §7 rule that required it in every position-bearing output was
 > removed.
 
+> **Amended 2026-09-29 by `docs/2026-09-29-zoom-transitions.md` (#634).** The app no longer has
+> bands of a fixed size. It takes the server's rule, a size per zoom level, and goes three
+> resolutions past the server's finest so the walk-in keeps its fine cells. The caveat above on
+> cells below GPS accuracy stands.
+
 ## Watch-outs
 
 - **Render cost.** At res 15 over a dense session this rebuilds many small `L.polygon`s on every pan
diff --git a/docs/2026-09-29-zoom-transitions.md b/docs/2026-09-29-zoom-transitions.md
new file mode 100644
index 00000000..dd1eeb7b
--- /dev/null
+++ b/docs/2026-09-29-zoom-transitions.md
@@ -0,0 +1,88 @@
+# 2026-09-29: zoom transitions and one hex system (#634)
+
+## Context
+
+Everything the map showed or hid by zoom was a step in JS: a threshold crossed, the data rebuilt, the
+thing there or gone in one frame. Five rules did this: the hex resolution bands, the outlines of
+earlier rides, the cell names, and on the website the server's resolution per zoom level. Hex and
+points together was a manual view, `both`.
+
+The two surfaces also binned their cells differently. The app had ten bands of a fixed size, 1500
+down to 3 Mercator units. The server gives a size per zoom level, about 28 px tall at every zoom
+(`server/internal/geo/hexgrid.go`).
+
+## Decision
+
+Kasper picked the numbers on 29 September 2026 in a mockup: a MapLibre page with 4559 receptions
+between Nijmegen and Arnhem, a slider per threshold, 2D and 3D, the app's and the server's cell sizes
+side by side, judged by pinching through it on a phone.
+
+| | 2D | 3D |
+|---|---|---|
+| Points of this ride | fade in from zoom 13.25 to 18.25 | one step at zoom 19 |
+| Hex | stays at 100% | 95% of the bar height from zoom 19 |
+| Earlier rides | fade in from zoom 11.25 to 18.75 | with the points, at zoom 19 |
+| Cell names | fade in from zoom 15.5 to 16.5 | not drawn in 3D, as before |
+| Two cell sizes | blend over 0.95 zoom level | blend over 0.75 zoom level |
+
+Zoom is MapLibre's. The numbers live in `zoomfade.js`, one file on both surfaces.
+
+- **One hex system, the server's.** The app takes a size per zoom level and gives up its bands.
+  This amends `docs/2026-06-29-hex-resolution-zoom.md`.
+- **Auto replaces `both`.** Hex and points together, each at the share its zoom gives it. `hex` and
+  `points` draw one layer at full strength at every zoom. On the website a stored view or a link
+  that still says `both` reads as auto. In the app a stored `both` falls back to the default, auto
+  in 2D, so a stored `both3d` opens in 2D once; no migration, since the app is in development.
+- **In 3D the pillars wait for zoom 19.** A pillar per reception is the most expensive thing on the
+  map. Up to there the bars are the view. From there the bars stand at 95%, so the strongest
+  pillar of a cell clears its bar. Until now the hex was drawn flat whenever pillars shared the
+  scene (#266).
+- **The hex does not fade out.** The issue had it fading out as the points came in. In the mockup
+  the hex at full strength under the points read better.
+
+## How it is drawn
+
+- A share is a zoom expression on the layer, so the map eases it while the fingers move and no
+  draw is needed for it.
+- **Two hex layers.** Resolution r is drawn from zoom r - 1.5 to r - 0.5. Around each end it hands
+  over to its neighbour over the blend width, so at most two sizes are on the map and their shares
+  add up to 1. The even resolutions go to one layer and the odd ones to the other. The pair moves up
+  at every whole zoom, where the size that stays is at 100% and the other two at 0, so the swap
+  is not seen.
+- **The website asks for two sizes**, one request each, by its own `z`. Where the server answers
+  both with the same size (below member it caps the zoom), that size is drawn once and stays in
+  full.
+- **The website holds the pair it fetched.** It refetches on `moveend`, so a pinch can run past
+  the pair before the next one arrives. The two sizes held are the whole range the ramps know of:
+  the coarser stays in full below its level and the finer above it, as before this change the old
+  cells stayed until they were replaced.
+- **Only what is drawn in full takes the pointer.** Both sizes are loaded, and hover, click and
+  `queryRenderedFeatures` ignore paint opacity. A cell answers only from the size drawn in full at
+  the zoom (the one the line under the map counts), a point only from half its strength on
+  (zoom 15.75 in 2D auto).
+- **The app redraws by what changed.** A zoom step that only moves a share draws nothing. One
+  that changes a size rebuilds the cell layers, the noise and the labels, which change size at
+  every half zoom. Only a layer whose share leaves nothing takes the full draw.
+- **Nothing is built for a share of 0.** In auto the points are not built, and on the website not
+  fetched, below the zoom that shows them.
+
+## Measured in MapLibre 4.7.1
+
+- `['zoom']` is only accepted as the input of a top-level `interpolate` or `step`. A per-feature
+  value such as `['get', 'op']` therefore rides in each stop's output.
+- A `fill-extrusion` of height 0 still draws an opaque polygon on the ground. A layer with nothing
+  to show is switched off with a `step` on `fill-extrusion-opacity`, 0 or 1.
+- A bar cannot fade by alpha: a translucent extrusion blends against black
+  (`docs/2026-09-04-new-versus-old-on-the-map.md`). In 3D a share is spent on the height.
+
+## Limits
+
+- **The finest cell differs, by choice** (Kasper, 2026-09-29). The server stops at resolution 18. The app goes to 21, so a cell
+  stays 28 px up to zoom 20 for the walk-in: 2.1 Mercator units, where the old bands ended on 3.
+  On the website a cell grows past 28 px above zoom 17.
+- **A cell names one node.** Three prefixes at 10 px need about 100 px, and a cell is 28 px tall
+  and about 24 wide at every zoom, so the names of neighbouring cells ran over each other. The
+  label is the prefix of the node heard last, with the count of the others on a line under it
+  (Kasper, 2026-09-29). The old bands gave a cell of about 110 m at zoom 16, which held three.
+- **The noise layer (#410) draws one size**, the one in full at the zoom, without a blend.
+- **The website has no earlier rides and no cell names**, so those two fades are the app's alone.
diff --git a/web/auth.test.js b/web/auth.test.js
index 01ddb8b4..e4eb23c6 100644
--- a/web/auth.test.js
+++ b/web/auth.test.js
@@ -94,13 +94,13 @@ describe('canSeePointLayer', () => {
 
 describe('modeForRole — a deep link cannot open a gated layer', () => {
   it('holds a degraded role on hex, whatever was asked for', () => {
-    for (const m of ['points', 'both', 'hex']) {
+    for (const m of ['points', 'auto', 'hex']) {
       expect(modeForRole(m, 'guest'), m).toBe('hex')
       expect(modeForRole(m, 'hunter'), m).toBe('hex')
     }
   })
   it('leaves a member on the mode they picked', () => {
-    for (const m of ['points', 'both', 'hex']) expect(modeForRole(m, 'member'), m).toBe(m)
+    for (const m of ['points', 'auto', 'hex']) expect(modeForRole(m, 'member'), m).toBe(m)
   })
 })
 
diff --git a/web/changelog.json b/web/changelog.json
index b2ca7c2a..c60eab22 100644
--- a/web/changelog.json
+++ b/web/changelog.json
@@ -1,4 +1,11 @@
 [
+  {
+    "id": "2026-09-29-zoom-eases",
+    "date": "2026-09-29",
+    "where": "both",
+    "title": "Zooming eases instead of jumping",
+    "body": "Cells change size gradually and points fade in as you zoom. Auto replaces Both. In 3D the pillars appear at the closest zoom."
+  },
   {
     "id": "2026-09-27-hud-bottom-space",
     "date": "2026-09-27",
diff --git a/web/e2e/auth.spec.js b/web/e2e/auth.spec.js
index 724b4d15..7364ec29 100644
--- a/web/e2e/auth.spec.js
+++ b/web/e2e/auth.spec.js
@@ -300,7 +300,7 @@ test('a guest cannot switch to the point layer, and the panel says why', async (
   // what it takes to open it is also what the map has to sell.
   await expect(page.locator('#lm-points')).toBeVisible()
   await expect(page.locator('#lm-points')).toBeDisabled()
-  await expect(page.locator('#lm-both')).toBeDisabled()
+  await expect(page.locator('#lm-auto')).toBeDisabled()
   await expect(page.locator('#lm-hex')).toBeEnabled()
   await expect(page.locator('#lm-hex')).toHaveAttribute('aria-pressed', 'true')
 
@@ -311,7 +311,7 @@ test('a guest cannot switch to the point layer, and the panel says why', async (
   await expect(note).toHaveText(/individual receptions/i)
   await expect(note).toHaveText(/log in/i)
   await expect(page.locator('#lm-points')).toHaveAttribute('aria-describedby', 'layer-gate-note')
-  await expect(page.locator('#lm-both')).toHaveAttribute('aria-describedby', 'layer-gate-note')
+  await expect(page.locator('#lm-auto')).toHaveAttribute('aria-describedby', 'layer-gate-note')
 
   // The disabled attribute is not the whole job: nothing in the sheet styled
   // :disabled, so the segment rendered identical to a live one. Measure what
@@ -369,7 +369,7 @@ test('a member still gets all three layers', async ({ page }) => {
     .toBeGreaterThan(0)
   await openFilters(page)
   await expect(page.locator('#lm-points')).toBeEnabled()
-  await expect(page.locator('#lm-both')).toBeEnabled()
+  await expect(page.locator('#lm-auto')).toBeEnabled()
   await expect(page.locator('#lm-points')).toHaveAttribute('aria-pressed', 'true')
   await expect(page.locator('#layer-gate-note')).toBeHidden()
   await page.click('#lm-hex')
diff --git a/web/e2e/ignorelist.spec.js b/web/e2e/ignorelist.spec.js
index 217072b3..260bee3f 100644
--- a/web/e2e/ignorelist.spec.js
+++ b/web/e2e/ignorelist.spec.js
@@ -37,9 +37,9 @@ async function openPointPopup(page) {
 
 test('Ignore this ID drops the sender from the query, not just from the view', async ({ page }) => {
   const urls = await setup(page)
-  // mode=both, because the point layer and the hex layer are separate requests
+  // mode=auto, because the point layer and the hex layer are separate requests
   // and the list has to reach both: the hex is what a visitor lands on (#141).
-  await page.goto('/?mode=both')
+  await page.goto('/?mode=auto')
   await openPointPopup(page)
   await page.locator('.pp-ignore').first().click()
 
diff --git a/web/e2e/receptionticker.spec.js b/web/e2e/receptionticker.spec.js
index bbb48994..ef4b1464 100644
--- a/web/e2e/receptionticker.spec.js
+++ b/web/e2e/receptionticker.spec.js
@@ -68,19 +68,20 @@ test('clicking a map marker scrolls the ticker to that specific line (marker ->
   }).toPass()
 })
 
-// In 'both' mode a point is drawn over its hex cell, and the cell's click
+// In 'auto' mode a point is drawn over its hex cell, and the cell's click
 // focuses the newest reception inside it. MapLibre runs the click listener of
 // every layer under the pointer, so a click on an older point in a cell landed
 // the ticker on the cell's newest row instead of the point's (#465). NEAR is
 // that newest row: inside the cell, newer, and not under the click.
-test('clicking a point inside a hex cell in both mode keeps the ticker on that point', async ({ page }) => {
+// z=19 is MapLibre zoom 18: in auto the points only come in from 13.25 (#634).
+test('clicking a point inside a hex cell in auto mode keeps the ticker on that point', async ({ page }) => {
   const NEAR = { ...POINT2, lat: 51.002, lon: 4.002 }
   const ring = [[3.99, 50.995], [4.01, 50.995], [4.015, 51], [4.01, 51.005], [3.99, 51.005], [3.985, 51], [3.99, 50.995]]
   await page.route('**/api/points*', (r) => r.fulfill({ json: { points: [POINT, NEAR] } }))
   await page.route('**/api/heatmap*', (r) => r.fulfill({ json: { features: [
     { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ring] }, properties: { best_rssi: -85, count: 2, hunters: ['h1'] } },
   ] } }))
-  await page.goto('/?mode=both&lat=51&lon=4&z=14')
+  await page.goto('/?mode=auto&lat=51&lon=4&z=19')
   await expect(page.locator('#rx-log .rx-ln')).toHaveCount(2, { timeout: 10000 })
   await expect(page.locator('#rx-log .rx-ln.act')).toContainText('OTHER')
   await expect.poll(() => page.evaluate(() => window.__featureCount('hex'))).toBe(1)
diff --git a/web/e2e/ui.spec.js b/web/e2e/ui.spec.js
index 5b4b2be7..c1bd4f99 100644
--- a/web/e2e/ui.spec.js
+++ b/web/e2e/ui.spec.js
@@ -29,7 +29,7 @@ test('theme toggle flips data-theme, persists, reflects in URL, and swaps the gl
 // The layer mode is a segmented control in the filter panel (#539); the
 // pressed segment is the mode. aria-pressed is readable panel-open or shut.
 const expectMode = async (page, mode) => {
-  for (const m of ['points', 'hex', 'both']) {
+  for (const m of ['points', 'hex', 'auto']) {
     await expect(page.locator(`#lm-${m}`)).toHaveAttribute('aria-pressed', String(m === mode))
   }
 }
@@ -60,15 +60,15 @@ test('settings survive a reload via localStorage (no URL params)', async ({ page
   await openSettings(page)
   await page.click('#theme-toggle') // -> light
   await page.click('#ss-close')
-  await setLayerMode(page, 'both')
-  await expectMode(page, 'both')
+  await setLayerMode(page, 'auto')
+  await expectMode(page, 'auto')
 
   // Reload with a bare URL: the URL was rewritten by replaceState, so strip it to
   // prove the state is also restored from localStorage alone.
   await page.evaluate(() => history.replaceState(null, '', location.pathname))
   await page.reload()
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')
-  await expectMode(page, 'both')
+  await expectMode(page, 'auto')
 })
 
 test('map starts in hex mode (#141), fetches /api/heatmap, and the segments switch it', async ({ page }) => {
@@ -77,8 +77,8 @@ test('map starts in hex mode (#141), fetches /api/heatmap, and the segments swit
   await expectMode(page, 'hex')
   await heatmapReq // the cold default drew the heatmap layer
 
-  await setLayerMode(page, 'both')
-  await expectMode(page, 'both')
+  await setLayerMode(page, 'auto')
+  await expectMode(page, 'auto')
   await setLayerMode(page, 'points')
   await expectMode(page, 'points')
   await setLayerMode(page, 'hex')
diff --git a/web/e2e/view3d.spec.js b/web/e2e/view3d.spec.js
index 1bf39fe8..291c1737 100644
--- a/web/e2e/view3d.spec.js
+++ b/web/e2e/view3d.spec.js
@@ -70,7 +70,7 @@ test('turning the map writes the bearing into the URL, and the compass puts nort
   await expect(page).not.toHaveURL(/[?&]bearing=/)
 })
 
-test('in 3D the receptions stand as pillars, collapsed where they coincide, and Both keeps the cells flat under them', async ({ page }) => {
+test('in 3D the receptions stand as pillars, collapsed where they coincide, and Auto holds them back to zoom 19', async ({ page }) => {
   await page.route('**/api/auth/me', (r) => r.fulfill({ json: { role: 'member', username: 'alice' } }))
   const M = 1 / 111320
   await page.route('**/api/points*', (r) => r.fulfill({ json: { points: [
@@ -88,13 +88,22 @@ test('in 3D the receptions stand as pillars, collapsed where they coincide, and
   expect(await vis(page, 'hex-3d')).toBe(false)
 
   await openFilters(page)
-  await page.click('#lm-both')
+  await page.click('#lm-auto')
   await closeFilters(page)
-  // Both in 3D: pillars over FLAT cells (maplayers.js), since an extruded
-  // cell is at least as tall as every pillar in it and would hide them.
-  await expect.poll(() => vis(page, 'hex')).toBe(true)
-  expect(await vis(page, 'hex-3d')).toBe(false)
+  // Auto in 3D (#634): the cells are bars, and no pillar is built until the
+  // closest zoom, since a pillar per reception is what costs the most to draw.
+  await expect.poll(() => vis(page, 'hex-3d')).toBe(true)
+  expect(await vis(page, 'hex')).toBe(false)
   expect(await vis(page, 'points-3d')).toBe(true)
+  await expect.poll(() => page.evaluate(() => window.__featureCount('points-3d'))).toBe(0)
+  expect(await page.evaluate(() => window.__paint('points-3d', 'fill-extrusion-opacity'))).toEqual(['step', ['zoom'], 0, 18.999, 0, 19, 1])
+  // MapLibre zoom 19 is z=20 in the URL's Leaflet units.
+  await page.goto('/?mode=auto&view=3d&lat=51&lon=4&z=20')
+  await mounted(page)
+  await expect.poll(() => page.evaluate(() => window.__featureCount('points-3d'))).toBe(2)
+  await page.goto('/?mode=points&view=3d&lat=51&lon=4&z=16')
+  await mounted(page)
+  await page.waitForFunction(() => window.__featureCount('points') === 3)
 
   // Back in 2D the pillars are not built at all.
   await page.click('#view-toggle')
diff --git a/web/e2e/zoomfade.spec.js b/web/e2e/zoomfade.spec.js
new file mode 100644
index 00000000..05ad981a
--- /dev/null
+++ b/web/e2e/zoomfade.spec.js
@@ -0,0 +1,161 @@
+import { test, expect, openFilters } from './fixtures.js'
+
+// #634: what the map shows at a zoom is a share the style eases, not a step.
+// Two cell sizes are on the map while one takes over from the other, the
+// points come in over the hex, and Auto took the place of Both. The canvas
+// has no DOM, so the page's hooks answer what a layer holds and is painted
+// with. The numbers are pinned in zoomfade.test.js; this is the wiring.
+
+const ring = [[3.99, 50.995], [4.01, 50.995], [4.015, 51], [4.01, 51.005], [3.99, 51.005], [3.985, 51], [3.99, 50.995]]
+// Each cell counts as many receptions as its size, so a hover line names it.
+const cell = (res, n = 1) => Array.from({ length: n }, (_, i) => ({ type: 'Feature', geometry: { type: 'Polygon', coordinates: [ring] },
+  properties: { cell: `${res}:${i}:1`, best_rssi: -85, count: res, hunters: ['h1'] } }))
+const POINT = { lat: 51, lon: 4, rssi: -90, snr: -8, sender_id: 'aa11bb22', sender_label: 'NEO7HI', hunter_pubkey: 'h1', hunter_name: 'Hunter 1',
+  packet_type: 'Advert', rx_at: new Date(Date.now() - 5000).toISOString() }
+
+// The server as it answers: the size asked for, up to `max`.
+async function setup(page, { role = 'member', max = 18 } = {}) {
+  const asked = { heatmap: [], points: [] }
+  await page.route('**/api/auth/me', (r) => (role === 'guest'
+    ? r.fulfill({ status: 401, json: { error: 'unauthorised' } })
+    : r.fulfill({ json: { role, username: 'm' } })))
+  await page.route('**/api/hunters*', (r) => r.fulfill({ json: { hunters: [] } }))
+  await page.route('**/api/heatmap*', (r) => {
+    const z = Number(new URL(r.request().url()).searchParams.get('z'))
+    asked.heatmap.push(z)
+    const res = Math.min(z, max)
+    // A size has as many cells as its number, so a count names the size.
+    return r.fulfill({ json: { features: cell(res, res) } })
+  })
+  await page.route('**/api/points*', (r) => {
+    const q = new URL(r.request().url()).searchParams
+    if (q.get('bbox')) asked.points.push(q.get('z'))
+    return r.fulfill({ json: { points: [POINT] } })
+  })
+  return asked
+}
+const count = (page, id) => page.evaluate((l) => window.__featureCount(l), id)
+const paint = (page, id, prop) => page.evaluate(([l, p]) => window.__paint(l, p), [id, prop])
+
+test('two cell sizes are asked for and drawn, each in its own layer', async ({ page }) => {
+  const asked = await setup(page)
+  // z=14 in the URL is MapLibre zoom 13: size 14 in full, with 15 above it.
+  await page.goto('/?mode=hex&lat=51&lon=4&z=14')
+  await expect.poll(() => count(page, 'hex')).toBe(14)
+  await expect.poll(() => count(page, 'hex-b')).toBe(15)
+  expect([...new Set(asked.heatmap)].sort()).toEqual([14, 15])
+  // The pair hands over at 13.5; past that each holds on until the next pair.
+  expect(await paint(page, 'hex', 'fill-opacity')).toEqual(['interpolate', ['linear'], ['zoom'],
+    13.025, ['*', ['get', 'op'], 1], 13.975, ['*', ['get', 'op'], 0]])
+  expect(await paint(page, 'hex-b', 'fill-opacity')).toEqual(['interpolate', ['linear'], ['zoom'],
+    13.025, ['*', ['get', 'op'], 0], 13.975, ['*', ['get', 'op'], 1]])
+  // The outline fades with its cells.
+  expect(await paint(page, 'hex-outline', 'line-opacity')).toEqual(['interpolate', ['linear'], ['zoom'], 13.025, 0.9, 13.975, 0])
+  await expect(page.locator('#status')).toContainText('14 cells')
+})
+
+// A linear interpolate over ['zoom'] at z, with the cell's own opacity at 1.
+function shareAt(expr, z) {
+  const val = (v) => (Array.isArray(v) ? v[2] : v)
+  if (!Array.isArray(expr) || expr[0] !== 'interpolate') return val(expr)
+  const stops = expr.slice(3)
+  if (z <= stops[0]) return val(stops[1])
+  for (let i = 0; i + 2 < stops.length; i += 2) {
+    const [z0, v0, z1, v1] = [stops[i], val(stops[i + 1]), stops[i + 2], val(stops[i + 3])]
+    if (z <= z1) return v0 + ((v1 - v0) * (z - z0)) / (z1 - z0)
+  }
+  return val(stops[stops.length - 1])
+}
+
+test('a zoom past the fetched pair keeps its cells until the next pair arrives', async ({ page }) => {
+  await setup(page)
+  // z=14 is MapLibre zoom 13: sizes 14 and 15 fetched.
+  await page.goto('/?mode=hex&lat=51&lon=4&z=14')
+  await expect.poll(() => count(page, 'hex')).toBe(14)
+  await expect.poll(() => count(page, 'hex-b')).toBe(15)
+  // The refetch after the zoom never lands, so the pair of zoom 13 stays.
+  await page.route('**/api/heatmap*', () => {})
+  for (const z of [14.9, 11.5]) {
+    await page.evaluate((to) => window.__mapJumpZoom(to), z)
+    const a = shareAt(await paint(page, 'hex', 'fill-opacity'), z)
+    const b = shareAt(await paint(page, 'hex-b', 'fill-opacity'), z)
+    expect(a + b, `zoom ${z}`).toBeCloseTo(1, 2)
+  }
+})
+
+test('the pointer reads the cell drawn in full, not the one faded out over it', async ({ page }) => {
+  await setup(page)
+  // MapLibre zoom 13: size 14 in full, 15 loaded above it at nothing.
+  await page.goto('/?mode=hex&lat=51&lon=4&z=14')
+  await expect.poll(() => count(page, 'hex-b')).toBe(15)
+  const at = await page.evaluate(() => window.__mapProject(51, 4))
+  const box = await page.locator('#map').boundingBox()
+  await page.mouse.move(box.x + at.x, box.y + at.y)
+  await page.mouse.move(box.x + at.x + 2, box.y + at.y + 1)
+  await expect(page.locator('.ch-hover')).toContainText('14 pts')
+})
+
+test('a point takes a click from half its strength on', async ({ page }) => {
+  await setup(page)
+  const clickPoint = async () => {
+    const at = await page.evaluate(() => window.__mapProject(51, 4))
+    const box = await page.locator('#map').boundingBox()
+    await page.mouse.click(box.x + at.x, box.y + at.y)
+  }
+  // MapLibre zoom 14: the point is drawn at 15%, so the cell under it answers.
+  await page.goto('/?mode=auto&lat=51&lon=4&z=15')
+  await expect.poll(() => count(page, 'points')).toBe(1)
+  await clickPoint()
+  await expect(page.locator('.maplibregl-popup:not(.ch-hover)')).toHaveCount(0)
+  // MapLibre zoom 17: 75%, the point's own popup.
+  await page.goto('/?mode=auto&lat=51&lon=4&z=18')
+  await expect.poll(() => count(page, 'points')).toBe(1)
+  await expect(async () => {
+    await clickPoint()
+    await expect(page.locator('.maplibregl-popup:not(.ch-hover)')).toContainText('RSSI -90', { timeout: 500 })
+  }).toPass()
+})
+
+test('a size the server will not go past is drawn once, and stays in full', async ({ page }) => {
+  // Below member the server caps the zoom: both asks come back as size 12.
+  await setup(page, { role: 'guest', max: 12 })
+  await page.goto('/?mode=hex&lat=51&lon=4&z=14')
+  await expect.poll(() => count(page, 'hex')).toBe(12)
+  expect(await count(page, 'hex-b')).toBe(0)
+  // One size is the whole range: in full at every zoom, no ramp.
+  expect(await paint(page, 'hex', 'fill-opacity')).toEqual(['*', ['get', 'op'], 1])
+  expect(await paint(page, 'hex-b', 'fill-opacity')).toBe(0)
+})
+
+test('auto asks for no points below the zoom that shows them', async ({ page }) => {
+  const asked = await setup(page)
+  await page.goto('/?mode=auto&lat=51&lon=4&z=14')
+  await expect.poll(() => count(page, 'hex')).toBe(14)
+  expect(await count(page, 'points')).toBe(0)
+  expect(asked.points).toEqual([])
+  expect(await paint(page, 'points', 'circle-opacity')).toEqual(['interpolate', ['linear'], ['zoom'],
+    13.25, ['*', ['get', 'op'], 0], 18.25, ['*', ['get', 'op'], 1]])
+
+  // z=17 is MapLibre zoom 16: past 13.25, so the points are on the map.
+  await page.goto('/?mode=auto&lat=51&lon=4&z=17')
+  await expect.poll(() => count(page, 'points')).toBe(1)
+  await expect.poll(() => count(page, 'hex')).toBeGreaterThan(0)
+})
+
+test('points mode draws the points at full strength at every zoom', async ({ page }) => {
+  await setup(page)
+  await page.goto('/?mode=points&lat=51&lon=4&z=10')
+  await expect.poll(() => count(page, 'points')).toBe(1)
+  expect(await paint(page, 'points', 'circle-opacity')).toEqual(['*', ['get', 'op'], 1])
+  expect(await paint(page, 'points', 'circle-stroke-opacity')).toBe(1)
+})
+
+test('Auto took the place of Both, and a link from before still opens it', async ({ page }) => {
+  await setup(page)
+  await page.goto('/?mode=both&lat=51&lon=4&z=17')
+  await expect.poll(() => count(page, 'points')).toBe(1)
+  await openFilters(page)
+  await expect(page.locator('#lm-auto')).toHaveText('Auto')
+  await expect(page.locator('#lm-auto')).toHaveAttribute('aria-pressed', 'true')
+  await expect(page.locator('#lm-both')).toHaveCount(0)
+})
diff --git a/web/index.html b/web/index.html
index ccc26ebc..f6557049 100644
--- a/web/index.html
+++ b/web/index.html
@@ -258,7 +258,7 @@ <h2>Filters</h2>
         <span id="layer-seg" class="bf-seg" role="group" aria-label="Layer mode">
           <button id="lm-points" type="button" data-mode="points" aria-pressed="false">Points</button>
           <button id="lm-hex" type="button" data-mode="hex" aria-pressed="false">Hex</button>
-          <button id="lm-both" type="button" data-mode="both" aria-pressed="false">Both</button>
+          <button id="lm-auto" type="button" data-mode="auto" aria-pressed="false">Auto</button>
         </span>
         <!-- Why Points and Both are off below member (#493). Filled and shown
              by applyPointLayerGate; a line under the group rather than a
diff --git a/web/map.js b/web/map.js
index 9cb6a87b..f494caf0 100644
--- a/web/map.js
+++ b/web/map.js
@@ -1,3 +1,4 @@
+import { pointShare, resPair, resForZoom } from './zoomfade.js'
 import { tierColorVar } from './signal.js'
 import { createWebMap } from './mapcore.js'
 import { leafletZoom, mapZoomFromLeaflet, zoomParam, pointFeatures, hexFeatures, pillarFeatures, observerFeatures, locateFeatures, heatImageData, imageCoordinates, latLonBounds, cameraFor, angleParam } from './mapmodel.js'
@@ -61,9 +62,13 @@ document.documentElement.setAttribute('data-theme', theme)
 const iLat = parseFloat(urlstate.initial('lat', '')), iLon = parseFloat(urlstate.initial('lon', ''))
 const iZoom = parseFloat(urlstate.initial('z', ''))
 const hasSavedView = Number.isFinite(iLat) && Number.isFinite(iLon)
-const MODES = ['points', 'hex', 'both']
+// 'auto' took the place of 'both' in #634: hex and points together, each at
+// the share its zoom gives it (zoomfade.js). A link or a stored view from
+// before still says both, and reads as auto.
+const MODES = ['points', 'hex', 'auto']
+const modeFrom = (v) => (v === 'both' ? 'auto' : v)
 // Cold default is hex (#141) — a URL-/persisted mode still wins via urlstate.
-let mode = MODES.includes(urlstate.initial('mode', '')) ? urlstate.initial('mode', '') : 'hex'
+let mode = MODES.includes(modeFrom(urlstate.initial('mode', ''))) ? modeFrom(urlstate.initial('mode', '')) : 'hex'
 // The camera and the 3D view from the URL (#595, mapmodel.js cameraFor):
 // ?view=3d is the layer state, ?pitch= and ?bearing= the camera, and the
 // exaggeration is a Settings choice that travels like the theme does.
@@ -397,55 +402,102 @@ async function drawPoints() {
 // A multi-sender pick restricts the heatmap too (#223): the sender filter is
 // applied server-side in SQL, so it lands before the grid-cell aggregation
 // rather than needing per-point rows the client no longer sees.
-let currentHexRings = []
+// Per hex layer since #634: two cell sizes are on the map at a time, and a
+// click names the cell by its index in its own layer.
+let currentHexRings = { hex: [], 'hex-b': [] }
 // The cells as the server sent them, kept so a selection change can re-dim
 // them without refetching the heatmap for what is only a colour change (#624).
-let currentHexFeatures = []
+let currentHexFeatures = { hex: [], 'hex-b': [] }
+const HEX_SLOTS = ['hex', 'hex-b']
+const clearHex = () => {
+  currentHexRings = { hex: [], 'hex-b': [] }; currentHexFeatures = { hex: [], 'hex-b': [] }
+  for (const id of HEX_SLOTS) wm.setData(id, null)
+}
 // The hunter count is omitted rather than shown as 0 when the server
 // withholds it (#440): a degraded caller gets no identities at all, and
 // "0 hunters" over a cell with receptions in it reads as a bug.
 const hexHover = (p) => `best RSSI ${p.best} · ${p.count} pts` + (p.hunters != null ? ` · ${p.hunters} hunters` : '')
-wm.hoverText('hex', hexHover)
-wm.hoverText('hex-3d', hexHover)
+for (const id of ['hex', 'hex-b', 'hex-3d', 'hex-3d-b']) wm.hoverText(id, hexHover)
 // Ticker sync from hex mode (#224). The point-click path only exists in
 // 'points'/'both', and the cold default is 'hex' (#141), so without this a
 // first-time visitor clicking the map got nothing. newestInRing returns null
 // when the ticker holds none of the cell's rows (ordinary — it caps at CAP
 // recent rows), and then the ticker is left as it is.
-const onHexClick = (props) => {
+const onHexClick = (slot) => (props) => {
   if (!rxTicker) return
-  const ring = currentHexRings[props.i]
+  const ring = currentHexRings[slot][props.i]
   if (!ring) return
   const hit = newestInRing(rxTicker.records(), ring)
   if (hit) rxTicker.focusRecord(receptionKey(hit))
 }
-wm.onLayerClick('hex', onHexClick)
-wm.onLayerClick('hex-3d', onHexClick)
-
+for (const slot of HEX_SLOTS) {
+  wm.onLayerClick(slot, onHexClick(slot))
+  wm.onLayerClick(slot === 'hex' ? 'hex-3d' : 'hex-3d-b', onHexClick(slot))
+}
+
+// The finest cell size the server hands out (server/internal/geo/hexgrid.go,
+// ResForZoom).
+const SERVER_MAX_RES = 18
+// The size of the cells in an answer, read off the first cell's id
+// ("res:q:r"). The server may answer coarser than it was asked: below member
+// it caps the zoom, and above 18 it has nothing finer.
+const resOfCells = (fc, asked) => {
+  const cell = fc.features && fc.features[0] && fc.features[0].properties && fc.features[0].properties.cell
+  const res = cell ? parseInt(String(cell).split(':')[0], 10) : NaN
+  return Number.isFinite(res) ? res : asked
+}
+// Two cell sizes at a time (#634, zoomfade.js): the one drawn in full around
+// this zoom and the neighbour it blends with, each asked for by its own z and
+// each in the layer its size belongs to. Where the server answers both asks
+// with the same size, that size is its ceiling for this caller: it is drawn
+// once, and stays in full from there up.
 async function drawHex() {
   const isCurrent = hexDraw()
-  let fc
+  const zoom = wm.getZoom()
+  const { coarse, fine } = resPair(zoom, SERVER_MAX_RES)
+  let answers
   try {
-    const r = await fetch(`${API_BASE}/api/heatmap?${qs()}`)
-    if (!r.ok) throw new Error(`heatmap ${r.status}`)
-    fc = await r.json()
+    answers = await Promise.all([...new Set([coarse, fine])].map(async (res) => {
+      const p = new URLSearchParams(qs())
+      p.set('z', String(res))
+      const r = await fetch(`${API_BASE}/api/heatmap?${p.toString()}`)
+      if (!r.ok) throw new Error(`heatmap ${r.status}`)
+      const fc = await r.json()
+      return { res: resOfCells(fc, res), asked: res, fc }
+    }))
   } catch (_) {
-    if (mayPaint(isCurrent)) { currentHexRings = []; currentHexFeatures = []; wm.setData('hex', null); setStatus('heatmap unavailable') }
+    if (mayPaint(isCurrent)) { clearHex(); setStatus('heatmap unavailable') }
     return
   }
   if (!mayPaint(isCurrent)) return
-  // The rings are kept for the click handler: a cell is an aggregate with no
-  // reception of its own, so a click matches it against the ticker's rows.
-  currentHexRings = (fc.features || []).map((f) => f.geometry.coordinates[0].map(([lon, lat]) => [lat, lon]))
-  currentHexFeatures = fc.features || []
-  // The background goes in for the bars' tint (#412): read now, so a theme
-  // switch, which refreshes, rebuilds them over the new ground.
-  wm.setData('hex', hexFeatures(currentHexFeatures, tierColor, cssVar('--ch-bg'), { dim: selectionDimmer().cellDim }))
+  const bySize = new Map(answers.map((a) => [a.res, a]))
+  const capped = answers.some((a) => a.res < a.asked)
+  const maxRes = capped ? Math.max(...bySize.keys()) : SERVER_MAX_RES
+  const sizes = { a: null, b: null }
+  const drawn = { hex: null, 'hex-b': null }
+  for (const a of bySize.values()) {
+    const even = a.res % 2 === 0
+    sizes[even ? 'a' : 'b'] = a.res
+    drawn[even ? 'hex' : 'hex-b'] = a.fc
+  }
+  for (const id of HEX_SLOTS) {
+    const features = (drawn[id] && drawn[id].features) || []
+    // The rings are kept for the click handler: a cell is an aggregate with no
+    // reception of its own, so a click matches it against the ticker's rows.
+    currentHexRings[id] = features.map((f) => f.geometry.coordinates[0].map(([lon, lat]) => [lat, lon]))
+    currentHexFeatures[id] = features
+    // The background goes in for the bars' tint (#412): read now, so a theme
+    // switch, which refreshes, rebuilds them over the new ground.
+    wm.setData(id, features.length ? hexFeatures(features, tierColor, cssVar('--ch-bg'), { dim: selectionDimmer().cellDim }) : null)
+  }
+  wm.setHexSizes(sizes)
+  // The line under the map counts the size drawn in full at this zoom.
+  const shown = (bySize.get(Math.min(maxRes, resForZoom(zoom, SERVER_MAX_RES))) || answers[0]).fc
   // "cells (capped)" under a range button reading All time is a contradiction a
   // reader cannot resolve. The truncation is the most RECENT n receptions, so
   // the honest report is the date it reaches back to (#440).
-  const cover = { truncated: fc.truncated, coversFrom: fc.covers_from }
-  setStatus(coverageLabel(fc.features.length, 'cells', cover) + ignoreSuffix(), coverageTitle(HEATMAP_CAP, cover))
+  const cover = { truncated: shown.truncated, coversFrom: shown.covers_from }
+  setStatus(coverageLabel((shown.features || []).length, 'cells', cover) + ignoreSuffix(), coverageTitle(HEATMAP_CAP, cover))
 }
 
 // The point layer, gated like Locate below (#493). Below member /api/points
@@ -602,8 +654,11 @@ export function refresh() {
     // The else branches take a ticket as well as clearing: a draw started
     // under the previous mode is obsolete the moment the toggle empties its
     // layer, and would otherwise still be the newest and repaint it.
-    if (roleKnown && (mode === 'points' || mode === 'both')) drawPoints(); else { pointsDraw(); currentPoints = []; wm.setData('points', null); wm.setData('points-3d', null) }
-    if (mode === 'hex' || mode === 'both') drawHex(); else { hexDraw(); currentHexRings = []; currentHexFeatures = []; wm.setData('hex', null) }
+    // In auto the points wait for the zoom that shows them (zoomfade.js,
+    // #634): below it their share is nothing, so nothing is fetched either.
+    const pointsOn = mode === 'points' || (mode === 'auto' && pointShare(wm.getZoom(), { mode, mode3D: view3D }) > 0)
+    if (roleKnown && pointsOn) drawPoints(); else { pointsDraw(); currentPoints = []; wm.setData('points', null); wm.setData('points-3d', null) }
+    if (mode === 'hex' || mode === 'auto') drawHex(); else { hexDraw(); clearHex() }
     // Picker works in all modes, not just points mode (#288 blocker 1)
     refreshPickerCandidates()
     refreshHunterPickerCandidates()
@@ -639,6 +694,7 @@ themeBtn.addEventListener('click', () => {
 wm.on('moveend', () => { urlstate.save(); refresh() })
 window.__refresh = refresh
 window.__mapZoom = () => Number(zoomParam(wm.getZoom())) // test hook, in the URL's (Leaflet) zoom units
+window.__mapJumpZoom = (z) => wm.map.jumpTo({ zoom: z }) // test hook, in MapLibre's zoom units
 window.__mapCenter = () => wm.getCenter() // test hook
 window.__mapBounds = () => wm.getBounds() // test hook: the view the registry slice is padded around (#661)
 window.__mapProject = (lat, lon) => wm.project(lat, lon) // test hook
@@ -987,8 +1043,8 @@ function activateLocate() {
   // redraw after Locate recomputes the same signature, takes the early return,
   // and never repopulates — the layer would stay empty for the rest of the
   // session. One clear, one reset.
-  currentPoints = []; currentHexRings = []; currentHexFeatures = []
-  wm.setData('points', null); wm.setData('points-3d', null); wm.setData('hex', null); wm.setData(csAdvertLayer, null); wm.setData(csRelayLayer, null)
+  currentPoints = []; clearHex()
+  wm.setData('points', null); wm.setData('points-3d', null); wm.setData(csAdvertLayer, null); wm.setData(csRelayLayer, null)
   clearNodePosLayer(); nodePosSig = null
   setRxHighlight(null) // suppress ticker rings in focus mode (#287 blocker 3)
   urlstate.save()
@@ -1621,7 +1677,9 @@ function repaintSelection() {
     wm.setData('points', pointFeatures(currentPoints, tierColor, { colorFor: pointHue, dimFor }))
     if (view3D) wm.setData('points-3d', pillarFeatures(currentPoints, wm.getZoom(), tierColor, cssVar('--ch-bg'), { dimFor }))
   }
-  if (currentHexFeatures.length) wm.setData('hex', hexFeatures(currentHexFeatures, tierColor, cssVar('--ch-bg'), { dim: cellDim }))
+  for (const id of HEX_SLOTS) {
+    if (currentHexFeatures[id].length) wm.setData(id, hexFeatures(currentHexFeatures[id], tierColor, cssVar('--ch-bg'), { dim: cellDim }))
+  }
 }
 // The selection that dims the map, read once per paint rather than once per
 // point (coverageSelected builds a fresh Set each call). Only in the reach
@@ -1884,7 +1942,7 @@ senderEl.addEventListener('input', () => { clearTimeout(senderTitleTimer); sende
 urlstate.register({ key: 'theme', get: () => theme,
   set: (v) => { if (v === 'light' || v === 'dark') { theme = v; document.documentElement.setAttribute('data-theme', theme); wm.setTheme(theme); syncThemeBtn() } } })
 urlstate.register({ key: 'mode', get: () => mode,
-  set: (v) => { if (MODES.includes(v)) { mode = v; syncLayerSeg(); applyView() } } })
+  set: (v) => { if (MODES.includes(modeFrom(v))) { mode = modeFrom(v); syncLayerSeg(); applyView() } } })
 // The 3D view and the camera (#595). view is the layer state; pitch and
 // bearing are read at construction like lat/lon/z, so only the getters are
 // needed here, and a flat north-up view keeps them out of the URL.
diff --git a/web/mapcore.js b/web/mapcore.js
index 1e30b904..bede67f3 100644
--- a/web/mapcore.js
+++ b/web/mapcore.js
@@ -18,6 +18,7 @@
 // terrain.js; both are the app's files, pinned byte for byte.
 import { skyForHour, currentHour } from './sky.js'
 import { layerVisibility, pitchTransition } from './maplayers.js'
+import { hexRamp, hexFillOpacity, hexBarHeight, hexBarSwitch, pointRamp, pillarSwitch, pointShare, resForZoom } from './zoomfade.js'
 import { createRayLayer } from './raylayer.js'
 import { northResetEase } from './maprail.js'
 import { EXTRUSION_LIGHT_INTENSITY } from './signal.js'
@@ -46,7 +47,9 @@ const bareStyle = (bg) => ({ version: 8, sources: {}, layers: [{ id: 'bg', type:
 // here, mounted through raylayer.js and above everything by construction.
 export const LAYER_ORDER = [
   'hillshade',
-  'hex', 'hex-outline', 'hex-3d',
+  // Two cell sizes at a time (#634): the -b layers hold the size that is
+  // taking over from, or handing over to, the other.
+  'hex', 'hex-b', 'hex-outline', 'hex-outline-b', 'hex-3d', 'hex-3d-b',
   'buildings-3d',
   'locate-heat',
   'reach',          // the reach lines, under the dots so a hub stays readable
@@ -60,7 +63,7 @@ export const LAYER_ORDER = [
   'rxhighlight',    // the ticker's playhead ring, never under a point
 ]
 // The sources the data layers read, all GeoJSON, all set through setData.
-const GEO_SOURCES = ['hex', 'reach', 'points', 'points-3d', 'observer-advert', 'observer-rxlog', 'locate-in', 'locate-out', 'rxhighlight', 'nodedrift', 'nodecircle', NODE_GLYPH_SOURCE, NODE_DOT_SOURCE]
+const GEO_SOURCES = ['hex', 'hex-b', 'reach', 'points', 'points-3d', 'observer-advert', 'observer-rxlog', 'locate-in', 'locate-out', 'rxhighlight', 'nodedrift', 'nodecircle', NODE_GLYPH_SOURCE, NODE_DOT_SOURCE]
 // The app's ceiling (huntmap.js MAX_PITCH): a near-horizontal camera for the
 // tilt gesture; the view button itself eases to PITCH_3D (maplayers.js).
 const MAX_PITCH = 85
@@ -166,8 +169,9 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
   function applyLayerVisibility() {
     const vis = layerVisibility({ mode: layerMode, mode3D: is3D })
     const set = (id, on) => { if (map.getLayer(id)) map.setLayoutProperty(id, 'visibility', on ? 'visible' : 'none') }
-    for (const id of ['hex', 'hex-3d', 'points', 'points-3d']) set(id, vis[id])
+    for (const id of ['hex', 'hex-b', 'hex-3d', 'hex-3d-b', 'points', 'points-3d']) set(id, vis[id])
     set('hex-outline', vis.hex)
+    set('hex-outline-b', vis['hex-b'])
     set('buildings-3d', is3D)
     applyReachVisibility()
   }
@@ -188,18 +192,28 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
     // Bottom to top: the hex heat and its bars, the buildings, the locate
     // cloud, then the dots and pillars, then the lines and rings that must
     // never sink under a hot cell.
-    if (!map.getLayer('hex')) map.addLayer({ id: 'hex', type: 'fill', source: 'hex', layout: shown(vis.hex),
-      paint: { 'fill-color': ['get', 'color'], 'fill-opacity': ['get', 'op'] } })
-    if (!map.getLayer('hex-outline')) map.addLayer({ id: 'hex-outline', type: 'line', source: 'hex', layout: shown(vis.hex),
-      paint: { 'line-color': ['get', 'color'], 'line-width': 1, 'line-opacity': 0.9 } })
+    // What a zoom fades is written by applyFades (zoomfade.js, #634): the
+    // opacity of the cells, their outline and the points, and the height of
+    // the bars. Nothing shows until it has, and a style load drops it with
+    // the layers, so the signature is cleared here.
+    fadeSig = ''
+    const hexPaint = { 'fill-color': ['get', 'color'], 'fill-opacity': 0 }
+    const outlinePaint = { 'line-color': ['get', 'color'], 'line-width': 1, 'line-opacity': 0 }
+    if (!map.getLayer('hex')) map.addLayer({ id: 'hex', type: 'fill', source: 'hex', layout: shown(vis.hex), paint: hexPaint })
+    if (!map.getLayer('hex-b')) map.addLayer({ id: 'hex-b', type: 'fill', source: 'hex-b', layout: shown(vis['hex-b']), paint: hexPaint })
+    if (!map.getLayer('hex-outline')) map.addLayer({ id: 'hex-outline', type: 'line', source: 'hex', layout: shown(vis.hex), paint: outlinePaint })
+    if (!map.getLayer('hex-outline-b')) map.addLayer({ id: 'hex-outline-b', type: 'line', source: 'hex-b', layout: shown(vis['hex-b']), paint: outlinePaint })
     // 3D twin of 'hex': same source, extruded to 'height' by tier, painted
     // 'pillar', the cell's tint pre-mixed over the background (#412), opaque:
     // fill-extrusion-opacity is one number for the layer, and one opacity for
     // every tier made a faint bar a solid block on a 19% cell. No vertical
     // gradient: colour is the signal, and shading read as another tier.
-    if (!map.getLayer('hex-3d')) map.addLayer({ id: 'hex-3d', type: 'fill-extrusion', source: 'hex', layout: shown(vis['hex-3d']),
-      paint: { 'fill-extrusion-color': ['get', 'pillar'], 'fill-extrusion-height': ['get', 'height'],
-        'fill-extrusion-vertical-gradient': false, 'fill-extrusion-base': 0, 'fill-extrusion-opacity': 1 } })
+    // Opacity 0 until applyFades has written the switch: a bar of no height
+    // still draws an opaque polygon on the ground.
+    const barPaint = { 'fill-extrusion-color': ['get', 'pillar'], 'fill-extrusion-height': 0,
+      'fill-extrusion-vertical-gradient': false, 'fill-extrusion-base': 0, 'fill-extrusion-opacity': 0 }
+    if (!map.getLayer('hex-3d')) map.addLayer({ id: 'hex-3d', type: 'fill-extrusion', source: 'hex', layout: shown(vis['hex-3d']), paint: barPaint })
+    if (!map.getLayer('hex-3d-b')) map.addLayer({ id: 'hex-3d-b', type: 'fill-extrusion', source: 'hex-b', layout: shown(vis['hex-3d-b']), paint: barPaint })
     // Buildings reuse the hosted style's own vector source, already fetched
     // for the 2D basemap, so 3D adds no request; absent on the bare fallback,
     // hence the guard. minzoom 13 is the floor of OpenFreeMap's building
@@ -218,8 +232,8 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
     if (!map.getLayer('reach')) map.addLayer({ id: 'reach', type: 'line', source: 'reach', layout: shown(reachOn && !is3D),
       paint: { 'line-color': ['get', 'color'], 'line-width': ['get', 'w'], 'line-opacity': ['get', 'op'] } })
     if (!map.getLayer('points')) map.addLayer({ id: 'points', type: 'circle', source: 'points', layout: shown(vis.points),
-      paint: { 'circle-radius': 5, 'circle-color': ['get', 'color'], 'circle-opacity': ['get', 'op'],
-        'circle-stroke-color': ['get', 'color'], 'circle-stroke-width': 1 } })
+      paint: { 'circle-radius': 5, 'circle-color': ['get', 'color'], 'circle-opacity': 0,
+        'circle-stroke-color': ['get', 'color'], 'circle-stroke-width': 1, 'circle-stroke-opacity': 0 } })
     // 3D twin of 'points' (#250 in the app): an octagon pillar per reception,
     // tier colour and height as the hex bars, so a point still reads at
     // pitch instead of a flat circle sinking under the bars and buildings.
@@ -274,6 +288,7 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
     // style. The basemap's own layers are not in the list, so they keep their
     // places underneath.
     for (const id of LAYER_ORDER) if (map.getLayer(id)) map.moveLayer(id)
+    applyFades()
     rays.addTo(map)
     rays.setVisible(reachOn && is3D)
     // Terrain rides every style load like the sky: setStyle drops the source.
@@ -303,6 +318,7 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
     layerMode = m
     is3D = !!v
     applyLayerVisibility()
+    applyFades()
     const pitch = pitchTransition(was3D, is3D)
     if (pitch !== null) {
       if (!is3D) applyTerrain()
@@ -339,6 +355,59 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
     if (map.getLayer('reach')) map.setLayoutProperty('reach', 'visibility', reachOn && !is3D ? 'visible' : 'none')
     rays.setVisible(reachOn && is3D)
   }
+  // The zoom expressions of the hex and point layers (zoomfade.js, #634).
+  // Which cell size each hex layer holds is map.js's to say (setHexSizes): the
+  // cells come from the server, and what it sent is what is drawn. The sizes
+  // held are the whole range the ramps know of, so the coarser one stays in
+  // full below its level and the finer one above it: a zoom that runs past
+  // the pair keeps its cells until the refetch on moveend replaces them. Where
+  // the server answered one size, that one is in full at every zoom.
+  let hexSizes = { a: null, b: null }, fadeSig = ''
+  function setHexSizes(sizes) {
+    hexSizes = { a: sizes.a ?? null, b: sizes.b ?? null }
+    applyFades()
+  }
+  function applyFades() {
+    if (!overlaysReady || !map.getLayer('hex')) return
+    const view = { mode: layerMode, mode3D: is3D }
+    const held = [hexSizes.a, hexSizes.b].filter((r) => r != null)
+    const lo = Math.min(...held), hi = Math.max(...held)
+    const sig = [layerMode, is3D ? 3 : 2, hexSizes.a, hexSizes.b].join('|')
+    if (sig === fadeSig) return
+    fadeSig = sig
+    for (const [flat, outline, bar, res] of [['hex', 'hex-outline', 'hex-3d', hexSizes.a], ['hex-b', 'hex-outline-b', 'hex-3d-b', hexSizes.b]]) {
+      if (res == null) {
+        map.setPaintProperty(flat, 'fill-opacity', 0)
+        map.setPaintProperty(outline, 'line-opacity', 0)
+        map.setPaintProperty(bar, 'fill-extrusion-opacity', 0)
+        continue
+      }
+      map.setPaintProperty(flat, 'fill-opacity', hexFillOpacity(res, view, hi, lo))
+      map.setPaintProperty(outline, 'line-opacity', hexRamp(res, view, hi, (v) => Math.round(900 * v) / 1000, lo))
+      map.setPaintProperty(bar, 'fill-extrusion-height', hexBarHeight(res, view, hi, lo))
+      map.setPaintProperty(bar, 'fill-extrusion-opacity', hexBarSwitch(res, view, hi, lo))
+    }
+    map.setPaintProperty('points', 'circle-opacity', pointRamp(view, (v) => ['*', ['get', 'op'], v]))
+    map.setPaintProperty('points', 'circle-stroke-opacity', pointRamp(view, (v) => v))
+    map.setPaintProperty('points-3d', 'fill-extrusion-opacity', pillarSwitch(view))
+  }
+  // Whether a layer's features may take the pointer (#634). Both cell sizes
+  // are loaded and a point can sit at a share near nothing, and
+  // queryRenderedFeatures and layer events ignore paint opacity. So a cell
+  // answers only from the size drawn in full at this zoom (the one the line
+  // under the map counts), and a point only from half its strength on.
+  const HEX_LAYER_SLOT = { hex: 'a', 'hex-3d': 'a', 'hex-b': 'b', 'hex-3d-b': 'b' }
+  function takesPointer(layerId) {
+    const slot = HEX_LAYER_SLOT[layerId]
+    if (slot) {
+      const held = [hexSizes.a, hexSizes.b].filter((r) => r != null)
+      if (!held.length) return false
+      const full = Math.max(Math.min(...held), resForZoom(map.getZoom(), Math.max(...held)))
+      return hexSizes[slot] === full
+    }
+    if (layerId === 'points' || layerId === 'points-3d') return pointShare(map.getZoom(), { mode: layerMode, mode3D: is3D }) >= 0.5
+    return true
+  }
   function setReach(on) { reachOn = !!on; if (overlaysReady) applyReachVisibility() }
   function setData(id, fcOrNull) {
     const data = fcOrNull || EMPTY
@@ -368,7 +437,7 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
   let hover = null
   function hoverText(layerId, textOf) {
     map.on('mousemove', layerId, (e) => {
-      const f = e.features && e.features[0]; if (!f) return
+      const f = e.features && e.features[0]; if (!f || !takesPointer(layerId)) return
       const text = textOf(f.properties)
       if (!text) return
       if (!hover) hover = new maplibregl.Popup({ closeButton: false, closeOnClick: false, className: 'ch-hover', offset: 8 })
@@ -381,7 +450,7 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
   // A click goes to the topmost layer under the pointer that has a handler,
   // and to none below it. MapLibre's own layer listener fires for every layer
   // with a feature under the click, where Leaflet's stopped at the marker: in
-  // 'both' mode a click on a point also ran its hex cell's handler, which
+  // auto mode a click on a point also ran its hex cell's handler, which
   // moved the ticker off the row the point had just focused.
   const clickCbs = new Map()
   // The glyph a click lands on (#632): the nearest ▲ or ● inside the 30px
@@ -400,19 +469,19 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
     if (glyph) { for (const cb of glyphCbs) cb(glyph.properties, glyph.geometry.coordinates); return }
     const layers = [...clickCbs.keys()].filter((id) => map.getLayer(id))
     // queryRenderedFeatures lists the topmost feature first.
-    const f = layers.length ? map.queryRenderedFeatures(e.point, { layers })[0] : null
+    const f = layers.length ? map.queryRenderedFeatures(e.point, { layers }).find((x) => takesPointer(x.layer.id)) : null
     if (!f) return
     for (const cb of clickCbs.get(f.layer.id)) cb(f.properties, e.lngLat, e)
   })
 
   // A click on bare map: no feature of a clickable layer under the pointer,
   // and no glyph in the tap box. This is what clears a selection.
-  const clickable = ['points', 'points-3d', 'hex', 'hex-3d', 'observer-advert', 'observer-rxlog', 'locate-in', 'locate-out']
+  const clickable = ['points', 'points-3d', 'hex', 'hex-b', 'hex-3d', 'hex-3d-b', 'observer-advert', 'observer-rxlog', 'locate-in', 'locate-out']
   function onEmptyClick(cb) {
     map.on('click', (e) => {
       if (glyphAt(e.point)) return
       const layers = clickable.filter((id) => map.getLayer(id))
-      const hit = layers.length ? map.queryRenderedFeatures(e.point, { layers }) : []
+      const hit = layers.length ? map.queryRenderedFeatures(e.point, { layers }).filter((x) => takesPointer(x.layer.id)) : []
       if (!hit.length) cb(e.lngLat)
     })
   }
@@ -481,7 +550,7 @@ export function createWebMap(containerId, { center, zoom, theme = 'dark', mode =
     },
     onOverlaysReady(cb) { readyCbs.push(cb); if (overlaysReady) cb() },
     isReady() { return overlaysReady },
-    setData, setHeat, syncSize,
+    setData, setHeat, syncSize, setHexSizes,
     openPopup, closePopup, onPopup(cb) { popupCbs.push(cb) }, hoverText, onLayerClick, onEmptyClick, onGlyphTap,
     // Test hook (#632): where a glyph paints, in page px, for a real click on it.
     glyphPagePoint(key, kind) {
diff --git a/web/maplayers.js b/web/maplayers.js
index 6782d4cd..d22b1dba 100644
--- a/web/maplayers.js
+++ b/web/maplayers.js
@@ -6,17 +6,25 @@
 // visible than a FAB tap. And huntmap.js is DOM-bound, so AGENTS.md §5 keeps
 // it out of the unit suite; this is the part worth pinning.
 //
-// The 3D rule that is not obvious: when pillars are drawn, the hex layer is
-// drawn FLAT rather than extruded. buildHexFC gives a cell the maximum RSSI
+// What a layer shows at a zoom is not decided here: that is a share, handed
+// to the style as a zoom expression (zoomfade.js, #634). This says which
+// layers exist for a view at all.
+//
+// 'auto' took the place of 'both' in #634: hex and points together, each at
+// the share its zoom gives it.
+//
+// The 3D rule that is not obvious: buildHexFC gives a cell the maximum RSSI
 // inside it, so an extruded bar is by construction at least as tall as every
-// pillar standing in that cell — and both are fill-extrusion sharing one depth
+// pillar standing in that cell, and both are fill-extrusion sharing one depth
 // pass with depth write, so the pillar's fragments fail the depth test and are
-// discarded. (fill-extrusion-opacity does not disable depth writes.) Flattening
-// the hex removes the occluder while keeping the coverage context under the
-// pillars. Extruded bars are still what 'hex' mode shows in 3D — there are no
-// pillars to hide there, and the bars are the whole point of that view.
+// discarded. (fill-extrusion-opacity does not disable depth writes.) Until
+// #634 the hex was therefore drawn FLAT whenever pillars shared the scene.
+// Now the pillars only arrive at zoom 19 (POINT_STEP_3D), and from there the
+// bars stand at 95% of their height (HEX_UNDER_PILLARS_3D), so the strongest
+// pillar of a cell clears its bar. Up to that zoom the bars are the whole
+// view, which is what flat cells under no pillars could not give.
 
-const MODES = ['both', 'hex', 'points']
+const MODES = ['auto', 'hex', 'points']
 
 // The 5-state combined layer+3D cycle (#258): merges the old layer-toggle FAB
 // (both/hex/points) and the 2D/3D FAB into one, freeing a FAB slot. "2D · hex
@@ -24,10 +32,10 @@ const MODES = ['both', 'hex', 'points']
 // matrix (decided 2026-07-16).
 export const VIEW_STATES = [
   { mode: 'points', mode3D: false },
-  { mode: 'both', mode3D: false },
+  { mode: 'auto', mode3D: false },
   { mode: 'hex', mode3D: true },
   { mode: 'points', mode3D: true },
-  { mode: 'both', mode3D: true },
+  { mode: 'auto', mode3D: true },
 ]
 
 // Stable key per VIEW_STATES entry — the icon/label lookup in app.js and the
@@ -39,8 +47,8 @@ export const viewKey = (s) => s.mode + (s.mode3D ? '3d' : '2d')
 // missing entry would otherwise reach a screen reader as "undefined".
 // Comma, not "·": a middle dot is either spoken as "middle dot" or dropped.
 export const VIEW_LABELS = {
-  points2d: '2D, points', both2d: '2D, hex + points', hex3d: '3D, hex',
-  points3d: '3D, points', both3d: '3D, hex + points',
+  points2d: '2D, points', auto2d: '2D, hex, points when zoomed in', hex3d: '3D, hex',
+  points3d: '3D, points', auto3d: '3D, hex, points when zoomed in',
 }
 
 // Cycles forward through VIEW_STATES. An out-of-range index (corrupt/legacy
@@ -72,19 +80,23 @@ export function pitchTransition(was3D, is3D) {
 export function layerVisibility({ mode, mode3D } = {}) {
   // Unknown/absent mode follows the app's cold default rather than hiding
   // everything, so a corrupt persisted value can't produce a blank map.
-  const m = MODES.includes(mode) ? mode : 'hex'
+  // 'both' is what a view stored before #634 still says: it reads as auto.
+  const m = mode === 'both' ? 'auto' : MODES.includes(mode) ? mode : 'hex'
   const showHex = m !== 'points'
   const showPoints = m !== 'hex'
 
   if (!mode3D) {
     // The hex labels (#556) ride the flat hex layer, in 2D only; the pulse
     // rings where the flat points are drawn, and its 3D form stays off here.
-    return { hex: showHex, 'hex-3d': false, points: showPoints, 'points-3d': false, 'hex-labels': showHex, pulse: showPoints, 'pulse-3d': false }
+    return { hex: showHex, 'hex-b': showHex, 'hex-3d': false, 'hex-3d-b': false, points: showPoints, 'points-3d': false, 'hex-labels': showHex, pulse: showPoints, 'pulse-3d': false }
   }
   return {
-    // Flat when pillars share the scene, extruded when they don't.
-    hex: showHex && showPoints,
-    'hex-3d': showHex && !showPoints,
+    // Extruded whenever the hex is on (#634); see the 3D rule above.
+    hex: false,
+    'hex-b': false,
+    'hex-3d': showHex,
+    // The second cell size, while one takes over from the other (zoomfade.js).
+    'hex-3d-b': showHex,
     points: false,
     'points-3d': showPoints,
     // A label on a pillar's top would float at ground level under it, and the
diff --git a/web/maplayers.test.js b/web/maplayers.test.js
index 32164255..c6f54f82 100644
--- a/web/maplayers.test.js
+++ b/web/maplayers.test.js
@@ -9,8 +9,8 @@ import { layerVisibility, pitchFor, pitchTransition, PITCH_3D, VIEW_STATES, VIEW
 const vis = (mode, mode3D) => layerVisibility({ mode, mode3D })
 
 describe('layerVisibility in 2D', () => {
-  it('both shows the flat hex and the flat points', () => {
-    expect(vis('both', false)).toMatchObject({ hex: true, points: true, 'hex-3d': false, 'points-3d': false })
+  it('auto shows the flat hex and the flat points', () => {
+    expect(vis('auto', false)).toMatchObject({ hex: true, points: true, 'hex-3d': false, 'points-3d': false })
   })
   it('hex shows only the flat hex', () => {
     expect(vis('hex', false)).toMatchObject({ hex: true, points: false })
@@ -19,7 +19,7 @@ describe('layerVisibility in 2D', () => {
     expect(vis('points', false)).toMatchObject({ hex: false, points: true })
   })
   it('never shows a 3D layer in 2D', () => {
-    for (const m of ['both', 'hex', 'points']) {
+    for (const m of ['auto', 'hex', 'points']) {
       expect(vis(m, false)).toMatchObject({ 'hex-3d': false, 'points-3d': false })
     }
   })
@@ -32,17 +32,16 @@ describe('layerVisibility in 3D', () => {
   // write. The pillar's fragments lose the depth test and vanish. Drawing the
   // hex FLAT on the ground removes the occluder entirely while keeping the
   // coverage context under the pillars.
-  it('draws hex FLAT under the pillars when both layers are shown', () => {
-    expect(vis('both', true)).toMatchObject({
-      hex: true, 'hex-3d': false, 'points-3d': true, points: false,
+  // Since #634 the pillars arrive at zoom 19 only and the bars drop to 95%
+  // from there (zoomfade.js), so auto draws the bars extruded, not flat.
+  it('draws the hex extruded in auto, with the pillar layer on beside it', () => {
+    expect(vis('auto', true)).toMatchObject({
+      hex: false, 'hex-3d': true, 'points-3d': true, points: false,
     })
   })
 
-  it('never shows extruded hex and pillars at the same time', () => {
-    for (const m of ['both', 'hex', 'points']) {
-      const v = vis(m, true)
-      expect(v['hex-3d'] && v['points-3d']).toBe(false)
-    }
+  it('never draws the hex flat in 3D', () => {
+    for (const m of ['auto', 'hex', 'points']) expect(vis(m, true).hex).toBe(false)
   })
 
   it('keeps the extruded bars when hex is the only layer — that is what 3D hex is for', () => {
@@ -58,16 +57,16 @@ describe('layerVisibility in 3D', () => {
   })
 
   it('never shows a flat point layer in 3D', () => {
-    for (const m of ['both', 'hex', 'points']) expect(vis(m, true).points).toBe(false)
+    for (const m of ['auto', 'hex', 'points']) expect(vis(m, true).points).toBe(false)
   })
 })
 
 describe('layerVisibility is total', () => {
   it('always answers for every layer it decides, so a caller cannot read undefined', () => {
-    for (const m of ['both', 'hex', 'points']) {
+    for (const m of ['auto', 'hex', 'points']) {
       for (const d of [true, false]) {
         const v = vis(m, d)
-        for (const k of ['hex', 'hex-3d', 'points', 'points-3d', 'hex-labels', 'pulse', 'pulse-3d']) {
+        for (const k of ['hex', 'hex-b', 'hex-3d', 'hex-3d-b', 'points', 'points-3d', 'hex-labels', 'pulse', 'pulse-3d']) {
           expect(typeof v[k], `${m}/${d} ${k}`).toBe('boolean')
         }
       }
@@ -76,6 +75,19 @@ describe('layerVisibility is total', () => {
   it('treats an unknown mode as the cold default (hex), not as nothing visible', () => {
     expect(vis('', false)).toMatchObject({ hex: true, points: false })
   })
+  // Two cell sizes are on the map while one takes over from the other (#634),
+  // so the hex is two layers, and the second follows the first in every view.
+  it('shows the second cell size wherever it shows the first', () => {
+    for (const m of ['auto', 'hex', 'points']) for (const d of [true, false]) {
+      const v = vis(m, d)
+      expect(v['hex-b'], `${m}/${d}`).toBe(v.hex)
+      expect(v['hex-3d-b'], `${m}/${d}`).toBe(v['hex-3d'])
+    }
+  })
+  it('reads both, the name auto had until #634, as auto', () => {
+    expect(vis('both', false)).toEqual(vis('auto', false))
+    expect(vis('both', true)).toEqual(vis('auto', true))
+  })
 })
 
 // #648: with the age fade gone, nothing in 3D said "this one just arrived".
@@ -86,18 +98,18 @@ describe('layerVisibility is total', () => {
 describe('the arrival pulse has a form per dimension (#648)', () => {
   it('rings on the ground in 2D, where the flat dots are', () => {
     expect(vis('points', false)).toMatchObject({ pulse: true, 'pulse-3d': false })
-    expect(vis('both', false)).toMatchObject({ pulse: true, 'pulse-3d': false })
+    expect(vis('auto', false)).toMatchObject({ pulse: true, 'pulse-3d': false })
   })
   it('flashes the pillar in 3D, where the dots are pillars', () => {
     expect(vis('points', true)).toMatchObject({ pulse: false, 'pulse-3d': true })
-    expect(vis('both', true)).toMatchObject({ pulse: false, 'pulse-3d': true })
+    expect(vis('auto', true)).toMatchObject({ pulse: false, 'pulse-3d': true })
   })
   it('does neither in hex mode, which draws no receptions to mark', () => {
     expect(vis('hex', false)).toMatchObject({ pulse: false, 'pulse-3d': false })
     expect(vis('hex', true)).toMatchObject({ pulse: false, 'pulse-3d': false })
   })
   it('never shows both forms at once', () => {
-    for (const m of ['both', 'hex', 'points']) {
+    for (const m of ['auto', 'hex', 'points']) {
       for (const d of [true, false]) {
         const v = vis(m, d)
         expect(v.pulse && v['pulse-3d'], `${m}/${d}`).toBe(false)
@@ -113,10 +125,10 @@ describe('VIEW_STATES / nextViewIndex (#258)', () => {
   it('has exactly the 5 states in the decided order, dropping 2D hex-only', () => {
     expect(VIEW_STATES).toEqual([
       { mode: 'points', mode3D: false },
-      { mode: 'both', mode3D: false },
+      { mode: 'auto', mode3D: false },
       { mode: 'hex', mode3D: true },
       { mode: 'points', mode3D: true },
-      { mode: 'both', mode3D: true },
+      { mode: 'auto', mode3D: true },
     ])
   })
   it('never contains the dropped 2D-hex-only combination', () => {
@@ -154,7 +166,7 @@ describe('VIEW_LABELS covers VIEW_STATES (#258)', () => {
     for (const l of Object.values(VIEW_LABELS)) expect(l).not.toContain('·')
   })
   it('gives 2D and 3D distinct keys for the same layer mode', () => {
-    expect(viewKey({ mode: 'both', mode3D: false })).not.toBe(viewKey({ mode: 'both', mode3D: true }))
+    expect(viewKey({ mode: 'auto', mode3D: false })).not.toBe(viewKey({ mode: 'auto', mode3D: true }))
   })
 })
 
@@ -216,3 +228,38 @@ describe('pitchTransition — which FAB taps move the camera', () => {
     expect(moved.map(viewKey)).toEqual(['points2d', 'hex3d'])
   })
 })
+
+// The hex labels (#556) ride the flat hex layer only: a label on a pillar's
+// top would float at ground level under the pillar, so 3D keeps its drawing.
+describe('layerVisibility carries the hex labels', () => {
+  it('shows them exactly when the flat hex layer is on, in 2D', () => {
+    expect(vis('auto', false)['hex-labels']).toBe(true)
+    expect(vis('hex', false)['hex-labels']).toBe(true)
+    expect(vis('points', false)['hex-labels']).toBe(false)
+  })
+  it('never shows them in 3D', () => {
+    expect(vis('auto', true)['hex-labels']).toBe(false)
+    expect(vis('hex', true)['hex-labels']).toBe(false)
+  })
+})
+
+// The pulse (#556) rings on the reception that just arrived, so it follows the
+// flat point layer (Kasper, 2026-09-11): in hex mode no point is drawn for the
+// reception, and in 3D the flat ring would sit on the ground under its pillar.
+describe('layerVisibility carries the pulse', () => {
+  it('rings where the flat points are drawn', () => {
+    expect(vis('auto', false).pulse).toBe(true)
+    expect(vis('points', false).pulse).toBe(true)
+  })
+  it('does not ring in hex mode, where no point is drawn', () => {
+    expect(vis('hex', false).pulse).toBe(false)
+  })
+  it('does not ring in 3D, under the pillars', () => {
+    for (const m of ['auto', 'hex', 'points']) expect(vis(m, true).pulse).toBe(false)
+  })
+  it('never disagrees with the flat point layer', () => {
+    for (const m of ['auto', 'hex', 'points', '']) {
+      for (const d of [true, false]) expect(vis(m, d).pulse).toBe(vis(m, d).points)
+    }
+  })
+})
diff --git a/web/parity.test.js b/web/parity.test.js
index b74f6bb6..0b8f0ac0 100644
--- a/web/parity.test.js
+++ b/web/parity.test.js
@@ -1342,8 +1342,8 @@ describe('files copied whole from the app (#595)', () => {
   // and the 3D ray buffers are one rule on both maps. fabring.js and
   // nodeposmode.js (#630) join it too: the map's node-positions button is the
   // app's FAB, with the same stops, labels and ring. attribution.js (#661)
-  // joins it: which node a relay id belongs to is one rule on both surfaces.
-  for (const name of ['signal.js', 'maplayers.js', 'pointmarker.js', 'terrain.js', 'coverage.js', 'raylayer.js', 'fabring.js', 'nodeposmode.js', 'attribution.js']) {
+  // joins it: which node a relay id belongs to is one rule on both surfaces. zoomfade.js (#634) joins it: what a zoom shows.
+  for (const name of ['signal.js', 'maplayers.js', 'pointmarker.js', 'terrain.js', 'coverage.js', 'raylayer.js', 'fabring.js', 'nodeposmode.js', 'attribution.js', 'zoomfade.js']) {
     it(`web/${name} is app/src/${name}`, () => {
       const web = readFileSync(new URL(`./${name}`, import.meta.url), 'utf8')
       const app = readFileSync(new URL(`../app/src/${name}`, import.meta.url), 'utf8')
diff --git a/web/zoomfade.js b/web/zoomfade.js
new file mode 100644
index 00000000..502fcc6d
--- /dev/null
+++ b/web/zoomfade.js
@@ -0,0 +1,208 @@
+// What the map shows at a zoom, as shares between 0 and 1 (#634). Every rule
+// here used to be a step in JS: a threshold crossed, the data rebuilt, and the
+// thing appeared or vanished in one frame. A share is handed to the style as a
+// zoom expression, so the map eases it while the fingers are still moving.
+//
+// The numbers are Kasper's, picked on 29 September 2026 by pinching through a
+// mockup with 4559 receptions between Nijmegen and Arnhem, in 2D and in 3D.
+// Zoom is MapLibre's throughout.
+//
+// Copied whole between app/src/ and web/ (parity.test.js), since neither deploy
+// path can ship a file outside its own directory (#238). No imports.
+
+// The points of this ride come in over the hex, which stays at full strength.
+export const POINT_FADE_2D = { from: 13.25, to: 18.25 }
+// Earlier rides come in as outlines. It was a step at zoom 12 (#668).
+export const BACKLOG_FADE_2D = { from: 11.25, to: 18.75 }
+// The names in a cell. It was a step at zoom 16.
+export const LABEL_FADE = { from: 15.5, to: 16.5 }
+// In 3D a pillar per reception is the most expensive thing on the map, so the
+// pillars wait for the closest zoom and arrive in one step, this ride and the
+// earlier ones together. From there the hex bars stand at 95% of their height,
+// so the strongest pillar in a cell clears the bar it stands in.
+export const POINT_STEP_3D = 19
+export const HEX_UNDER_PILLARS_3D = 0.95
+// How many zoom levels two cell sizes share while one takes over from the
+// other, centred on the zoom where the size changes.
+export const HEX_BLEND_2D = 0.95
+export const HEX_BLEND_3D = 0.75
+export const hexBlend = (mode3D) => (mode3D ? HEX_BLEND_3D : HEX_BLEND_2D)
+
+const clamp01 = (v) => Math.max(0, Math.min(1, v))
+// ramp: 0 up to `from`, 1 from `to`, a straight line between. A band of no
+// width is a step at `from`.
+export function ramp(z, { from, to }) {
+  if (!(to > from)) return z >= from ? 1 : 0
+  return clamp01((z - from) / (to - from))
+}
+
+// The layer modes. 'auto' took the place of 'both': the two layers together,
+// each at the share its zoom gives it. 'hex' and 'points' draw one layer at
+// full strength, whatever the zoom.
+export const LAYER_MODES = ['auto', 'hex', 'points']
+const modeOf = (mode) => (LAYER_MODES.includes(mode) ? mode : 'auto')
+
+export function pointShare(z, { mode, mode3D } = {}) {
+  const m = modeOf(mode)
+  if (m === 'hex') return 0
+  if (m === 'points') return 1
+  return mode3D ? (z >= POINT_STEP_3D ? 1 : 0) : ramp(z, POINT_FADE_2D)
+}
+export function hexShare(z, { mode, mode3D } = {}) {
+  const m = modeOf(mode)
+  if (m === 'points') return 0
+  if (m === 'hex' || !mode3D) return 1
+  return z >= POINT_STEP_3D ? HEX_UNDER_PILLARS_3D : 1
+}
+// An earlier ride's share of its own point. In 3D it arrives with the pillars.
+export function backlogShare(z, { mode3D } = {}) {
+  return mode3D ? 1 : ramp(z, BACKLOG_FADE_2D)
+}
+export const labelShare = (z) => ramp(z, LABEL_FADE)
+
+// ---- cell sizes -------------------------------------------------------------
+// One size per zoom level, the server's rule (server/internal/geo/hexgrid.go):
+// the resolution is the Leaflet zoom, which is MapLibre's plus one, rounded
+// (web/mapmodel.js leafletZoom). So resolution r is the one drawn from zoom
+// r - 1.5 up to r - 0.5, and the size changes on every half.
+export const HEX_MIN_RES = 3
+export function resForZoom(z, maxRes) {
+  return Math.max(HEX_MIN_RES, Math.min(maxRes, Math.round(Number(z) + 1)))
+}
+// The two sizes alive around the nearest change of size: the coarser below it
+// and the finer above. At the ends of the range the two are the same one.
+export function resPair(z, maxRes) {
+  const k = Math.floor(Number(z))
+  const lim = (r) => Math.max(HEX_MIN_RES, Math.min(maxRes, r))
+  return { coarse: lim(k + 1), fine: lim(k + 2) }
+}
+// resShare: how much of resolution `res` the map shows at zoom z. Full inside
+// its own zoom level, and over `width` levels around each end it hands over to
+// its neighbour, so the two shares always add up to 1. The coarsest and the
+// finest have no neighbour on one side and stay full there. `minRes` and
+// `maxRes` are the sizes there are: the website holds the pair it fetched as
+// its whole range, so that pair stays on the map when the zoom runs past it
+// before the next one arrives.
+export function resShare(res, z, width, maxRes, minRes = HEX_MIN_RES) {
+  const lo = res - 1.5, hi = res - 0.5
+  const up = res <= minRes ? 1 : ramp(z, { from: lo - width / 2, to: lo + width / 2 })
+  const down = res >= maxRes ? 0 : ramp(z, { from: hi - width / 2, to: hi + width / 2 })
+  return Math.min(up, 1 - down)
+}
+// The zooms where resShare bends, which is where an expression needs a stop.
+export function resBreaks(res, width, maxRes, minRes = HEX_MIN_RES) {
+  const lo = res - 1.5, hi = res - 0.5
+  return [
+    ...(res <= minRes ? [] : [lo - width / 2, lo + width / 2]),
+    ...(res >= maxRes ? [] : [hi - width / 2, hi + width / 2]),
+  ]
+}
+
+// ---- style expressions --------------------------------------------------------
+// MapLibre takes ['zoom'] only as the input of a top-level interpolate or
+// step, so a share cannot be multiplied into a paint value around the ramp.
+// It rides in each stop's output instead: `wrap` turns the share at a stop
+// into that output, e.g. (v) => ['*', ['get', 'op'], v].
+//
+// A step inside a ramp is two stops STEP_EPS apart, since stops have to rise.
+export const STEP_EPS = 0.001
+const round3 = (v) => Math.round(v * 1000) / 1000
+function stopsFor(breaks) {
+  const zs = [...new Set(breaks.map(round3))].sort((a, b) => a - b)
+  return zs.length ? zs : [0]
+}
+// zoomRamp: a linear interpolate through shareAt at every break. Exact when
+// shareAt is a straight line between two breaks.
+export function zoomRamp(breaks, shareAt, wrap = (v) => v) {
+  const zs = stopsFor(breaks)
+  if (zs.length === 1) return wrap(round3(shareAt(zs[0])))
+  return ['interpolate', ['linear'], ['zoom'], ...zs.flatMap((z) => [z, wrap(round3(shareAt(z)))])]
+}
+// zoomSwitch: 1 where shareAt is above nothing, 0 elsewhere, as a step. For
+// what cannot be partly there: a fill-extrusion of no height still draws an
+// opaque polygon on the ground, and one with an opacity between 0 and 1
+// dissolves toward black (docs/2026-09-04-new-versus-old-on-the-map.md).
+export function zoomSwitch(breaks, shareAt) {
+  const zs = stopsFor(breaks)
+  const on = (z) => (shareAt(z) > 0 ? 1 : 0)
+  // The value of a segment is the value just inside it.
+  const inside = (i) => on(i + 1 < zs.length ? (zs[i] + zs[i + 1]) / 2 : zs[i] + 1)
+  return ['step', ['zoom'], on(zs[0] - 1), ...zs.flatMap((z, i) => [z, inside(i)])]
+}
+// A step at `at`, as the two breaks a ramp needs for it.
+export const stepBreaks = (at) => [at - STEP_EPS, at]
+// Breaks every `every` zoom levels between two zooms, for a share that is a
+// curve there (the product of two ramps).
+export function sampledBreaks(from, to, every = 0.25) {
+  const out = []
+  for (let z = from; z < to + 1e-9; z += every) out.push(z)
+  out.push(to)
+  return out
+}
+
+// ---- what the layers are painted with ------------------------------------------
+// Two hex layers, since two cell sizes are on the map while one takes over
+// from the other. A size keeps its layer for as long as it is drawn: the even
+// resolutions go to slot a and the odd ones to b. The pair moves up one at
+// every whole zoom, which is the middle of a level, where the size that stays
+// is at full strength and the one that leaves is at nothing. So the swap is
+// never seen.
+export function hexSlots(z, maxRes) {
+  const { coarse, fine } = resPair(z, maxRes)
+  const slots = { a: null, b: null }
+  for (const res of [coarse, fine]) slots[res % 2 === 0 ? 'a' : 'b'] = res
+  return slots
+}
+
+const hexBreaks = (res, view, maxRes, minRes) => [
+  ...resBreaks(res, hexBlend(view.mode3D), maxRes, minRes),
+  // The bars drop to 95% where the pillars arrive, in auto in 3D only.
+  ...(view.mode3D && modeOf(view.mode) === 'auto' ? stepBreaks(POINT_STEP_3D) : []),
+]
+const hexShareOf = (res, view, maxRes, minRes) => (z) => resShare(res, z, hexBlend(view.mode3D), maxRes, minRes) * hexShare(z, view)
+
+// The flat cells: each cell's own opacity ('op') times the share.
+export function hexFillOpacity(res, view, maxRes, minRes) {
+  return zoomRamp(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes), (v) => ['*', ['get', 'op'], v])
+}
+// The bars: a bar cannot be see-through, so its share is its height, and the
+// layer is switched off where the share is nothing.
+export function hexBarHeight(res, view, maxRes, minRes) {
+  return zoomRamp(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes), (v) => ['*', ['get', 'height'], v])
+}
+export function hexBarSwitch(res, view, maxRes, minRes) {
+  return zoomSwitch(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes))
+}
+
+// The flat points. A point of an earlier ride ('backlog' 1) has no fill and
+// takes the share of the points times its own, which is a curve where both
+// move, so that stretch is sampled.
+const BACKLOG = ['==', ['get', 'backlog'], 1]
+const pointBreaks = (view) => (modeOf(view.mode) === 'auto' ? [POINT_FADE_2D.from, POINT_FADE_2D.to] : [])
+export function pointFillOpacity(view) {
+  return zoomRamp(pointBreaks(view), (z) => pointShare(z, view), (v) => ['case', BACKLOG, 0, ['*', ['get', 'fop'], v]])
+}
+export function pointStrokeOpacity(view) {
+  const zs = [...pointBreaks(view), ...sampledBreaks(BACKLOG_FADE_2D.from, BACKLOG_FADE_2D.to)]
+  const at = (z) => {
+    const p = pointShare(z, view)
+    return ['case', BACKLOG, ['*', ['get', 'op'], round3(p * backlogShare(z, view))], ['*', ['get', 'op'], round3(p)]]
+  }
+  const stops = stopsFor(zs)
+  return ['interpolate', ['linear'], ['zoom'], ...stops.flatMap((z) => [z, at(z)])]
+}
+// The pillars: on or off, never partly (zoomSwitch).
+export function pillarSwitch(view) {
+  if (modeOf(view.mode) !== 'auto') return pointShare(0, view)
+  return zoomSwitch(stepBreaks(POINT_STEP_3D), (z) => pointShare(z, view))
+}
+
+// The same two ramps for a layer that names its own properties. The website's
+// cells carry an outline and its points no ride, so it writes its own outputs
+// around the shares the app uses.
+export function hexRamp(res, view, maxRes, wrap, minRes) {
+  return zoomRamp(hexBreaks(res, view, maxRes, minRes), hexShareOf(res, view, maxRes, minRes), wrap)
+}
+export function pointRamp(view, wrap) {
+  return zoomRamp(pointBreaks(view), (z) => pointShare(z, view), wrap)
+}
diff --git a/web/zoomfade.test.js b/web/zoomfade.test.js
new file mode 100644
index 00000000..0de05764
--- /dev/null
+++ b/web/zoomfade.test.js
@@ -0,0 +1,297 @@
+import { describe, it, expect } from 'vitest'
+import {
+  ramp, pointShare, hexShare, backlogShare, labelShare, resForZoom, resPair, resShare, resBreaks,
+  zoomRamp, zoomSwitch, stepBreaks, sampledBreaks, hexBlend, STEP_EPS, LAYER_MODES,
+} from './zoomfade.js'
+
+const MAX = 21
+
+describe('ramp', () => {
+  it('is 0 before, 1 after and a straight line between', () => {
+    const band = { from: 10, to: 12 }
+    expect(ramp(9, band)).toBe(0)
+    expect(ramp(10, band)).toBe(0)
+    expect(ramp(11, band)).toBe(0.5)
+    expect(ramp(12, band)).toBe(1)
+    expect(ramp(20, band)).toBe(1)
+  })
+  it('is a step when the band has no width', () => {
+    expect(ramp(18.99, { from: 19, to: 19 })).toBe(0)
+    expect(ramp(19, { from: 19, to: 19 })).toBe(1)
+  })
+})
+
+describe('the shares of 29 September 2026 (#634)', () => {
+  it('auto in 2D: the points come in from 13.25 to 18.25 over a hex that stays full', () => {
+    const v = { mode: 'auto', mode3D: false }
+    expect(pointShare(13.25, v)).toBe(0)
+    expect(pointShare(15.75, v)).toBe(0.5)
+    expect(pointShare(18.25, v)).toBe(1)
+    for (const z of [5, 13.25, 16, 18.25, 21]) expect(hexShare(z, v), `zoom ${z}`).toBe(1)
+  })
+  it('auto in 3D: the pillars arrive in one step at zoom 19, and the bars drop to 95%', () => {
+    const v = { mode: 'auto', mode3D: true }
+    expect(pointShare(18.99, v)).toBe(0)
+    expect(pointShare(19, v)).toBe(1)
+    expect(hexShare(18.99, v)).toBe(1)
+    expect(hexShare(19, v)).toBe(0.95)
+  })
+  it('hex and points draw one layer at full strength, whatever the zoom', () => {
+    for (const mode3D of [false, true]) for (const z of [5, 14, 19, 21]) {
+      expect(pointShare(z, { mode: 'points', mode3D })).toBe(1)
+      expect(hexShare(z, { mode: 'points', mode3D })).toBe(0)
+      expect(pointShare(z, { mode: 'hex', mode3D })).toBe(0)
+      expect(hexShare(z, { mode: 'hex', mode3D })).toBe(1)
+    }
+  })
+  it('reads an unknown mode as auto, so a stored value from before cannot blank the map', () => {
+    expect(LAYER_MODES).toEqual(['auto', 'hex', 'points'])
+    expect(pointShare(18.25, { mode: 'both', mode3D: false })).toBe(1)
+    expect(hexShare(18.25, { mode: undefined, mode3D: false })).toBe(1)
+  })
+  it('earlier rides come in from 11.25 to 18.75 in 2D, and with the pillars in 3D', () => {
+    expect(backlogShare(11.25, { mode3D: false })).toBe(0)
+    expect(backlogShare(15, { mode3D: false })).toBe(0.5)
+    expect(backlogShare(18.75, { mode3D: false })).toBe(1)
+    expect(backlogShare(5, { mode3D: true })).toBe(1)
+  })
+  it('cell names come in from 15.5 to 16.5', () => {
+    expect(labelShare(15.5)).toBe(0)
+    expect(labelShare(16)).toBe(0.5)
+    expect(labelShare(16.5)).toBe(1)
+  })
+  it('blends two cell sizes over 0.95 of a zoom level in 2D and 0.75 in 3D', () => {
+    expect(hexBlend(false)).toBe(0.95)
+    expect(hexBlend(true)).toBe(0.75)
+  })
+})
+
+describe('cell sizes: one per zoom level, the server\'s rule', () => {
+  it('is the Leaflet zoom, one above MapLibre\'s, rounded and clamped', () => {
+    expect(resForZoom(13, MAX)).toBe(14)
+    expect(resForZoom(13.49, MAX)).toBe(14)
+    expect(resForZoom(13.5, MAX)).toBe(15)
+    expect(resForZoom(0, MAX)).toBe(3)
+    expect(resForZoom(22, MAX)).toBe(21)
+    expect(resForZoom(22, 18)).toBe(18)
+  })
+  it('names the two sizes around the nearest change', () => {
+    expect(resPair(13.2, MAX)).toEqual({ coarse: 14, fine: 15 })
+    expect(resPair(13.9, MAX)).toEqual({ coarse: 14, fine: 15 })
+    expect(resPair(14, MAX)).toEqual({ coarse: 15, fine: 16 })
+    expect(resPair(21.5, MAX)).toEqual({ coarse: 21, fine: 21 })
+  })
+  it('shows a size in full at the middle of its level and half at each end', () => {
+    expect(resShare(14, 13, 0.95, MAX)).toBe(1)
+    expect(resShare(14, 13.5, 0.95, MAX)).toBeCloseTo(0.5, 9)
+    expect(resShare(14, 12.5, 0.95, MAX)).toBeCloseTo(0.5, 9)
+    expect(resShare(14, 14, 0.95, MAX)).toBe(0)
+  })
+  it('adds up to 1 over the pair at every zoom, for both widths', () => {
+    for (const width of [0.95, 0.75]) for (let z = 2; z <= 22; z += 0.05) {
+      const { coarse, fine } = resPair(z, MAX)
+      const sum = coarse === fine ? resShare(coarse, z, width, MAX) : resShare(coarse, z, width, MAX) + resShare(fine, z, width, MAX)
+      expect(sum, `zoom ${z.toFixed(2)} width ${width}`).toBeCloseTo(1, 9)
+    }
+  })
+  it('shows no third size anywhere', () => {
+    for (let z = 2; z <= 22; z += 0.05) {
+      const { coarse, fine } = resPair(z, MAX)
+      for (let res = 3; res <= MAX; res++) {
+        if (res === coarse || res === fine) continue
+        expect(resShare(res, z, 0.95, MAX), `res ${res} at zoom ${z.toFixed(2)}`).toBe(0)
+      }
+    }
+  })
+  it('keeps the coarsest and the finest full past their end of the range', () => {
+    expect(resShare(3, 0, 0.95, MAX)).toBe(1)
+    expect(resShare(MAX, 22, 0.95, MAX)).toBe(1)
+    expect(resShare(18, 22, 0.95, 18)).toBe(1)
+  })
+  it('holds a pair fetched at an earlier zoom in full past both its ends, until the next pair arrives', () => {
+    // The website fetched 14 and 15 at zoom 13; the view zoomed on before the
+    // refetch. Its pair is the whole range there is, so it never falls to 0.
+    for (let z = 10; z <= 17; z += 0.05) {
+      const sum = resShare(14, z, 0.95, 15, 14) + resShare(15, z, 0.95, 15, 14)
+      expect(sum, `zoom ${z.toFixed(2)}`).toBeCloseTo(1, 9)
+    }
+    expect(resShare(14, 11, 0.95, 15, 14)).toBe(1)
+    expect(resShare(15, 14.9, 0.95, 15, 14)).toBe(1)
+    expect(resBreaks(14, 0.5, 15, 14)).toEqual([13.25, 13.75])
+    expect(resBreaks(15, 0.5, 15, 14)).toEqual([13.25, 13.75])
+  })
+  it('is a hard step with no width, which is what it was', () => {
+    expect(resShare(14, 13.49, 0, MAX)).toBe(1)
+    expect(resShare(14, 13.5, 0, MAX)).toBe(0)
+    expect(resShare(15, 13.5, 0, MAX)).toBe(1)
+  })
+  it('breaks where the share bends', () => {
+    expect(resBreaks(14, 0.5, MAX)).toEqual([12.25, 12.75, 13.25, 13.75])
+    expect(resBreaks(3, 0.5, MAX)).toEqual([2.25, 2.75])
+    expect(resBreaks(MAX, 0.5, MAX)).toEqual([19.25, 19.75])
+  })
+})
+
+describe('style expressions', () => {
+  const evalRamp = (expr, z) => {
+    if (!Array.isArray(expr)) return expr
+    const stops = expr.slice(3)
+    if (z <= stops[0]) return stops[1]
+    for (let i = 2; i < stops.length; i += 2) {
+      if (z <= stops[i]) {
+        const t = (z - stops[i - 2]) / (stops[i] - stops[i - 2])
+        return stops[i - 1] + t * (stops[i + 1] - stops[i - 1])
+      }
+    }
+    return stops[stops.length - 1]
+  }
+  const evalStep = (expr, z) => {
+    let v = expr[2]
+    for (let i = 3; i < expr.length; i += 2) if (z >= expr[i]) v = expr[i + 1]
+    return v
+  }
+  it('builds an interpolate on zoom with stops that rise', () => {
+    const expr = zoomRamp([13.25, 18.25, 13.25], (z) => ramp(z, { from: 13.25, to: 18.25 }))
+    expect(expr).toEqual(['interpolate', ['linear'], ['zoom'], 13.25, 0, 18.25, 1])
+  })
+  it('carries the per-feature value in the output, not around the ramp', () => {
+    const expr = zoomRamp([10, 12], (z) => ramp(z, { from: 10, to: 12 }), (v) => ['*', ['get', 'op'], v])
+    expect(expr[0]).toBe('interpolate')
+    expect(expr[4]).toEqual(['*', ['get', 'op'], 0])
+    expect(expr[6]).toEqual(['*', ['get', 'op'], 1])
+  })
+  it('follows a size\'s share through its whole level', () => {
+    const expr = zoomRamp(resBreaks(14, 0.95, MAX), (z) => resShare(14, z, 0.95, MAX))
+    for (let z = 11; z <= 15; z += 0.01) expect(evalRamp(expr, z), `zoom ${z.toFixed(2)}`).toBeCloseTo(resShare(14, z, 0.95, MAX), 2)
+  })
+  it('holds a step inside a ramp, within a thousandth of a zoom level', () => {
+    const share = (z) => resShare(20, z, 0.75, MAX) * hexShare(z, { mode: 'auto', mode3D: true })
+    const expr = zoomRamp([...resBreaks(20, 0.75, MAX), ...stepBreaks(19)], share)
+    expect(evalRamp(expr, 19 - STEP_EPS)).toBeCloseTo(1, 2)
+    expect(evalRamp(expr, 19)).toBeCloseTo(0.95, 2)
+    expect(evalRamp(expr, 19.2)).toBeCloseTo(share(19.2), 2)
+  })
+  it('is a constant when there is nothing to bend', () => {
+    expect(zoomRamp([], () => 1)).toBe(1)
+    expect(zoomRamp([], () => 1, (v) => ['*', ['get', 'op'], v])).toEqual(['*', ['get', 'op'], 1])
+  })
+  it('switches a layer off exactly where its share is nothing', () => {
+    const share = (z) => resShare(14, z, 0.95, MAX)
+    const expr = zoomSwitch(resBreaks(14, 0.95, MAX), share)
+    expect(expr[0]).toBe('step')
+    for (let z = 11; z <= 15; z += 0.01) {
+      // Not on the breaks themselves, where the share is exactly 0 on one side.
+      if (resBreaks(14, 0.95, MAX).some((b) => Math.abs(b - z) < 0.011)) continue
+      expect(evalStep(expr, z), `zoom ${z.toFixed(2)}`).toBe(share(z) > 0 ? 1 : 0)
+    }
+  })
+  it('switches the pillars on at zoom 19 in 3D', () => {
+    const expr = zoomSwitch(stepBreaks(19), (z) => pointShare(z, { mode: 'auto', mode3D: true }))
+    expect(evalStep(expr, 18.9)).toBe(0)
+    expect(evalStep(expr, 19)).toBe(1)
+    expect(evalStep(expr, 21)).toBe(1)
+  })
+  it('samples a curve at every quarter, ends included', () => {
+    expect(sampledBreaks(11.25, 12.1)).toEqual([11.25, 11.5, 11.75, 12, 12.1])
+  })
+})
+
+import { hexSlots, hexFillOpacity, hexBarHeight, hexBarSwitch, pointFillOpacity, pointStrokeOpacity, pillarSwitch } from './zoomfade.js'
+
+describe('the two hex layers', () => {
+  it('gives the even sizes slot a and the odd ones slot b', () => {
+    expect(hexSlots(13.2, MAX)).toEqual({ a: 14, b: 15 })
+    expect(hexSlots(14.2, MAX)).toEqual({ a: 16, b: 15 })
+  })
+  it('leaves the size that stays in its slot when the pair moves up', () => {
+    for (let n = 3; n < 19; n++) {
+      const before = hexSlots(n - 0.01, MAX), after = hexSlots(n, MAX)
+      const stays = n + 1
+      const slot = stays % 2 === 0 ? 'a' : 'b'
+      expect(before[slot], `zoom ${n}`).toBe(stays)
+      expect(after[slot], `zoom ${n}`).toBe(stays)
+    }
+  })
+  it('swaps the other slot only while both its sizes show nothing', () => {
+    for (const width of [0.95, 0.75]) for (let n = 3; n < 19; n++) {
+      expect(resShare(n, n, width, MAX), `leaving at zoom ${n}`).toBe(0)
+      expect(resShare(n + 2, n, width, MAX), `arriving at zoom ${n}`).toBe(0)
+      expect(resShare(n + 1, n, width, MAX), `staying at zoom ${n}`).toBe(1)
+    }
+  })
+  it('uses one slot at the end of the range', () => {
+    expect(hexSlots(21.5, MAX)).toEqual({ a: null, b: 21 })
+  })
+})
+
+describe('paint', () => {
+  const stopsOf = (expr) => expr.slice(3).filter((_, i) => i % 2 === 0)
+  const rises = (zs) => zs.every((z, i) => i === 0 || z > zs[i - 1])
+  const flat = { mode: 'auto', mode3D: false }, tilted = { mode: 'auto', mode3D: true }
+
+  it('only ever builds stops that rise, which MapLibre refuses otherwise', () => {
+    for (const view of [flat, tilted, { mode: 'hex', mode3D: true }, { mode: 'points', mode3D: false }]) {
+      for (let res = 3; res <= MAX; res++) {
+        for (const expr of [hexFillOpacity(res, view, MAX), hexBarHeight(res, view, MAX), hexBarSwitch(res, view, MAX)]) {
+          expect(rises(stopsOf(expr)), `${JSON.stringify(view)} res ${res}`).toBe(true)
+        }
+      }
+      for (const expr of [pointFillOpacity(view), pointStrokeOpacity(view)]) {
+        if (Array.isArray(expr) && expr[0] === 'interpolate') expect(rises(stopsOf(expr)), JSON.stringify(view)).toBe(true)
+      }
+    }
+  })
+  it('keeps zoom at the top of every expression', () => {
+    const inner = (e) => JSON.stringify(e.slice(3)).includes('"zoom"')
+    for (const expr of [hexFillOpacity(14, flat, MAX), hexBarHeight(20, tilted, MAX), hexBarSwitch(20, tilted, MAX), pointFillOpacity(flat), pointStrokeOpacity(flat), pillarSwitch(tilted)]) {
+      expect(['interpolate', 'step']).toContain(expr[0])
+      expect(inner(expr)).toBe(false)
+    }
+  })
+  it('multiplies a cell\'s own opacity and a bar\'s own height by the share', () => {
+    expect(hexFillOpacity(14, flat, MAX)[4]).toEqual(['*', ['get', 'op'], 0])
+    expect(hexBarHeight(14, tilted, MAX)[4]).toEqual(['*', ['get', 'height'], 0])
+  })
+  it('drops the bars to 95% at zoom 19 in auto, and not in hex mode', () => {
+    const last = (e) => e[e.length - 1]
+    expect(last(hexBarHeight(MAX, tilted, MAX))).toEqual(['*', ['get', 'height'], 0.95])
+    expect(last(hexBarHeight(MAX, { mode: 'hex', mode3D: true }, MAX))).toEqual(['*', ['get', 'height'], 1])
+  })
+  it('gives an earlier ride no fill and the product of both shares on its stroke', () => {
+    const fill = pointFillOpacity(flat)
+    expect(fill[fill.length - 1]).toEqual(['case', ['==', ['get', 'backlog'], 1], 0, ['*', ['get', 'fop'], 1]])
+    const stroke = pointStrokeOpacity(flat)
+    const at = (z) => stroke[3 + 2 * stopsOf(stroke).indexOf(z) + 1]
+    // Zoom 15.75: the points are halfway (0.5), earlier rides at 0.6.
+    expect(at(15.75)).toEqual(['case', ['==', ['get', 'backlog'], 1], ['*', ['get', 'op'], 0.3], ['*', ['get', 'op'], 0.5]])
+    expect(at(18.75)).toEqual(['case', ['==', ['get', 'backlog'], 1], ['*', ['get', 'op'], 1], ['*', ['get', 'op'], 1]])
+  })
+  it('draws the points at full strength in points mode, earlier rides on their own ramp', () => {
+    const view = { mode: 'points', mode3D: false }
+    expect(pointFillOpacity(view)).toEqual(['case', ['==', ['get', 'backlog'], 1], 0, ['*', ['get', 'fop'], 1]])
+    const stroke = pointStrokeOpacity(view)
+    expect(stroke[4]).toEqual(['case', ['==', ['get', 'backlog'], 1], ['*', ['get', 'op'], 0], ['*', ['get', 'op'], 1]])
+  })
+  it('keeps the pillars on at every zoom in points mode', () => {
+    expect(pillarSwitch({ mode: 'points', mode3D: true })).toBe(1)
+  })
+})
+
+import { hexRamp, pointRamp } from './zoomfade.js'
+
+describe('the same ramps for the website\'s own properties', () => {
+  it('writes the outline at 0.9 of the share', () => {
+    const expr = hexRamp(14, { mode: 'auto', mode3D: false }, 18, (v) => Math.round(900 * v) / 1000)
+    expect(expr).toEqual(['interpolate', ['linear'], ['zoom'], 12.025, 0, 12.975, 0.9, 13.025, 0.9, 13.975, 0])
+  })
+  it('keeps the finest size the server gives in full past its own level', () => {
+    const expr = hexRamp(18, { mode: 'hex', mode3D: false }, 18, (v) => v)
+    expect(expr[expr.length - 1]).toBe(1)
+    expect(expr[expr.length - 2]).toBe(16.975)
+  })
+  it('fades the points by their own opacity', () => {
+    expect(pointRamp({ mode: 'auto', mode3D: false }, (v) => ['*', ['get', 'op'], v]))
+      .toEqual(['interpolate', ['linear'], ['zoom'], 13.25, ['*', ['get', 'op'], 0], 18.25, ['*', ['get', 'op'], 1]])
+    expect(pointRamp({ mode: 'points', mode3D: false }, (v) => v)).toBe(1)
+  })
+})