Paste-Up :: Lab :: Carter Ogunsola

One set of prints, three layout boards. The DOM lays out invisible boxes; WebGL planes sit on them, each claimed by an ID. Switch boards and the prints fly to their new homes. The transition is never written, only implied. Landberg's mirrored-DOM mechanism, on the paste-up table.

Dependencies

GSAPCore :: ticker

Prints on the board

Before layout software, a page was assembled by hand: photostats waxed onto a board, moved between layouts until the spread worked. The prints didn’t change when the layout did. They just went somewhere else.

That’s the whole engine here. Three boards (an index grid, a spread, a strip) are real DOM, laid out by the browser: invisible boxes with a pencil-line border and a mono tag. One WebGL canvas sits on top and draws each print as a plane, exactly on its box. Click a print, switch a board, and every plane notices its home moved and slides there. There is no grid-to-spread animation anywhere in the code. There’s no spread-to-strip one either.

A print belongs to its ID

Each box says data-print="p3", meaning “I want that plane.” The engine keeps one claim per ID, measures the claiming box, and damps the plane’s rect toward it at 0.085 per frame, the house follow factor. Every transition on the stage (six of them, if you count the in-place plate swap) is that one rule firing. Making a clicked print the plate is an attribute write: the spread’s hero slot takes the new ID, the rail takes the rest, and the planes trade places.

This is Jesper Landberg’s portfolio mechanism at lab scale. On his site the DOM never holds media at all: empty boxes with an aspect-ratio carry data-id slugs, one persistent canvas renders everything, and a project page claims the same slug the home card had. Browsers are good at putting rectangles in the right place. The GL’s job is only what a rectangle can’t do, which here is the flight, and the way the sheet bows while it moves: center leading, edges trailing, flat again the moment it parks.

The two knobs

His writeup names two failure modes, so the panel makes both real.

Fetch is fake navigation latency. At 0 the boards overlap-swap and flight starts immediately. Dial it up and the old board is torn down first, the way real navigation does it: the planes hold still through the dwell, then fly late. That sit-then-go is exactly what waiting for the destination costs you.

Memory is the rect cache. A claim on a dead board answers 0×0 from getBoundingClientRect, and with memory on, the engine refuses to believe a zero-width home and keeps the rect the plane last sat on. Turn it off and watch the appear-instead-of-fly bug: mid-dwell the planes collapse into the corner, then pop into place.

One admitted cheat: the three boards coexist in the stage and “navigation” is a display toggle, so the dead-DOM window has to be simulated. On the real site you’d capture rects at astro:before-swap, while the old page can still be measured.

The moving parts

data-print — the claim. The entire API between markup and engine; a new layout is a new arrangement of these, not new code.
measure() — asks each claim for its rect, relative to the stage, only on swap and resize. Rects are cached between; nothing thrashes per frame.
Bow — vertex displacement (1 − sin(π·uv)) · vel, velocity smoothed 0.8/0.2 and clamped at 48px/frame so a cross-board leap doesn’t fold the sheet.
Draw order — planes sort by speed each frame; a flying print passes over the parked ones.
No treatment — planes draw the photo as-is; the flight is the whole effect.

No WebGL2 and the boxes get plain images; swaps become cuts. The page still works, which was his first point.

Credits

Jesper Landberg :: the mirrored-DOM plane mechanism, from his portfolio breakdown

Setup

