A camera centred on the page sees the top row of shelves edge-on: put the eye at the middle of the shelves

const SHOE_Z = 24;
type Layout = { contentHeight: number; slots: { slab: { y: number } }[] };
// before (first attempt, from the build log): the eye at the page's centre, y = contentHeight / 2, with no lens shift.
// after:
function restPose(layout: Layout, width: number, height: number, top = 0) {
  const f = Math.min(1700, Math.max(900, 0.9 * width));
  const room = Math.max(1, height - top);                  // the host's header keeps its own strip
  const stepBack = Math.max(1, layout.contentHeight / room);
  const first = layout.slots[0]?.slab.y ?? 0;
  const last = layout.slots[layout.slots.length - 1]?.slab.y ?? 0;
  const eye = (first + last) / 2;                           // level with the middle of the shelves
  const pageCentre = layout.contentHeight / 2;
  const screenEye = top + room / 2 + (eye - pageCentre) / stepBack; // where that row belongs on screen
  const shiftY = -((screenEye / height) * 2 - 1);           // in clip units: puts it there without turning
  return { x: width / 2, y: eye, z: f * stepBack + SHOE_Z, shiftX: 0, shiftY };
}