Light Table — Lab — Carter Ogunsola

A strip of 35mm negatives on the light table. Throw it and it coasts on its own momentum; whatever parks at center develops to positive under the loupe. Infinite roll by default — switch it finite and the edges push back.

Dependencies

GSAP Core — ticker

Negatives on glass

Before contact sheets, you read the roll raw: negatives on the light table, a loupe over one frame at a time. This is that. One continuous strip of emulsion — perforations, roll markings, frame tags — with every frame idling inverted, the way film actually looks. Whatever parks on the center axis develops to positive under the loupe. Drag, wheel, or throw it.

One damped pair does everything

The core is two numbers, cur and tar, with cur chasing at 0.09 per frame on the shared ticker. Wheel writes to tar (deltas normalized, ×0.5556). Drag writes at 2× the hand. Release converts your hand velocity into a coast — the strip keeps rolling, loses steam, and the 300ms settle parks it on a frame. Nothing ever writes to cur, which is why every input feels like the same physical object.

The strip is infinite by default: frame positions are just mod(i·step − cur, total), re-centered, so the roll has no ends. The perforations ride the same offset through one background-position var — film and holes move as one object. Flip loop off and you get the finite strip with Benoist’s edge resistance: past the rails the drag origin re-bases and the same gesture buys half the travel.

States own the feel

Three states, one owner each, CSS derives everything. Dragging: hand on the film — grabbing cursor, hover suppressed. Moving: everything goes latent — a velocity-driven blur, and nothing develops, not even the loupe frame; the strip in motion is all negative. Idle: the loupe frame develops (550ms, expo.out) and a hover can develop a second frame. Un-develop is always the fast cubic-in — the house show/hide asymmetry. The moving state has hysteresis (on at 0.02, off at 0.008 of normalized velocity) so it never flaps at the parking threshold.

The moving parts

loop — infinite roll (default) or finite strip with edge resistance.
flick — coast distance per unit of release velocity, 140. Zero kills momentum.
damp — the follow factor, 0.09. Lower is heavier film.
snap — the settle park. Off, the strip free-floats between frames.
latent — the motion blur. Off, frames stay sharp mid-throw.

Credits

Aristide Benoist — the W_ slider mechanics, from the arock/watson bundles

Setup

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

