How to hang a painting that doesn't exist.

The gallery is one flex row (#track) inside a 100vh section. GSAP's ScrollTrigger pins the section and maps vertical scroll distance 1:1 onto a horizontal translation of the track. Because the mapping is 1:1 (end: '+=' + distance), a wheel tick, a scrollbar drag and a pointer drag all move the visitor the same honest distance — no magic ratios to tune.

// distance the wall extends past the viewport
const getScrollDist = () => Math.max(1, track.scrollWidth - innerWidth);

st = gsap.to(track, {
  x: () => -getScrollDist(),
  ease: 'none',                    // the scrub IS the easing
  scrollTrigger: {
    trigger: '#gallery',
    start: 'top top',
    end: () => '+=' + getScrollDist(),
    pin: true,
    scrub: 1.15,                   // ~1s of inertia between finger and wall
    invalidateOnRefresh: true,
    onUpdate(self){
      // normalized signed velocity → shader uniform + skew
      velTarget = gsap.utils.clamp(-1.6, 1.6, self.getVelocity() / 2600);
      progressGlobal = self.progress;
    }
  }
});

Dragging is the same system wearing gloves. A pointer drag simply writes scrollTo(0, dragScroll - dx) — because the mapping is 1:1, dragging the wall 300px moves it exactly 300px. On release, the last pointer velocity keeps feeding scrollBy with a 0.94 decay per frame: museum momentum, not carnival physics. A dragMoved > 8px guard decides whether a gesture was a walk or a click on a painting.

Each artwork owns its own small <canvas> and WebGL1 context rather than sharing one fullscreen canvas with scissored viewports. The trade was deliberate: six contexts is far below browser limits, each canvas is small (a framed painting, not a wall), pausing a work is trivial (just skip its draw call), and the canvases ride the DOM transform of the track for free — no per-frame rect synchronisation. The classic shared-canvas technique earns its complexity when you have dozens of views; a museum hangs six.

Every painting is the same vertex shader (one fullscreen triangle) plus a fragment shader assembled from three parts: a shared prelude (hash, value noise, five-octave fbm), the work's own vec3 art(vec2 uv, float t), and a shared main wrapper that applies velocity distortion, grain, and gallery-light vignette to all works equally — the house style.

function makePainting(canvas, fragBody){
  const gl = canvas.getContext('webgl', {
    antialias: false, alpha: false, depth: false,
    powerPreference: 'low-power'       // a museum hums, it doesn't roar
  });
  const prog = makeProgram(gl, PRELUDE + fragBody + MAINWRAP);
  // one triangle covers clip space; no index buffer, no quads
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW);
  const DPR = Math.min(devicePixelRatio || 1, 1.75);  // resolution cap
  ...
}

Each work keeps its own clock. Per frame: p.t += dt * (0.28 + p.awaken * 1.15). Asleep, a painting moves at ~a quarter of real time — museum stillness. As it approaches the viewport centre (or is hovered, or contemplated), awaken eases toward 1 and the painting breathes faster and zooms in ten percent. Time never jumps; the same clock feeds the contemplation view, so the enlarged work continues mid-thought.

While the visitor moves, every painting smears slightly along the direction of travel and its colour channels part — like looking at oil paint through old glass in motion. The effect lives in the shared main wrapper, so all six works obey the same physics. The trick is restraint: the offset maxes at 1.6% of the canvas, channels are re-averaged with a motion-blur mix, and everything settles the moment you stop, because the uniform decays at 0.9 per frame and is smoothed at 0.09 — glass and light, not glitch.

float v = clamp(u_vel, -1.6, 1.6);
if (abs(v) > 0.004){                      // uniform branch: free when still
  vec2 off = vec2(0.016, 0.0) * v;
  vec3 ca = art(uv - off, u_time);        // red looks behind
  vec3 cb = art(uv,       u_time);        // green stays
  vec3 cc = art(uv + off, u_time);        // blue looks ahead
  col = vec3(ca.r, cb.g, cc.b);
  col = mix(col, (ca + cb + cc) / 3.0, min(abs(v) * 0.5, 0.45));
}

The same smoothed velocity drives the DOM: frames skew up to 4.5° against the direction of travel and lead the motion by 18px while plaques lag at 7px — three parallax depths (frame, plaque, wall text) that make the wall read as a place rather than a strip. When the wall stops, everything returns to plumb with the museum easing curve, cubic-bezier(0.16, 1, 0.3, 1).

Six live shaders could be a space heater. They aren't, because the building only renders what you can see:

• An IntersectionObserver with rootMargin: '25%' marks each work visible or not; the single rAF loop simply skips draw calls for sleeping works. Off-screen paintings cost zero GPU.
• DPR is capped at 1.75 (2 in the contemplation view) — on a 3× phone that's roughly a third of the pixels for imperceptible loss inside a frame this size.
• Contexts request powerPreference: 'low-power', no antialias, no depth buffer; geometry is one triangle. The only per-frame allocation is nothing.
• The velocity branch is a uniform branch — when the wall is still, five of six texture-free samples never execute.
• prefers-reduced-motion rebuilds the museum vertically: no pin, no scrub, no skew; every painting renders exactly one still frame and the visit becomes a quiet page of framed prints.
• No WebGL at all? Each frame shows a plaster-dark panel with a set apology: “the mathematics are still here — your device declines to perform them.”

const io = new IntersectionObserver(entries => {
  for (const e of entries){
    const w = paintings.find(p => p.el === e.target);
    if (w) w.visible = e.isIntersecting;
  }
}, { rootMargin: '25%', threshold: 0 });

// in the rAF loop:
if (p.painter && p.visible) p.painter.draw(p.t, velSmooth, p.awaken);

1. Vendor GSAP 3.12 + ScrollTrigger locally (cdn.jsdelivr.net/npm/gsap@3.12.5). Load the fonts — Marcellus, Cormorant Garamond, Inter — from Google Fonts.
2. Lay the wall: a 100vh section containing a flex row of panels (entrance text, six salles, colophon). Add the floor as a ::before gradient and the baseboard as a 1px ::after running the full track.
3. Pin the section with ScrollTrigger, translate the track by scrollWidth − innerWidth, scrub ≈ 1.15. Feed self.getVelocity() / 2600 into a smoothed uniform.
4. Write the painting engine: WebGL1, one fullscreen triangle, shader = shared prelude + per-work art() + shared wrapper. Cap DPR, skip draws for off-screen works.
5. Write six art() functions — steal the six above, then betray them: different palettes, different tempos. Keep every time coefficient under 0.1; stillness is the luxury.
6. Hang the furniture: dark frames with layered box-shadows, cream mats, brass plaques with an inset rule, picture lights as radial-gradient cones, one bench.
7. Add the contemplation view: a fixed overlay with one persistent GL context that lazily compiles each work's program, shares the work's clock, and types its plaque character by character.
8. Respect the visitors: prefers-reduced-motion gets the vertical museum; no WebGL gets the apology card; touch gets native drag. Then hang your name in the colophon and open the doors.

Everything ships from one origin: two GSAP files (~115 KB) and this HTML. No build step, no bundler, no image requests. The whole museum weighs less than one photograph of a museum.