<!-- GSAP (from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

<!-- Site tokens the styles use — swap freely -->
<style>
  :root {
    --font-mono: "PP Neue Montreal Mono", "Geist Mono", ui-monospace, monospace;
    --fs-mono-meta: 0.75rem;
    --ink: #1e1e1e;
    --ink-muted: rgba(30, 30, 30, 0.6);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }
</style>

<!-- Sized stage — the script fills it -->
<div class="stage" style="position: relative; height: 100vh;"></div>

Script

import { previewUrl } from "@/config/assets";
import { MeshMode, meshTile } from "@lib/mesh";
const KEYS = [
  ...[22, 25, 27].map((n) => `dts/unwrapped/DTS_Unwrapped_by_FRANCO_DUPUY_${n}.jpg`),
  ...[6, 17, 44].map((n) => `dts/landing-site/DTS_Landing_Site_by_Fanette_Guilloud_${n}.jpg`)
];
const N = KEYS.length;
const IDS = KEYS.map((_, i) => `p${i}`);
const DEFAULTS = {
  damp: 0.085,

  bend: 1,

  fetch: 0,

  memory: 1

};
export const config = {
  damp: [0.085, 0.02, 0.3, 5e-3],
  bend: [1, 0, 2, 0.05],
  fetch: [0, 0, 800, 25],
  memory: true
};
const DPR_CAP = 1.5;
const BEND_PX = 0.4;
const VEL_MAX = 48;
const GRID = 16;
const VERT = `#version 300 es
in vec2 aUv;
uniform vec4 uRect;  // x, y, w, h — css px, y down
uniform vec2 uRes;   // css px
uniform vec2 uVel;   // smoothed px/frame
uniform float uBend;
out vec2 vUv;
void main() {
  vUv = aUv;
  vec2 p = uRect.xy + aUv * uRect.zw;
  // Paper flex: the center leads, the edges trail the motion. Zero at rest.
  p.x -= uVel.x * uBend * (1.0 - sin(3.14159 * aUv.x));
  p.y -= uVel.y * uBend * (1.0 - sin(3.14159 * aUv.y));
  gl_Position = vec4(p.x / uRes.x * 2.0 - 1.0, 1.0 - p.y / uRes.y * 2.0, 0.0, 1.0);
}`;
const FRAG = `#version 300 es
precision highp float;
uniform sampler2D uImg;
uniform vec2 uImgRes;
uniform vec4 uRect;
uniform float uAlpha;
in vec2 vUv;
out vec4 outColor;
void main() {
  // object-fit: cover crop against the plane's live aspect.
  float rc = uRect.z / max(uRect.w, 1.0);
  float ri = uImgRes.x / uImgRes.y;
  vec2 uv = vUv;
  if (rc > ri) { float s = ri / rc; uv.y = (uv.y - 0.5) * s + 0.5; }
  else { float s = rc / ri; uv.x = (uv.x - 0.5) * s + 0.5; }
  // The photo as-is — no treatment fights the flight.
  vec4 t = texture(uImg, uv);
  float a = uAlpha * t.a; // the mesh tile's transparent ground stays open
  outColor = vec4(t.rgb * a, a);
}`;
let styled = false;
function injectStyle() {
  if (styled) return;
  styled = true;
  const s = document.createElement("style");
  s.dataset.labStyle = "paste-up";
  s.textContent = `
  .pu { position: absolute; inset: 0; user-select: none; }

  /* clear of the stage's docs button in the top-left corner */
  .pu__tabs { position: absolute; inset-inline-start: 56px;
    inset-block-start: var(--s-12); display: flex; gap: 18px; z-index: 3; }
  .pu__tab { appearance: none; background: none; border: 0; padding: 2px 0 6px;
    font-family: var(--font-mono); font-size: var(--fs-mono-meta);
    letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
    color: var(--ink-muted); transition: color 0.25s var(--ease-in-cubic); }
  .pu__tab.is-on { color: var(--ink); transition: color 0.55s var(--ease-out-expo); }
  /* one shared underline, slid between tabs (the flip-pill move, small) */
  .pu__tabline { position: absolute; inset-block-end: 0; inset-inline-start: 0;
    height: 1px; width: 20px; background: var(--ink);
    transition: transform 0.55s var(--ease-out-expo), width 0.55s var(--ease-out-expo); }

  .pu__field { position: absolute; inset: 52px var(--s-16) 44px; }
  .pu__board { position: absolute; inset: 0; display: none; }
  .pu__board.is-on { display: grid; }

  /* Invisible boxes — almost. A pencil-line frame at the edge of perception
     marks the board's layout while textures load; the planes cover it. */
  .pu__slot { position: relative; min-height: 0; min-width: 0; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
  .pu__slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .pu__slot img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; pointer-events: none; }
  .pu__tag { position: absolute; inset-inline-start: 0;
    inset-block-start: calc(100% + 4px); font-family: var(--font-mono);
    font-size: 9px; letter-spacing: 0.16em; color: var(--ink-muted);
    text-transform: uppercase; white-space: nowrap; pointer-events: none; }

  .pu__index.is-on { grid-template: repeat(2, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
    gap: 24px 14px; padding-block-end: 16px; }
  .pu__spread.is-on { grid-template-columns: minmax(0, 1fr) clamp(90px, 16%, 150px);
    gap: 14px; padding-block-end: 16px; }
  .pu__rail { display: grid; grid-template-rows: repeat(${N - 1}, minmax(0, 1fr));
    gap: 20px 0; min-height: 0; }
  .pu__strip.is-on { grid-template-columns: repeat(${N}, minmax(0, 1fr));
    gap: 14px; align-content: center; }
  .pu__strip .pu__slot { aspect-ratio: 3 / 4; align-self: center; }

  .pu__canvas { position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 2; pointer-events: none; }

  .pu__hud { position: absolute; inset-inline: var(--s-16);
    inset-block-end: var(--s-12); display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: var(--fs-mono-meta);
    letter-spacing: 0.06em; color: var(--ink-muted); text-transform: uppercase;
    pointer-events: none; z-index: 3; }
  `;
  document.head.append(s);
}
const pad = (n) => String(n).padStart(2, "0");
const experiment = {
  mount(root) {
    injectStyle();
    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
    const P = { ...DEFAULTS };
    const wrap = document.createElement("div");
    wrap.className = "pu";
    const slot = (id, tag) => `<div class="pu__slot" data-print="${id}" tabindex="0" role="button" aria-label="print ${Number(id.slice(1)) + 1}"><span class="pu__tag">${tag}</span></div>`;
    wrap.innerHTML = `
      <nav class="pu__tabs">
        ${["index", "spread", "strip"].map((b, i) => `<button class="pu__tab${i === 0 ? " is-on" : ""}" data-board="${b}">${b}</button>`).join("")}
        <i class="pu__tabline"></i>
      </nav>
      <div class="pu__field">
        <div class="pu__board pu__index is-on">
          ${IDS.map((id, i) => slot(id, `PRINT::${pad(i + 1)}`)).join("")}
        </div>
        <div class="pu__board pu__spread">
          ${slot("p0", "PLATE")}
          <div class="pu__rail">
            ${IDS.slice(1).map((id) => slot(id, "")).join("")}
          </div>
        </div>
        <div class="pu__board pu__strip">
          ${IDS.map((id, i) => slot(id, `${pad(i + 1)}A`)).join("")}
        </div>
        <canvas class="pu__canvas" aria-hidden="true"></canvas>
      </div>
      <div class="pu__hud">
        <span data-pu-board>BOARD::INDEX</span><span>A PRINT BELONGS TO ITS ID</span>
      </div>`;
    root.append(wrap);
    const field = wrap.querySelector(".pu__field");
    const canvas = wrap.querySelector(".pu__canvas");
    const boards = {
      index: wrap.querySelector(".pu__index"),
      spread: wrap.querySelector(".pu__spread"),
      strip: wrap.querySelector(".pu__strip")
    };
    const tabs = [...wrap.querySelectorAll(".pu__tab")];
    const tabline = wrap.querySelector(".pu__tabline");
    const hudBoard = wrap.querySelector("[data-pu-board]");
    const gl = canvas.getContext("webgl2", { alpha: true, antialias: false });
    if (!gl) {
      canvas.remove();
      wrap.querySelectorAll("[data-print]").forEach((el) => {
        const img = new Image();
        img.src = previewUrl(KEYS[Number(el.dataset.print.slice(1))], 720);
        el.prepend(img);
      });
    }
    let active = "index";
    let hero = "p0";
    const claims =  new Map();
    const refreshClaims = () => {
      boards[active].querySelectorAll("[data-print]").forEach((el) => claims.set(el.dataset.print, el));
    };
    refreshClaims();
    let upgradePlate = (_i) => {
    };
    const assignSpread = (id) => {
      hero = id;
      upgradePlate(Number(id.slice(1)));
      const slots = boards.spread.querySelectorAll("[data-print]");
      const rest = IDS.filter((p) => p !== id);
      slots.forEach((el, i) => el.dataset.print = i === 0 ? id : rest[i - 1]);
      if (!gl)
        slots.forEach((el) => {
          const img = el.querySelector("img");
          if (img) img.src = previewUrl(KEYS[Number(el.dataset.print.slice(1))], 720);
        });
    };
    const planes = IDS.map(() => ({
      cur: { x: 0, y: 0, w: 0, h: 0 },
      tar: { x: 0, y: 0, w: 0, h: 0 },
      vel: { x: 0, y: 0 },
      alpha: 0,

      placed: false

    }));
    const measure = () => {
      const fr = field.getBoundingClientRect();
      IDS.forEach((id, i) => {
        const el = claims.get(id);
        if (!el) return;
        const r = el.getBoundingClientRect();
        if (r.width < 1 && P.memory) return;
        const p = planes[i];
        p.tar = { x: r.left - fr.left, y: r.top - fr.top, w: r.width, h: r.height };
        if (!p.placed || reduced) {
          p.cur = { ...p.tar };
          p.placed = true;
        }
      });
      wake();
    };
    let swapT = 0;
    const syncTabs = () => {
      tabs.forEach((t) => t.classList.toggle("is-on", t.dataset.board === active));
      const on = tabs.find((t) => t.dataset.board === active);
      tabline.style.transform = `translate3d(${on.offsetLeft}px, 0, 0)`;
      tabline.style.width = `${on.offsetWidth}px`;
      hudBoard.textContent = `BOARD::${active.toUpperCase()}`;
    };
    const go = (board, plateId) => {
      clearTimeout(swapT);
      boards[active].classList.remove("is-on");
      measure();
      active = board;
      syncTabs();
      const land = () => {
        if (board === "spread") assignSpread(plateId ?? hero);
        boards[board].classList.add("is-on");
        refreshClaims();
        measure();
      };
      if (P.fetch > 0 && !reduced) swapT = window.setTimeout(land, P.fetch);
      else land();
    };
    tabs.forEach(
      (t) => t.addEventListener("click", () => {
        if (t.dataset.board !== active) go(t.dataset.board);
      })
    );
    const onFieldClick = (e) => {
      const el = e.target.closest("[data-print]");
      if (!el) return;
      const id = el.dataset.print;
      if (active !== "spread") go("spread", id);
      else if (id === hero) go("index");
      else {
        assignSpread(id);
        refreshClaims();
        measure();
      }
    };
    field.addEventListener("click", onFieldClick);
    const onFieldKey = (e) => {
      if (e.key !== "Enter" && e.key !== " ") return;
      const el = e.target.closest("[data-print]");
      if (!el) return;
      e.preventDefault();
      el.click();
    };
    field.addEventListener("keydown", onFieldKey);
    const ro = new ResizeObserver(() => {
      size();
      measure();
    });
    ro.observe(field);
    if (!gl) {
      syncTabs();
      return () => {
        clearTimeout(swapT);
        ro.disconnect();
        wrap.remove();
      };
    }
    const sh = (t, src) => {
      const s = gl.createShader(t);
      gl.shaderSource(s, src);
      gl.compileShader(s);
      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
        console.warn("[paste-up]", gl.getShaderInfoLog(s));
      return s;
    };
    const prog = gl.createProgram();
    gl.attachShader(prog, sh(gl.VERTEX_SHADER, VERT));
    gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FRAG));
    gl.linkProgram(prog);
    gl.useProgram(prog);
    const u = {};
    for (const n of ["uRect", "uRes", "uVel", "uBend", "uImg", "uImgRes", "uAlpha"])
      u[n] = gl.getUniformLocation(prog, n);
    const verts = [];
    const idx = [];
    for (let y = 0; y <= GRID; y++)
      for (let x = 0; x <= GRID; x++) verts.push(x / GRID, y / GRID);
    for (let y = 0; y < GRID; y++)
      for (let x = 0; x < GRID; x++) {
        const a = y * (GRID + 1) + x;
        idx.push(a, a + 1, a + GRID + 1, a + 1, a + GRID + 2, a + GRID + 1);
      }
    const vbo = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
    const ibo = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(idx), gl.STATIC_DRAW);
    const aUv = gl.getAttribLocation(prog, "aUv");
    gl.enableVertexAttribArray(aUv);
    gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    const texes = KEYS.map((key, i) => {
      const tex = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, meshTile(540, 720, { seed: 31 + i * 7 }));
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      const rec = { tex, w: 540, h: 720, ready: true, hi: false };
      if (MeshMode.on) return rec;
      const img = new Image();
      img.crossOrigin = "anonymous";
      img.src = previewUrl(key, 720);
      img.decode().then(() => {
        rec.w = img.naturalWidth;
        rec.h = img.naturalHeight;
        gl.bindTexture(gl.TEXTURE_2D, tex);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
        rec.ready = true;
        wake();
      }).catch(() => {
      });
      return rec;
    });
    upgradePlate = (i) => {
      const t = texes[i];
      if (!t || t.hi || MeshMode.on) return;
      t.hi = true;
      const im = new Image();
      im.crossOrigin = "anonymous";
      im.src = previewUrl(KEYS[i], 1440);
      im.decode().then(() => {
        t.w = im.naturalWidth;
        t.h = im.naturalHeight;
        gl.bindTexture(gl.TEXTURE_2D, t.tex);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, im);
        wake();
      }).catch(() => {
        t.hi = false;
      });
    };
    let viewW = 1;
    let viewH = 1;
    const size = () => {
      const dpr = Math.min(devicePixelRatio || 1, DPR_CAP);
      const r = field.getBoundingClientRect();
      viewW = r.width;
      viewH = r.height;
      canvas.width = Math.max(1, Math.round(r.width * dpr));
      canvas.height = Math.max(1, Math.round(r.height * dpr));
      gl.viewport(0, 0, canvas.width, canvas.height);
    };
    size();
    let awake = true;
    function wake() {
      awake = true;
    }
    const draw = () => {
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.uniform2f(u.uRes, viewW, viewH);
      gl.uniform1i(u.uImg, 0);
      gl.activeTexture(gl.TEXTURE0);
      const order = planes.map((p, i) => ({ i, s: Math.abs(p.vel.x) + Math.abs(p.vel.y) })).sort((a, b) => a.s - b.s);
      for (const { i } of order) {
        const p = planes[i];
        if (!p.placed || p.alpha <= 1e-3 || p.cur.w < 0.5) continue;
        const t = texes[i];
        gl.bindTexture(gl.TEXTURE_2D, t.tex);
        gl.uniform4f(u.uRect, p.cur.x, p.cur.y, p.cur.w, p.cur.h);
        gl.uniform2f(u.uImgRes, t.w, t.h);
        gl.uniform2f(
          u.uVel,
          Math.max(-VEL_MAX, Math.min(VEL_MAX, p.vel.x)) * BEND_PX,
          Math.max(-VEL_MAX, Math.min(VEL_MAX, p.vel.y)) * BEND_PX
        );
        gl.uniform1f(u.uBend, reduced ? 0 : P.bend);
        gl.uniform1f(u.uAlpha, p.alpha);
        gl.drawElements(gl.TRIANGLES, idx.length, gl.UNSIGNED_SHORT, 0);
      }
    };
    const tick = () => {
      if (!awake) return;
      let moving = false;
      const k = reduced ? 1 : P.damp;
      for (let i = 0; i < N; i++) {
        const p = planes[i];
        if (!p.placed) continue;
        const px = p.cur.x;
        const py = p.cur.y;
        ["x", "y", "w", "h"].forEach((a) => {
          p.cur[a] += (p.tar[a] - p.cur[a]) * k;
          if (Math.abs(p.tar[a] - p.cur[a]) < 0.05) p.cur[a] = p.tar[a];
          else moving = true;
        });
        p.vel.x = p.vel.x * 0.8 + (p.cur.x - px) * 0.2;
        p.vel.y = p.vel.y * 0.8 + (p.cur.y - py) * 0.2;
        if (Math.abs(p.vel.x) + Math.abs(p.vel.y) > 0.05) moving = true;
        else p.vel.x = p.vel.y = 0;
        const aTar = texes[i].ready ? 1 : 0;
        p.alpha += (aTar - p.alpha) * 0.12;
        if (Math.abs(aTar - p.alpha) < 0.01) p.alpha = aTar;
        else moving = true;
      }
      draw();
      if (!moving) awake = false;
    };
    gsap.ticker.add(tick);
    measure();
    syncTabs();
    return {
      destroy() {
        clearTimeout(swapT);
        gsap.ticker.remove(tick);
        ro.disconnect();
        field.removeEventListener("click", onFieldClick);
        field.removeEventListener("keydown", onFieldKey);
        gl.getExtension("WEBGL_lose_context")?.loseContext();
        wrap.remove();
      },
      set(key, value) {
        if (key === "memory") {
          P.memory = value === "on" || value === true ? 1 : 0;
        } else if (key in P) {
          P[key] = Number(value);
          if (key === "damp" || key === "bend") wake();
        }
      }
    };
  }
};
experiment.mount(document.querySelector(".stage"));

Paste-Up

TransitionNew

Experiment coming soonLoading experiment

Paste-Up — Lab experiment