<!-- Site tokens the styles use — swap freely -->
<style>
  :root {
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --fs-mono-meta: 0.75rem;
    --paper: #e8e8e7;
    --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";
const KEYS = [3, 5, 6, 8, 11, 12, 15, 18, 21].map(
  (n) => `dts/unwrapped/DTS_Unwrapped_by_FRANCO_DUPUY_${n}.jpg`
);
const DEFAULTS = {
  damp: 0.09,

  drag: 2,

  flick: 140,

  snap: 1,
  latent: 1,

  loop: 1

};
export const config = {
  damp: [0.09, 0.02, 0.3, 5e-3],
  drag: [2, 0.5, 4, 0.1],
  flick: [140, 0, 400, 10],
  snap: true,
  latent: true,
  loop: true
};
let styled = false;
function injectStyle() {
  if (styled) return;
  styled = true;
  const s = document.createElement("style");
  s.dataset.labStyle = "light-table";
  s.textContent = `
  .lt { position: absolute; inset: 0; overflow: hidden; cursor: grab;
    user-select: none; touch-action: pan-y; --vel: 0; }
  .lt.is-dragging { cursor: grabbing; }

  /* The emulsion band: one continuous strip across the viewport. Reserved
     rows, top to bottom: holes / roll marks / frame / tags / holes — nothing
     shares a row, so nothing can overlap. Perforations are two repeating
     gradient rows whose background-position rides the same scroll offset as
     the frames (--shift), so the film moves as ONE object. */
  .lt__film { position: absolute; inset-inline: 0; top: 50%; translate: 0 -50%;
    height: calc(var(--lt-frame-h) + 64px); background: #161615;
    border-block: 1px solid rgba(247, 247, 247, 0.08); }
  .lt__film::before, .lt__film::after { content: ""; position: absolute;
    inset-inline: 0; height: 11px;
    background-image: radial-gradient(4px 5px at 14px 50%, var(--paper) 96%, transparent);
    background-size: 28px 11px;
    background-position-x: var(--shift);
    opacity: 0.95; }
  .lt__film::before { top: 7px; }
  .lt__film::after { bottom: 7px; }

  .lt__frame { position: absolute; top: 32px; left: 0;
    width: var(--lt-frame-w); will-change: transform; }
  .lt__im { overflow: hidden; aspect-ratio: 3 / 2; background: #0c0c0c; }
  .lt__im img { display: block; width: 112%; height: 100%; max-width: none;
    object-fit: cover; pointer-events: none; will-change: transform;
    filter: grayscale(1) invert(1) contrast(0.92) blur(calc(var(--vel) * 4px));
    /* develop is the SHOW (slow, expo.out); un-develop is the HIDE (quick,
       cubic-in) — the house asymmetry */
    transition: filter 0.25s var(--ease-in-cubic); }
  /* roll marking above every third frame — lives in its own reserved row */
  .lt__roll { position: absolute; top: -13px; left: 4px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
    color: rgba(247, 247, 247, 0.4); text-transform: uppercase;
    white-space: nowrap; pointer-events: none; }
  /* frame tag in its own row between frame and bottom holes */
  .lt__tag { position: absolute; inset-inline-start: 2px; bottom: -16px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
    color: rgba(247, 247, 247, 0.4); text-transform: uppercase;
    white-space: nowrap; pointer-events: none;
    transition: color 0.25s var(--ease-in-cubic); }

  /* ── states ── */
  /* idle + parked at center → the loupe develops it */
  .lt__frame.is-loupe img, .lt__frame.is-hot img {
    filter: grayscale(1) invert(0) contrast(1) blur(calc(var(--vel) * 4px));
    transition: filter 0.55s var(--ease-out-expo); }
  .lt__frame.is-loupe .lt__tag, .lt__frame.is-hot .lt__tag {
    color: rgba(247, 247, 247, 0.92);
    transition: color 0.55s var(--ease-out-expo); }
  /* in motion NOTHING develops — the moving strip is all negative */
  .lt.is-moving .lt__frame img {
    filter: grayscale(1) invert(1) contrast(0.92) blur(calc(var(--vel) * 4px));
    transition: filter 0.25s var(--ease-in-cubic); }
  .lt.is-moving .lt__tag { color: rgba(247, 247, 247, 0.4); }

  .lt__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; }

  @media (prefers-reduced-motion: reduce) {
    .lt__im img, .lt__tag { transition: none; }
    .lt__im img { filter: grayscale(1) invert(1); }
    .lt__frame.is-loupe img, .lt__frame.is-hot img { filter: grayscale(1); }
  }
  `;
  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 N = KEYS.length;
    const wrap = document.createElement("div");
    wrap.className = "lt";
    const film = document.createElement("div");
    film.className = "lt__film";
    const frames = [];
    KEYS.forEach((key, i) => {
      const f = document.createElement("figure");
      f.className = "lt__frame";
      f.innerHTML = `
        <div class="lt__im"><img src="${previewUrl(key, 720)}" alt="" loading="eager" decoding="async" draggable="false" /></div>
        ${i % 3 === 0 ? '<span class="lt__roll">C·O LAB 400</span>' : ""}
        <span class="lt__tag">▶ ${pad(i + 1)}A</span>`;
      film.append(f);
      frames.push(f);
    });
    wrap.append(film);
    const hud = document.createElement("div");
    hud.className = "lt__hud";
    hud.innerHTML = `<span data-lt-count>01/${pad(N)}</span><span>DRAG::WHEEL::THROW</span>`;
    wrap.append(hud);
    root.append(wrap);
    const count = hud.querySelector("[data-lt-count]");
    let step = 1;
    let frameW = 1;
    let frameH = 1;
    let viewW = 1;
    let total = 1;
    let max = 0;
    const GAP = 14;
    const measure = () => {
      viewW = wrap.clientWidth;
      frameW = Math.min(300, Math.max(200, viewW * 0.26));
      frameH = frameW / 3 * 2;
      step = frameW + GAP;
      total = step * N;
      max = Math.max(0, total - GAP - viewW + 80);
      wrap.style.setProperty("--lt-frame-w", `${frameW}px`);
      wrap.style.setProperty("--lt-frame-h", `${frameH}px`);
    };
    const ro = new ResizeObserver(measure);
    ro.observe(wrap);
    measure();
    let cur = 0;
    let tar = 0;
    let settleT = 0;
    const mod = (v, m) => (v % m + m) % m;
    const clampFinite = (v) => Math.max(-step * 0.6, Math.min(max + step * 0.6, v));
    const snapTo = () => {
      if (!P.snap) {
        if (!P.loop) tar = Math.max(0, Math.min(max, tar));
        return;
      }
      tar = Math.round(tar / step) * step;
      if (!P.loop) tar = Math.max(0, Math.min(max, tar));
    };
    const armSettle = () => {
      clearTimeout(settleT);
      settleT = window.setTimeout(snapTo, 300);
    };
    wrap.addEventListener(
      "wheel",
      (e) => {
        e.preventDefault();
        const d = e.deltaMode === 1 ? e.deltaY * 0.8333 * 16 : e.deltaY;
        tar += d * 0.5556;
        if (!P.loop) tar = clampFinite(tar);
        armSettle();
      },
      { passive: false }
    );
    let dragging = false;
    let start = 0;
    let flickV = 0;
    let lastT = 0;
    wrap.addEventListener("pointerdown", (e) => {
      dragging = true;
      start = e.clientX;
      flickV = 0;
      lastT = performance.now();
      wrap.classList.add("is-dragging");
      clearHot();
    });
    window.addEventListener("pointermove", onMove);
    function onMove(e) {
      if (!dragging) return;
      const now = performance.now();
      const dx = start - e.clientX;
      tar += dx * P.drag;
      flickV = flickV * 0.7 + dx / Math.max(now - lastT, 1) * 0.3;
      lastT = now;
      start = e.clientX;
      if (!P.loop) {
        if (tar < 0) tar = tar / 2;
        else if (tar > max) tar = max + (tar - max) / 2;
      }
    }
    window.addEventListener("pointerup", onUp);
    window.addEventListener("pointercancel", onCancel);
    function onCancel() {
      if (!dragging) return;
      dragging = false;
      flickV = 0;
      wrap.classList.remove("is-dragging");
      armSettle();
    }
    function onUp() {
      if (!dragging) return;
      dragging = false;
      wrap.classList.remove("is-dragging");
      if (!reduced && Math.abs(flickV) > 0.15) {
        tar += flickV * P.flick * P.drag;
        if (!P.loop) tar = clampFinite(tar);
      }
      armSettle();
    }
    wrap.tabIndex = 0;
    wrap.style.outline = "none";
    wrap.addEventListener("keydown", (e) => {
      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
      e.preventDefault();
      const base = Math.round(tar / step) * step;
      tar = base + (e.key === "ArrowRight" ? step : -step);
      if (!P.loop) tar = Math.max(0, Math.min(max, tar));
      armSettle();
    });
    let mx = -1;
    wrap.addEventListener("pointermove", (e) => {
      mx = e.clientX - wrap.getBoundingClientRect().left;
    });
    wrap.addEventListener("pointerleave", () => mx = -1);
    let hot = -1;
    let hotCandidate = -1;
    let hotSince = 0;
    let loupe = -1;
    let moving = false;
    let lastVel = -1;
    const clearHot = () => {
      if (hot >= 0) frames[hot].classList.remove("is-hot");
      hot = -1;
      hotCandidate = -1;
    };
    const tick = () => {
      cur += (tar - cur) * (reduced ? 1 : P.damp);
      if (Math.abs(tar - cur) < 0.05) cur = tar;
      const vel = Math.min(1, Math.abs(tar - cur) / (step * 1.2));
      if (P.latent && !reduced && Math.abs(vel - lastVel) > 0.01) {
        lastVel = vel;
        wrap.style.setProperty("--vel", vel.toFixed(3));
      }
      if (!moving && vel > 0.02) {
        moving = true;
        wrap.classList.add("is-moving");
        clearHot();
      } else if (moving && vel < 8e-3) {
        moving = false;
        wrap.classList.remove("is-moving");
      }
      const centre = viewW / 2 - frameW / 2;
      for (let i = 0; i < N; i++) {
        let x;
        if (P.loop) {
          x = centre + (mod(i * step - cur + total / 2, total) - total / 2);
        } else {
          x = 40 + i * step - cur;
        }
        frames[i].style.transform = `translate3d(${x.toFixed(2)}px, 0, 0)`;
        if (!reduced) {
          const n = (x + frameW / 2 - viewW / 2) / viewW;
          if (Math.abs(n) < 0.75) {
            const img = frames[i].firstElementChild?.firstElementChild;
            if (img)
              img.style.transform = `translate3d(${(-n * 10).toFixed(2)}%, 0, 0)`;
          }
        }
      }
      wrap.style.setProperty("--shift", `${(-cur).toFixed(2)}px`);
      const li = P.loop ? mod(Math.round(cur / step), N) : Math.max(0, Math.min(N - 1, Math.round(cur / step)));
      if (li !== loupe) {
        if (loupe >= 0) frames[loupe].classList.remove("is-loupe");
        loupe = li;
        frames[loupe].classList.add("is-loupe");
        count.textContent = `${pad(loupe + 1)}/${pad(N)}`;
      }
      if (!dragging && !moving && mx >= 0) {
        let idx = -1;
        for (let i = 0; i < N; i++) {
          const m = frames[i].style.transform.match(/([-\d.]+)px/);
          const x = m ? parseFloat(m[1]) : -9999;
          if (mx >= x && mx <= x + frameW) {
            idx = i;
            break;
          }
        }
        if (idx !== hotCandidate) {
          hotCandidate = idx;
          hotSince = performance.now();
        } else if (idx !== hot && performance.now() - hotSince > 120) {
          if (hot >= 0) frames[hot].classList.remove("is-hot");
          hot = idx;
          if (hot >= 0) frames[hot].classList.add("is-hot");
        }
      } else if (hot >= 0 && (dragging || moving)) {
        clearHot();
      }
    };
    gsap.ticker.add(tick);
    return {
      destroy() {
        gsap.ticker.remove(tick);
        clearTimeout(settleT);
        window.removeEventListener("pointermove", onMove);
        window.removeEventListener("pointerup", onUp);
        window.removeEventListener("pointercancel", onCancel);
        ro.disconnect();
        wrap.remove();
      },
      set(key, value) {
        if (key === "snap" || key === "latent" || key === "loop") {
          P[key] = value === "on" || value === true ? 1 : 0;
          if (key === "latent" && !P.latent) wrap.style.setProperty("--vel", "0");
          if (key === "loop" && !P.loop) {
            cur = mod(cur, total);
            tar = Math.max(0, Math.min(max, mod(tar, total)));
          }
        } else if (key in P) {
          P[key] = Number(value);
        }
      }
    };
  }
};
experiment.mount(document.querySelector(".stage"));

Light Table

Interaction New

Experiment coming soon Loading experiment

Light Table — Lab experiment