A poster wall placed through the camera in React was empty without script: make the 3D plane 1:1 with CSS

// before (P3): placed in React through the camera, hidden until the first effect had run
// let cardStyle: React.CSSProperties = { visibility: "hidden" };
// if (slot && pose) { const [x0, y0] = screenAt(pose, W, H, slot.card.x, slot.card.y, SHOE_Z); ... }
// after: the rest camera at the focal length from the shoes' plane, so k = f / (z - SHOE_Z) = 1 there.
const restZ = (f: number) => f + SHOE_Z;
// Each card gets its column and row per breakpoint as CSS variables, in the server's markup.
function slotVars(index: number, count: number, columnsFor: (width: number, count: number) => number) {
  const out: Record<string, number> = {};
  for (const [name, width] of [["lg", 1100], ["md", 700], ["sm", 320]] as const) {
    const cols = columnsFor(width, count);
    const rows = Math.ceil(count / cols);
    const row = Math.floor(index / cols);
    const inRow = row === rows - 1 ? count - cols * (rows - 1) : cols;
    out[`--c-${name}`] = index - row * cols;
    out[`--r-${name}`] = row;
    out[`--o-${name}`] = (cols - inRow) / 2; // a short last row is centred
  }
  return out;
}

.fl-card {
  position: absolute;
  left: calc(var(--left) + (var(--col) + var(--off)) * (var(--w) + var(--gap)));
  top: calc(var(--first) + var(--row) * var(--pitch) - var(--w) / var(--aspect) * var(--baseline));
  width: var(--w);
}