@moood/render 0.1.3 → 0.1.5

package/engine/engine.js

@@ -210,7 +210,8 @@ const Moood = (() => {
   }
 
   // W × H: the stage, in pixels
-  function drawObject(ctx, o, W, H, t, lightsOut) {
+  function drawObject(ctx, o, W, H, t, lightsOut, partsOut) {
+    const t0 = clock();
     const x = o.x * W, y = o.y * H, s = o.size * H, col = o.color;
     const light = o.light ? rgb(o.light) : null, fl = 0.9 + 0.1 * Math.sin(t * 7 + x) * Math.sin(t * 3.1 + y);
     ctx.fillStyle = ctx.strokeStyle = col;
@@ -333,43 +334,101 @@ const Moood = (() => {
         for (let i = -4; i <= 4; i++) { const u = i / 4.5, yy = y - s * 0.45 * (1 - u * u) * 1.0; ctx.beginPath(); ctx.moveTo(x + u * s * 1.4, yy); ctx.lineTo(x + u * s * 1.4, yy - s * 0.22); ctx.stroke(); }
         break;
       }
-      case 'custom': case undefined: paintCustom(ctx, o, W, H, t, lightsOut); break;
+      case 'custom': case undefined: paintCustom(ctx, o, W, H, t, lightsOut, partsOut); break;
       default: throw new Error(`unknown object kind ${o.kind}`);
     }
+    PERF.add(o, clock() - t0);
   }
 
   // Elements the world's agent paints itself. `o.code` is the body of a function (g, e):
   // g is a 2D canvas context in metres — origin at the element's anchor (where it stands),
   // x to the right, y DOWN (a 6 m house spans y −6…0). e.t = seconds by the real clock (e.phase =
   // 0…1 of the loop for animated elements), e.id = the element's id, e.rnd() = seeded random, e.px = one screen pixel in metres,
-  // e.light(x, y, radius, color, strength) = a glowing light the engine animates. What scenes
-  // share (kit.js): e.anim — the animator's toolkit; e.kit — the world's modules; e.lib — the scene's
+  // e.light(x, y, radius, color, strength, name) = a glowing light the engine animates — and a source
+  // of light the scene knows (below: lights), by the element's id, or 'id#name'; e.lights(x, y) = the
+  // light falling on a point of the painting, from where and how strong (lightsAt); e.ambient = the
+  // scene's ambient light now. What scenes share (kit.js): e.anim — the animator's toolkit; e.kit — the world's modules; e.lib — the scene's
   // lib. e.was(key, ago) — what a value of the state was `ago` seconds ago (what lags behind reads
-  // it); e.speed(key) — how fast it is changing now (per second).
+  // it); e.speed(key) — how fast it is changing now (per second); e.cut — when the last cut was
+  // (scenestate.js: scene.cut, or the scene's start), by e.t's clock: what keeps its own inertia (a
+  // module's springs, cloth, hair) starts afresh after it. e.debug(value, x?, y?) — a note shown
+  // only to whoever looks closely (?debug, a render's --debug and --json); e.warn(text) — something
+  // wrong but not an error (a pose, a name it does not know), said once in the scene's errors.
   // Errors are collected (window.__mooodErrors) so the agent reviewing its work sees them.
   // The scene's state (scenestate.js): values the scene's scripts, agents and widgets set, which
   // the painting code reads as e.state; ver counts changes, so the renderer knows to repaint.
-  const STATE = { values: {}, ver: 0, was: key => STATE.values[key], sample: null };
-  // what the shown scene's code shares (kit.js): the world's modules it lists and the scene's lib
-  let SHARED = { kit: {}, lib: {} };
+  const STATE = { values: {}, ver: 0, was: key => STATE.values[key], sample: null, cut: 0, shots: 0, read: new Set() };
+  // the state as the painting code reads it (e.state; a module's beforeFrame too): each key it reads is
+  // kept (STATE.read, since the scene was shown) — a key set from outside that nothing in the scene
+  // reads is said (scenestate.js) — and, by whoever reads it (`keys`: an element's painting, or
+  // BEFORE: the modules' beforeFrame), with its value then: what it is repainted for (moved). Listing
+  // the keys (Object.keys, for…in) reads them all.
+  // (a key kept once per painting: a read after the first costs a lookup)
+  const keep = (keys, v, k) => { if (typeof k === 'string' && !keys.has(k)) { keys.set(k, v[k]); STATE.read.add(k); } };
+  const stateRead = keys => new Proxy(STATE.values, {
+    get: (v, k) => { keep(keys, v, k); return v[k]; },
+    has: (v, k) => { keep(keys, v, k); return k in v; },
+    ownKeys: v => { keys.set(ALL, STATE.ver); return Reflect.ownKeys(v); },
+  });
+  const ALL = Symbol('all');
+  // the keys the modules' beforeFrame read (since the scene was shown): what an element painting
+  // through them (e.kit, e.lib) depends on as well
+  const BEFORE = new Map();
+  // whether the state an element's painting read (READS: read.keys — through the modules too: read.kit,
+  // how many keys their beforeFrame had read then) has changed since it was painted
+  function moved(read) {
+    if (!read || read.kit < BEFORE.size) return true;
+    for (const [k, was] of read.keys) if (k === ALL ? was !== STATE.ver : !Object.is(STATE.values[k], was)) return true;
+    return false;
+  }
+  // what the shown scene's code shares (kit.js): the world's modules it lists, the scene's lib and
+  // its land (ground: (across, distance) → metres, or null — flat)
+  let SHARED = { kit: {}, lib: {}, ground: null };
+  const groundAt = (across, distance) => (SHARED.ground ? SHARED.ground(across, distance) : 0);
   // Where an element is now, as its painting code says (e.at): the point it marks, in metres from
   // its anchor as painted — speech bubbles and widgets follow it (stage.screenOf) wherever the
-  // element is put (its `place`)
-  const FOCUS = new Map();
+  // element is put (its `place`). FOCUS: its own point (the head, say) — it stays till marked
+  // again; NAMED: the points it names (e.at(x, y, 'window')) — as its last painting marked them, so
+  // one it no longer marks is gone. A point in one of its parts (e.part) carries the part's offset.
+  const FOCUS = new Map(), NAMED = new Map();
   // A platformer's hero as it moves now (camera.mode platform): its painting code reads e.hero —
   // { vx, vy (m/s), ground } — to move its legs; the engine moves and turns the painting itself.
   const HERO = { id: null, vx: 0, vy: 0, ground: true };
-  // What an element's code read as it was last painted (element → {time, state}): one that reads
-  // the time is repainted every frame, one that reads only the state when the state changes, one
-  // that reads neither stays as painted (gl.js) — whether it reads them itself or through the kit
+  // What an element's code read as it was last painted (element → {time, state, keys, kit, lights},
+  // and how many parts it painted): one that reads the time is repainted every frame, one that reads
+  // only the state (or the light falling on it) when a key it read changes (moved), one that reads
+  // neither stays as painted (gl.js) — whether it reads them itself or through the kit
   const READS = new WeakMap();
+  // What looking closely at a scene shows (?debug, a render's --debug and --json), by element (its
+  // id, else its name): NOTES — what its code wrote as it was last painted (e.debug: a value, and the
+  // point it is about), PARTS — the parts it painted (e.part: dx, dz, box); what its painting cost
+  // and what it read are PERF's (below).
+  const NOTES = new Map(), PARTS = new Map(), keyOf = o => o.id ?? o.name;
+  // the real clock, for what costs are timed by: a render stops the page's own (window.__mooodClock:
+  // the clock before it did)
+  const clock = window.__mooodClock || (() => performance.now());
   const compiled = new Map();
+  // what the scene does wrong without failing (a name it does not know, a value it can't take — e.warn's
+  // too), said once (window.__mooodWarnings); what its code throws is an error (window.__mooodErrors)
+  const warned = new Set();
+  // the scene checked as it is drawn — in a render (mount's check) and with ?debug: what costs a
+  // little each frame to find (gl.js: a painting cut off by its box) is looked for only then
+  const CHECK = { on: false };
+  function warn(msg) {
+    if (warned.has(msg)) return;
+    warned.add(msg);
+    (window.__mooodWarnings = window.__mooodWarnings || []).push(msg);
+    console.warn('moood:', msg);
+  }
   function reportError(o, err) {
-    const msg = `${o.name || o.kind}: ${err && err.message || err}`;
+    const msg = `${o.name || o.id || o.kind}: ${err && err.message || err}`;
     (window.__mooodErrors = window.__mooodErrors || []).push(msg);
     console.warn('moood custom element:', msg);
   }
-  function paintCustom(ctx, o, W, H, t, lightsOut) {
+  // partsOut: where the parts it paints (e.part) go, each to be painted in a canvas of its own at its
+  // own depth — { dx, dz, box, paint(g, ax, ay, ppm, lights) }; without it (a probe, the picking)
+  // they are painted in place, as seen from the start
+  function paintCustom(ctx, o, W, H, t, lightsOut, partsOut) {
     const code = String(o.code || '');
     let fn = compiled.get(code);
     if (fn === undefined) {
@@ -384,48 +443,128 @@ const Moood = (() => {
     ctx.fillStyle = ctx.strokeStyle = o.color || '#000000';
     ctx.lineCap = ctx.lineJoin = 'round';
     const period = o.period || 2;
+    // what is painting now: the element itself, or one of its parts — its canvas, its anchor (x, y,
+    // ppm on the stage) and the transform there, where its lights go, the part's offset
+    const own = (g, ax, ay, k, lights, part) => { const base = g.getTransform(); return { g, x: ax, y: ay, ppm: k, base, unbase: base.inverse(), lights, part }; };
+    let cur = own(ctx, x, y, ppm, lightsOut, null);
     // a point the code names, in its units from the anchor as painted — through whatever it did to
     // the canvas since (translate, scale, rotate): [x, y, how much it is scaled]
-    const base = ctx.getTransform(), unbase = base.inverse();
     const painted = (lx, ly) => {
-      const now = ctx.getTransform(), q = unbase.transformPoint(now.transformPoint({ x: lx, y: ly }));
-      return [q.x, q.y, Math.hypot(now.a, now.b) / Math.hypot(base.a, base.b)];
+      const now = cur.g.getTransform(), q = cur.unbase.transformPoint(now.transformPoint({ x: lx, y: ly }));
+      return [q.x, q.y, Math.hypot(now.a, now.b) / Math.hypot(cur.base.a, cur.base.b)];
     };
-    const read = { time: false, state: false };
+    const read = { time: false, state: false, keys: new Map(), kit: Infinity, lights: false }, key = keyOf(o);
+    let state = null;
+    // a key read through e.was, e.speed, e.spot (its place), e.ambient (the light's looks)
+    const reads = (...ks) => { read.state = true; for (const k of ks) { STATE.read.add(k); if (!read.keys.has(k)) read.keys.set(k, STATE.values[k]); } };
+    // (an insert is painted through the iris its key opens: gl.js)
+    if (typeof o.insert === 'string') reads(o.insert);
+    // what the modules' beforeFrame read, through the kit or the lib
+    const throughKit = () => { if (read.kit !== Infinity || !BEFORE.size) return; read.state = true; read.kit = BEFORE.size; for (const k of BEFORE.keys()) if (!read.keys.has(k)) read.keys.set(k, k === ALL ? STATE.ver : STATE.values[k]); };
     READS.set(o, read);
+    NOTES.delete(key);
+    const parts = [], named = new Map();
+    if (o.id) NAMED.set(o.id, named);
     const e = {
       get t() { read.time = true; return t; },
       get phase() { read.time = true; return ((t / period) % 1 + 1) % 1; },
-      get state() { read.state = true; return STATE.values; },
+      get state() { read.state = true; return state ||= stateRead(read.keys); },
       id: o.id ?? null, rnd: seeded(hash(code) ^ hash(o.x + ':' + o.y)),
-      px: 1 / Math.max(1e-6, base.a), W, H, aspect: W / H,
-      light(lx, ly, r, color = '#ffd08a', strength = 0.6) {
+      get px() { return 1 / Math.max(1e-6, cur.base.a); }, W, H, aspect: W / H,
+      light(lx, ly, r, color = '#ffd08a', strength = 0.6, name) {
         try {
           const [px, py, k] = painted(lx, ly);
-          lightsOut.push({ x: x + px * ppm, y: y + py * ppm, r: r * k * ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3 });
+          cur.lights.push({ x: cur.x + px * cur.ppm, y: cur.y + py * cur.ppm, r: r * k * cur.ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3, id: o.id == null ? null : name == null ? String(o.id) : `${o.id}#${name}` });
         } catch (err) { reportError(o, err); }
       },
-      // where this element is now (its head, say): what speaks or hovers over it follows this point
-      at(lx, ly) { if (o.id) { const [px, py] = painted(lx, ly); FOCUS.set(o.id, { x: px, y: py }); } },
-      anim: MooodKit.anim, kit: SHARED.kit, lib: SHARED.lib,
-      was: (key, ago = 0) => { read.state = true; return STATE.was(key, ago); },
-      speed: key => { read.state = true; const a = STATE.was(key, 0), b = STATE.was(key, 0.05); return typeof a === 'number' && typeof b === 'number' ? (a - b) / 0.05 : 0; },
+      // the light falling on a point of the painting: [{ id, color, strength, x, y, z, dir, distance }]
+      lights(lx, ly) {
+        read.lights = true;
+        const [px, py] = painted(lx, ly);
+        return lightsAt(worldOf(o, px, py, cur.part));
+      },
+      get ambient() { reads(...Object.keys(LOOK.spec?.light?.looks || {})); return LOOK.now?.ambient ?? 1; },
+      // where this element is now (its head, say): what speaks or hovers over it follows this point;
+      // with a name, one of its points the game and the camera may aim at ('window', 'head', 'horn')
+      at(lx, ly, name) {
+        if (!o.id) return;
+        const [px, py] = painted(lx, ly), p = { x: px, y: py, part: cur.part };
+        if (name == null) FOCUS.set(o.id, p); else named.set(String(name), p);
+      },
+      // a part of it standing dx metres to the right and dz farther than its anchor (on the ground
+      // there): painted by paint(g, e) in metres from its own foot, at its own depth — what stands
+      // between is drawn between (a fence along a road, a crowd, figures one behind another)
+      part(dx, dz, paint, box) {
+        if (!Number.isFinite(dx) || !Number.isFinite(dz) || typeof paint !== 'function') { reportError(o, new Error('e.part(dx, dz, paint, box?): metres to the right, metres farther, a function painting it')); return; }
+        if (box !== undefined && !(Array.isArray(box) && box.length === 4 && box.every(Number.isFinite))) { reportError(o, new Error('e.part: box is [left, top, right, bottom], metres around its foot')); box = undefined; }
+        parts.push({ dx, dz, box, paint });
+      },
+      // the ground's height (metres) at (across, distance) — spec.relief, 0 without one
+      ground: groundAt,
+      // where it stands now (metres): across, distance, its elevation and the ground's under it
+      get spot() { if (o.place) reads(...Object.values(o.place).filter(k => typeof k === 'string')); return o._at ? { ...o._at } : null; },
+      // a note for whoever looks closely (?debug): text or a value (a module's poses and their
+      // weights), about the point (lx, ly) if given — shown by the element; nothing otherwise
+      debug(value, lx, ly) {
+        if (key == null) return;
+        let at = null;
+        try { if (typeof lx === 'number' && typeof ly === 'number') { const [px, py] = painted(lx, ly); at = { x: px, y: py }; } } catch (err) { reportError(o, err); }
+        (NOTES.get(key) || NOTES.set(key, []).get(key)).push({ value, at });
+      },
+      // something wrong but not an error — a name it does not know (a pose, a figure) — said once
+      warn(text) { warn(`${o.name || o.id || o.kind}: ${text}`); },
+      anim: MooodKit.anim,
+      get kit() { throughKit(); return SHARED.kit; },
+      get lib() { throughKit(); return SHARED.lib; },
+      was: (key, ago = 0) => { reads(String(key)); return STATE.was(key, ago); },
+      speed: key => { reads(String(key)); const a = STATE.was(key, 0), b = STATE.was(key, 0.05); return typeof a === 'number' && typeof b === 'number' ? (a - b) / 0.05 : 0; },
+      cut: STATE.cut,
     };
     if (o.id && o.id === HERO.id) { read.time = true; e.hero = { vx: HERO.vx, vy: HERO.vy, ground: HERO.ground }; }
     try { fn(ctx, e); } catch (err) { reportError(o, err); }
     ctx.restore();
+    // its parts: each painted where the renderer puts it — or here, in place as seen from the start
+    // (u, v: metres in its own plane, from its anchor)
+    const run = part => (g, ax, ay, k, lights) => {
+      g.save(); g.translate(ax, ay); g.scale(k, k);
+      g.fillStyle = g.strokeStyle = o.color || '#000000';
+      g.lineCap = g.lineJoin = 'round';
+      const was = cur;
+      cur = own(g, ax, ay, k, lights, { dx: part.dx, dz: part.dz });
+      try { part.paint(g, e); } catch (err) { reportError(o, err); }
+      cur = was;
+      g.restore();
+    };
+    read.parts = parts.length;
+    if (key != null) { if (parts.length) PARTS.set(key, parts.map(q => ({ dx: q.dx, dz: q.dz, box: q.box }))); else PARTS.delete(key); }
+    for (const part of parts) {
+      if (partsOut) { partsOut.push({ dx: part.dx, dz: part.dz, box: part.box, paint: run(part) }); continue; }
+      const q = inPlace(o, part.dx, part.dz);
+      if (q) run(part)(ctx, x + q.u * ppm, y + q.v * ppm, q.s * ppm, lightsOut);
+    }
+  }
+  // A part (dx, dz) of element o painted in o's own plane as seen from the start — its foot u, v
+  // metres from o's anchor, its scale s — or null (o is not where it could have parts)
+  function inPlace(o, dx, dz) {
+    const at = o._at;
+    if (!at || !(at.distance > 0) || !(at.distance + dz > 0.05)) return null;
+    const s = at.distance / (at.distance + dz), feet = at.elevation - at.ground + groundAt(at.across + dx, at.distance + dz);
+    return { u: (at.across + dx) * s - at.across, v: (EYE - feet) * s - (EYE - at.elevation), s };
   }
   // Where a custom element's painting has its origin on the W × H stage, and its scale: [x, y, px a
-  // unit]. Sky and ground elements are painted in stage heights from the stage's top-left corner, as
-  // seen from the start (x 0…W/H, y 0…1, with margins); others in metres from their anchor.
+  // unit]. Sky, ground and insert elements are painted in stage heights from the stage's top-left
+  // corner (x 0…W/H, y 0…1, with margins; the sky and the ground as seen from the start); others in
+  // metres from their anchor.
   function anchorOf(o, W, H) {
-    return o.sky || o.ground ? [0, 0, H] : [o.x * W, o.y * H, o.size * H / (o.height || 2)];
+    return o.sky || o.ground || o.insert ? [0, 0, H] : [o.x * W, o.y * H, o.size * H / (o.height || 2)];
   }
   // The box an object's painting fits in (pixels of the W × H stage): built-in kinds a fixed frame
   // around the base, custom ones their `box` in metres (default: a little wider than tall).
   function objectBox(o, W, H) {
     // the sky: as wide as the widest frame
     if (o.sky) return { bx: (W - WIDEST * H) / 2, by: -0.35 * H, bw: WIDEST * H, bh: 1.6 * H };
+    // an insert: the frame itself, as wide as the widest
+    if (o.insert) return { bx: (W - WIDEST * H) / 2, by: 0, bw: WIDEST * H, bh: H };
     // ground: from the horizon down, wider than the screen (for stepping aside and looking down)
     if (o.ground) return { bx: -EXT * W, by: o._yh * H, bw: (1 + 2 * EXT) * W, bh: (1.7 - o._yh) * H };
     const s = Math.max(2, o.size * H), x = o.x * W, y = o.y * H;
@@ -456,6 +595,329 @@ const Moood = (() => {
     ctx.restore();
   }
 
+  // ── the scene's light ──────────────────────────────────────────────────
+  // spec.light as the state has it now: the grade of the whole picture — tint, tintStrength,
+  // vignette, grain, haze, hazeColor, brightness (×), saturation (×) — and, for a lit scene, ambient
+  // (0…1: how much of its painted colour a thing keeps where no light falls on it) and ambientColor.
+  // `looks`: { key: fields } — a state value `key` (0…1) mixes the light toward that look, in the
+  // order they are listed (night over the day, dawn over the night): a script moves the key with
+  // `over`, the light changes softly. A scene is lit — its light lies on what is painted, by how far
+  // each thing is from each source (gl.js) — as much as it or a look of it gives `ambient` now: `lit`
+  // 1 when the light itself has it, else the weight of the most of the looks that do (0: not lit —
+  // its sources come in as their look does, from nothing, so it never jumps). hazeGlow (0 unset): the
+  // haze lit by the point sources (airOf).
+  // haze 0…1 → how far (eye heights) the air hides a thing to 1/e; unset: clear air, 220
+  const hazeReach = h => 600 * Math.pow(25 / 600, clamp(h, 0, 1));
+  const LOOK_NUM = { tintStrength: 0, vignette: 0.5, grain: 0.5, haze: Math.log(220 / 600) / Math.log(25 / 600), brightness: 1, saturation: 1, ambient: 1, hazeGlow: 0 };
+  const LOOK_COL = ['tint', 'hazeColor', 'ambientColor'];
+  const LOOK = { spec: null, ver: -1, now: null };
+  // "#rrggbb" → [r, g, b] 0…255, or null (said)
+  function colourOf(hex, where) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(typeof hex === 'string' ? hex : '');
+    if (!m) { warn(`${where}: ${JSON.stringify(hex)} is not a colour ("#rrggbb")`); return null; }
+    const n = parseInt(m[1], 16);
+    return [n >> 16, (n >> 8) & 255, n & 255];
+  }
+  function lookOf(spec) {
+    if (LOOK.spec === spec && LOOK.ver === STATE.ver) return LOOK.now;
+    const L = spec?.light && typeof spec.light === 'object' ? spec.light : {}, v = {};
+    for (const [k, d] of Object.entries(LOOK_NUM)) v[k] = typeof L[k] === 'number' ? L[k] : d;
+    v.tint = L.tint ? colourOf(L.tint, 'light.tint') : null;
+    v.hazeColor = colourOf(L.hazeColor || spec?.sky?.bottom || '#808080', 'light.hazeColor') || [128, 128, 128];
+    v.ambientColor = (L.ambientColor && colourOf(L.ambientColor, 'light.ambientColor')) || [255, 255, 255];
+    let lit = typeof L.ambient === 'number' ? 1 : 0;
+    const looks = L.looks && typeof L.looks === 'object' ? L.looks : {};
+    for (const [key, look] of Object.entries(looks)) {
+      if (!look || typeof look !== 'object') { warn(`light.looks.${key}: an object of light fields`); continue; }
+      for (const k of Object.keys(look)) if (!(k in LOOK_NUM) && !LOOK_COL.includes(k)) warn(`light.looks.${key}: "${k}" is not a field of the light (${[...Object.keys(LOOK_NUM), ...LOOK_COL].join(', ')})`);
+      const w = clamp(Number(STATE.values[key]) || 0, 0, 1);
+      if (w <= 0) continue;
+      if (typeof look.ambient === 'number') lit = Math.max(lit, w);
+      for (const k of Object.keys(LOOK_NUM)) if (typeof look[k] === 'number') v[k] += (look[k] - v[k]) * w;
+      for (const k of LOOK_COL) {
+        const c = look[k] && colourOf(look[k], `light.looks.${key}.${k}`);
+        if (c) v[k] = v[k] ? v[k].map((a, i) => a + (c[i] - a) * w) : c;
+      }
+    }
+    v.lit = lit;
+    v.hazeReach = hazeReach(v.haze);
+    Object.assign(LOOK, { spec, ver: STATE.ver, now: v });
+    return v;
+  }
+
+  // ── where light comes from ─────────────────────────────────────────────
+  // The scene's sources of light, as data its painting reads (e.lights) and the renderer lays on
+  // what is painted (a lit scene) and casts shadows from (`shadow`):
+  //   spec.lights: { id, across | x, distance, elevation (metres), place (as an element's: a lamp
+  //     carried), color, strength (1), reach (metres it lights, 8), on (a state key 0…1: it shines
+  //     that much), flicker (0…1), glow (metres: its halo, which the renderer draws) } — a point: a
+  //     lamp, a forge, a fire; { id, of: an element's light (its id, or 'id#name' — below), color,
+  //     strength, reach, on, flicker } — the light an element paints, where it paints it, shining as
+  //     this says (a lantern in a hand: its glow small, its reach long); or { id, from: [bearing,
+  //     height] (degrees: where it shines from — 0 the far side, 90 the right, 180 behind the viewer;
+  //     how high above the horizon), color, strength, on } — the moon, the sun, the dawn: far off, the
+  //     same everywhere;
+  //   every e.light() an element paints (its id the element's, or 'id#name' for one it names),
+  //     reaching twice its radius — as it was last painted.
+  // World units, eye heights: X to the right, Y up, Z ahead. `ver` changes when any of them does:
+  // what reads them is repainted then.
+  const SOURCES = { list: [], ver: 0 };
+  const hexOf = c => '#' + c.map(v => Math.round(clamp(v, 0, 255)).toString(16).padStart(2, '0')).join('');
+  // the spec's sources now (dz: depths()); from: the elements' lights — as [{ id, at, reach, rgb,
+  // strength }] — they too become the sources (but those the spec takes over: `of`). A source that
+  // flickers has `flicker` (0…1) and `seed`; one with a halo `glow` (eye heights)
+  function sourcesNow(spec, dz, from) {
+    const list = [], taken = new Set();
+    (Array.isArray(spec.lights) ? spec.lights : []).forEach((l, i) => {
+      if (!l || typeof l !== 'object') { warn(`lights[${i}]: an object`); return; }
+      const id = l.id != null ? String(l.id) : `lights[${i}]`;
+      const on = typeof l.on === 'string' ? clamp(Number(STATE.values[l.on]) || 0, 0, 1) : 1;
+      const flicker = clamp(Number(l.flicker) || 0, 0, 1), seed = hash(id) % 1000;
+      if (l.of != null) {
+        const el = from.find(s => s.id === String(l.of));
+        if (!el) {
+          // (an element painting no such light now: it is out)
+          const owner = String(l.of).split('#')[0];
+          if (!(spec.objects || []).some(o => o.id != null && String(o.id) === owner)) warn(`lights ${id}: "of" names an element's light ("lamp", "lamp#wick") — there is no element ${JSON.stringify(owner)}`);
+          return;
+        }
+        taken.add(el);
+        const rgb = l.color ? colourOf(l.color, `lights ${id}: color`) || el.rgb : el.rgb;
+        list.push({ ...el, id, rgb, strength: (typeof l.strength === 'number' ? l.strength : el.strength) * on, reach: l.reach > 0 ? l.reach / EYE : el.reach, ...(flicker ? { flicker, seed, sprite: undefined } : {}) });
+        return;
+      }
+      const rgb = colourOf(l.color || '#ffffff', `lights ${id}: color`) || [255, 255, 255];
+      const strength = (typeof l.strength === 'number' ? l.strength : 1) * on;
+      if (Array.isArray(l.from)) {
+        const [b, h] = l.from.map(v => (Number(v) || 0) * Math.PI / 180);
+        list.push({ id, dir: [Math.sin(b) * Math.cos(h), Math.sin(h), Math.cos(b) * Math.cos(h)], rgb, strength });
+        return;
+      }
+      if (!(l.distance > 0) && typeof l.place?.distance !== 'string') { warn(`lights ${id}: a point light has a "distance" (metres); one far off has "from": [bearing, height]`); return; }
+      const at = dz.now({ ...l, kind: undefined, sky: false, plane: false, ground: false, height: 1 }).at;
+      list.push({ id, at: [at.X, at.Y, at.Z], reach: (l.reach > 0 ? l.reach : 8) / EYE, rgb, strength, flicker, seed, halo: l.glow > 0 ? l.glow / EYE : 0 });
+    });
+    list.push(...from.filter(s => !taken.has(s)));
+    // (the same as a frame ago, to a thousandth, compared as numbers: nothing made each frame)
+    const near = (a, b) => Math.abs(a - b) < 5e-4, was = SOURCES.list;
+    const same = list.length === was.length && list.every((s, i) => {
+      const w = was[i], p = s.at || s.dir, q = w.at || w.dir;
+      return s.id === w.id && near(s.strength, w.strength) && s.rgb.every((v, j) => v === w.rgb[j]) && p.length === q.length && p.every((v, j) => near(v, q[j]));
+    });
+    if (!same) SOURCES.ver++;
+    SOURCES.list = list;
+    return list;
+  }
+  // how strong a source that flickers (sourcesNow: flicker, seed) shines at t, 0…1
+  const flickerNow = (s, t) => (s.flicker ? 1 - s.flicker * 0.5 * (0.5 + 0.5 * Math.sin(t * 9 + s.seed) * Math.sin(t * 5.3 + s.seed * 0.7)) : 1);
+  // The light in the air, drawn among what stands, each at its depth (far: a source → its depth, as
+  // the renderer orders what it draws): the halos of the scene's own lights (`glow`), and — the
+  // light's hazeGlow — the haze round every point source (a lamp, a fire, a window's e.light) glowing
+  // its colour as far as it reaches, a little nearer than the source (over what it lights). Farthest
+  // first: [{ h: the source, fog, Z }]; with no point sources, or no hazeGlow, only the halos.
+  function airOf(sources, look, far) {
+    const out = [];
+    for (const h of sources) {
+      if (!h.at || h.strength <= 0.002) continue;
+      if (h.halo) out.push({ h, fog: false, Z: far(h) });
+      if (look.hazeGlow > 0) out.push({ h, fog: true, Z: far(h) - h.reach / 2 });
+    }
+    return out.sort((a, b) => b.Z - a.Z);
+  }
+  // how strongly the haze round point source s glows seen D eye heights away (0…1, 0: not at all): as
+  // much as there is air within its reach (its haze — thick fog glows more), scattered toward the eye
+  // (×3), through the air between, as the light shines now — × hazeGlow
+  const airGlow = (look, s, D, t) => Math.min(1, look.hazeGlow * 3 * s.reach / look.hazeReach * Math.exp(-Math.max(0, D) / look.hazeReach) * Math.min(1, s.strength) * flickerNow(s, t));
+  // how much of a point light reaches x of its reach away
+  const falloff = x => (x >= 1 ? 0 : (1 - x * x) * (1 - x * x));
+  // A point of an element's painting (metres, from its anchor as painted — or from the foot of its
+  // part { dx, dz }, e.part) in the world (eye heights), or null for what has no place in it (the sky,
+  // the ground's painting, an insert)
+  function worldOf(o, px, py, part) {
+    if (o._plane) { const P = o._plane, u = px / EYE, v = py / EYE; return [P.Xc + u * P.cos + v * P.sin, P.Y, P.Zc - v * P.cos + u * P.sin]; }
+    const at = o._at;
+    if (!at || o.sky || o.ground || o.insert) return null;
+    if (!part) return [(at.across + px) / EYE, (at.elevation - py) / EYE, at.distance / EYE];
+    const across = at.across + part.dx, distance = at.distance + part.dz;
+    return [(across + px) / EYE, (at.elevation - at.ground + groundAt(across, distance) - py) / EYE, distance / EYE];
+  }
+  // The light falling on world point P (null: only what comes from far off), strongest first:
+  // { id, color, strength (as much as reaches it), x, y (toward the light on the painting: x to the
+  // right, y down — a unit vector with z), z (toward the viewer: + it lights the side we see, − it
+  // is behind: an edge of light), dir (degrees on the screen toward the light: 0 right, 90 down,
+  // −90 up, 180 left), distance (metres; null from far off) }
+  function lightsAt(P) {
+    const out = [];
+    for (const s of SOURCES.list) {
+      let v = s.dir, k = 1, d = null;
+      if (!v) {
+        if (!P) continue;
+        v = [s.at[0] - P[0], s.at[1] - P[1], s.at[2] - P[2]];
+        d = Math.hypot(v[0], v[1], v[2]);
+        k = falloff(d / s.reach);
+        v = d > 1e-6 ? v.map(c => c / d) : [0, 1, 0];
+      }
+      const strength = s.strength * k;
+      if (strength < 0.002) continue;
+      out.push({ id: s.id, color: hexOf(s.rgb), strength, x: v[0], y: -v[1], z: -v[2], dir: Math.atan2(-v[1], v[0]) * 180 / Math.PI, distance: d === null ? null : d * EYE });
+    }
+    return out.sort((a, b) => b.strength - a.strength);
+  }
+  // `shadow` on an element standing in the scene: it casts one from a light of the scene onto what
+  // `onto` names — 'ground' (the ground under everything, height 0), a plane (a floor, a table top) or
+  // an upright element (a wall) — each point of it onto the first of them its ray meets: its own
+  // painting, black, softened by the size of the light (`soft`, metres), as dark as `strength` where
+  // the light is full, fading as the light does. true = { light: the strongest at it, onto:
+  // ['ground'], strength: 0.5, soft: 0.15 }. The scene's shadows: [{ id, onto: ['ground' | id],
+  // light: id | null, strength, soft (eye heights) }] (what is wrong with one, said)
+  function shadowsOf(spec) {
+    const objs = spec.objects || [], byId = new Map(objs.filter(o => o.id != null).map(o => [String(o.id), o])), out = [];
+    for (const o of objs) {
+      const sh = o.shadow;
+      if (!sh) continue;
+      const who = o.name || o.id, c = sh === true ? {} : typeof sh === 'object' && !Array.isArray(sh) ? sh : null;
+      if (!c || o.id == null || o.sky || o.ground || o.plane || o.insert || o.kind === 'bird') { warn(`${who}: "shadow" is true or { light, onto, strength, soft } — on something standing in the scene, with an id`); continue; }
+      if (o.unseen) { warn(`${who}: it is unseen — what is not seen casts no shadow`); continue; }
+      const onto = (c.onto == null ? ['ground'] : Array.isArray(c.onto) ? c.onto : [c.onto]).map(id => {
+        const r = byId.get(String(id));
+        if (id === 'ground' || (r && r !== o && !r.sky && !r.ground && !r.insert)) return String(id);
+        warn(`${who}: its shadow falls on ${JSON.stringify(id)} — 'ground', a plane or an upright element of the scene`);
+        return null;
+      }).filter(Boolean);
+      const light = c.light != null ? String(c.light) : null, owner = light && light.split('#')[0];
+      if (light && !(spec.lights || []).some(l => l && String(l.id) === light) && !byId.has(owner)) warn(`${who}: its shadow's light "${light}" is not a light of the scene (a light's id, or an element's — "lamp", "lamp#wick")`);
+      out.push({ id: String(o.id), onto, light, strength: clamp(Number(c.strength ?? 0.5) || 0, 0, 1), soft: Math.max(0, Number(c.soft ?? 0.15) || 0) / EYE });
+    }
+    return out;
+  }
+  // the light a shadow is cast from: the one it names (null while it does not shine: an element not
+  // painting it now), else the strongest at A (where the element stands, eye heights) — a source
+  // (sourcesNow), or null
+  function shadowLight(sources, sh, A) {
+    if (sh.light) return sources.find(s => s.id === sh.light) || null;
+    let best = null, most = 0.01;
+    for (const s of sources) {
+      const k = s.dir ? s.strength : s.strength * falloff(Math.hypot(s.at[0] - A.X, s.at[1] - A.Y, s.at[2] - A.Z) / s.reach);
+      if (k > most) { most = k; best = s; }
+    }
+    return best;
+  }
+  // A lit scene's light where no source reaches: the ambient, and what comes from far off (as much as
+  // the scene is lit: look.lit) — from the viewer's side it lights what we see, from beyond only a
+  // little: [r, g, b], 0…1 a channel
+  function ambientOf(look, sources) {
+    const amb = look.ambientColor.map(v => v / 255 * look.ambient);
+    for (const s of sources) if (s.dir) { const k = (1 - 0.7 * clamp(s.dir[2] / 0.3, 0, 1)) * look.lit; for (let i = 0; i < 3; i++) amb[i] += s.rgb[i] / 255 * s.strength * k; }
+    return amb;
+  }
+  // how dark a shadow of `src` is at world point P: in a lit scene the share of the light there that
+  // the source gives (amb: the ambient's level), else as much of full light as reaches — mixed by how
+  // lit the scene is (lit 0…1, lookOf) — times strength
+  function shadowAt(sh, src, P, amb, lit) {
+    const I = src.strength * (src.at ? falloff(Math.hypot(P[0] - src.at[0], P[1] - src.at[1], P[2] - src.at[2]) / src.reach) : 1);
+    return sh.strength * ((1 - lit) * Math.min(1, I) + lit * I / (amb + I || 1));
+  }
+  // where a ray of light meets a plane { q: a point of it, n: its normal }: from a point L through C
+  // (t ≥ 1: at C or beyond it), or from far off along d (toward the light) back through C (t > 0) —
+  // [point, t], or null
+  const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+  function rayHit(pl, C, L, d) {
+    if (d) {
+      const nd = dot3(pl.n, d);
+      if (Math.abs(nd) < 1e-6) return null;
+      const t = (dot3(pl.n, C) - dot3(pl.n, pl.q)) / nd;
+      return t > 1e-4 ? [[C[0] - d[0] * t, C[1] - d[1] * t, C[2] - d[2] * t], t] : null;
+    }
+    const v = [C[0] - L[0], C[1] - L[1], C[2] - L[2]], nv = dot3(pl.n, v);
+    if (Math.abs(nv) < 1e-6) return null;
+    const t = (dot3(pl.n, pl.q) - dot3(pl.n, L)) / nv;
+    return t > 0.9999 ? [[L[0] + v[0] * t, L[1] + v[1] * t, L[2] + v[2] * t], t] : null;
+  }
+  // `redraw`: the state keys a painting depends on — [keys], or { key: step } (repainted once the
+  // value has moved a step) — repainted when they change, whatever else it reads. What they are now,
+  // as a string to compare; null without it
+  function redrawOf(o) {
+    const r = o.redraw;
+    if (r == null) return null;
+    const steps = Array.isArray(r) ? Object.fromEntries(r.map(k => [k, 0])) : r && typeof r === 'object' ? r : null;
+    if (!steps || Object.entries(steps).some(([k, v]) => typeof v !== 'number' || v < 0)) { warn(`${o.name || o.id}: "redraw" is [state keys] or { key: step }`); return null; }
+    return JSON.stringify(Object.entries(steps).map(([k, step]) => {
+      const v = STATE.values[k];
+      return typeof v === 'number' && step > 0 ? Math.round(v / step) : v ?? null;
+    }));
+  }
+
+  // What the scene's code shares (a world's module, the scene's lib) may give beforeFrame({ t, dt,
+  // state, cut }): called once a frame before anything is painted, whether its figures are painted or
+  // not — to keep its own time (the springs and steps of a figure out of sight go on), and to work
+  // out this frame's points of its figures before any element reads them.
+  // (those that have one, found once for what is shared: a scene with none does nothing a frame)
+  let befores = null, beforesOf = null, beforeState = null, beforeValues = null;
+  function beforeFrame(t, dt) {
+    if (beforesOf !== SHARED) {
+      beforesOf = SHARED;
+      befores = [...Object.entries(SHARED.kit), ['lib', SHARED.lib]].filter(([, m]) => typeof m?.beforeFrame === 'function');
+    }
+    if (!befores.length) return;
+    // (the state's values are a new object when they change: read through one made for them)
+    if (beforeValues !== STATE.values) { beforeValues = STATE.values; beforeState = stateRead(BEFORE); }
+    for (const [name, m] of befores) {
+      try { m.beforeFrame({ t, dt, state: beforeState, cut: STATE.cut }); } catch (err) { warn(`${name === 'lib' ? 'lib' : `module ${name}`}: beforeFrame: ${err?.message || err}`); }
+    }
+  }
+
+  // ── what each element costs ────────────────────────────────────────────
+  // While the performance panel is open (key P): the time each element's painting takes a frame (ms,
+  // summed by its name; in WebGL its upload too). And always its last painting's, with what it read
+  // (`last`, by its id, else its name — one with neither isn't told apart): what ?debug and a
+  // render's --json show.
+  const PERF = {
+    on: false, ms: new Map(), last: new Map(),
+    // how many times each live element (one painted again as what it reads moves) was repainted since
+    // the scene was shown, by its id (else its name)
+    repaints: new Map(),
+    repainted(o) { const k = keyOf(o); if (k != null) PERF.repaints.set(k, (PERF.repaints.get(k) || 0) + 1); },
+    add(o, ms, upload = false) {
+      if (!upload && keyOf(o) != null) PERF.last.set(keyOf(o), { ms, read: READS.get(o) });
+      if (PERF.on) { const k = o.name || o.id || o.kind || '?'; PERF.ms.set(k, (PERF.ms.get(k) || 0) + ms); }
+    },
+  };
+
+  // ── inserts ────────────────────────────────────────────────────────────
+  // An insert (`insert`: the state key that opens it) is a shot of its own over the scene — the six
+  // fingers seen close, a letter, a face: painted in the frame's own coordinates (stage heights, as
+  // the sky is), fixed to the frame whatever the camera does, and seen through an iris that its key
+  // opens, 0 (closed: the scene) … 1 (open). `iris`: [x, y, rx, ry] — the window fully open (stage
+  // heights: its centre and radii, an oval); without it the iris opens from the middle of the frame
+  // to all of it. The scene goes on under it; closing it is the way back.
+  const IRIS_ALL = Math.hypot(WIDEST / 2, 0.5) + 0.05;
+  function opening(o) {
+    if (typeof o.insert === 'string') return clamp(Number(STATE.values[o.insert]) || 0, 0, 1);
+    warn(`${o.name || o.id}: "insert" is the state key that opens it`);
+    return 0;
+  }
+  // the insert's glows painted in (they don't shine past the iris), then all cut to the iris opened u:
+  // on g, a canvas holding the insert alone, transformed to the W × H stage
+  function iris(g, o, W, H, u, lights) {
+    g.save();
+    g.globalCompositeOperation = 'lighter';
+    for (const l of lights) { glow(g, l.x, l.y, l.r, l.col, l.a * 0.6); if (l.dot) glow(g, l.x, l.y, l.dot * 3, '255,245,220', 0.9); }
+    lights.length = 0;
+    let win = o.iris;
+    if (win !== undefined && !(Array.isArray(win) && win.length === 4 && win.every(v => typeof v === 'number') && win[2] > 0 && win[3] > 0)) {
+      warn(`${o.name || o.id}: "iris" is [x, y, rx, ry] (stage heights, radii above 0)`);
+      win = undefined;
+    }
+    const [cx, cy, rx, ry] = win || [W / H / 2, 0.5, IRIS_ALL, IRIS_ALL], r = Math.min(rx, ry) * u;
+    // a soft edge, about 2% of the frame's height
+    const soft = clamp(0.02 / r, 0.002, 0.5), reach = 2 * WIDEST / r + 2, gr = g.createRadialGradient(0, 0, 0, 0, 0, 1);
+    gr.addColorStop(1 - soft, '#000'); gr.addColorStop(1, 'rgba(0,0,0,0)');
+    g.globalCompositeOperation = 'destination-in';
+    g.translate(cx * H, cy * H); g.scale(rx * u * H, ry * u * H);
+    g.fillStyle = gr; g.fillRect(-reach, -reach, 2 * reach, 2 * reach);
+    g.restore();
+  }
+
   // ── particles ──────────────────────────────────────────────────────────
   const PARTICLES = { snow: 380, rain: 520, fireflies: 45, dust: 140, petals: 90, embers: 90, leaves: 60, bubbles: 60 };
   function makeParticles(p, W, H, rnd) {
@@ -601,7 +1063,16 @@ const Moood = (() => {
     const bearing = o => typeof o.bearing === 'number' && o.distance > 0 && !o.sky;
     const paintZ = o => (o.plane ? planeZ(o) : custom(o) ? sightZ(o) : own(host(o) || o));
     const objectX = o => (bearing(o) ? 0.5 : typeof o.across === 'number' && !o.sky ? 0.5 + o.across / EYE / STAGE / paintZ(o) : o.x ?? 0.5);
-    const objectY = o => (o.sky || o.ground ? 0 : custom(o) ? yh + (1 - (o.elevation || 0) / EYE) / sightZ(o) : o.kind === 'bird' ? o.y : o.y + shift(o));
+    // where it is over the land (metres: across, ahead) — for an element placed by its distance
+    const spotOf = o => {
+      if (bearing(o)) { const b = o.bearing * Math.PI / 180; return [o.distance * Math.sin(b), o.distance * Math.cos(b)]; }
+      return [(objectX(o) - 0.5) * STAGE * sightZ(o) * EYE, o.distance];
+    };
+    // with a relief (spec.relief), what stands where its distance says stands on the ground there:
+    // its elevation is above it
+    const onLand = o => !!SHARED.ground && custom(o) && o.distance > 0 && !o.sky && !o.ground && !o.insert && !o.plane;
+    const landUnder = o => (onLand(o) ? groundAt(...spotOf(o)) : 0);
+    const objectY = o => (o.sky || o.ground ? 0 : custom(o) ? yh + (1 - ((o.elevation || 0) + landUnder(o)) / EYE) / sightZ(o) : o.kind === 'bird' ? o.y : o.y + shift(o));
     const objectSize = o => (o.sky || o.ground ? 1 : custom(o) ? (o.height || 2) / EYE / sightZ(o) : o.size);
     // where it stands in the world (eye heights: X to the right, Z ahead, Y its anchor's height) and
     // the distance Zp it is painted for
@@ -614,17 +1085,219 @@ const Moood = (() => {
     // ground planes are drawn right after the sky, under everything standing on them
     // a horizontal plane (gl.js) is ordered by its far edge, before what stands on it
     const objectZ = o => (o.sky ? Infinity : o.ground ? Z_FAR * 4 : o.plane ? clamp(planeZ(o) + (o.depth || 4) / 2 / EYE, Z_NEAR, Z_FAR) : custom(o) ? customZ(o) : o.kind === 'bird' ? 30 : own(host(o) || o));
+    // an element where it is now (its `place`), the one truth the renderers, the picking and
+    // whatever follows it go by: { o: as painted on the stage (x, y, size: fractions of it; _at:
+    // where it is in the world, metres — across, distance, its anchor's height and the ground's
+    // under it), Z: the depth it is drawn at, at: where it stands in the world }
+    const now = o => {
+      const n = placed(o), at = objectAt(n), ground = landUnder(n);
+      const _at = o.sky || o.ground || o.insert ? null : { across: at.X * EYE, distance: at.Z * EYE, elevation: at.Y * EYE, ground };
+      return { o: { ...o, x: objectX(n), y: objectY(n), size: objectSize(n), _yh: yh, _at }, Z: objectZ(n), at };
+    };
+    return {
+      yh, Z, objectX, objectAt, objectZ, now,
+      // part (dx, dz) of element o (e.part) as an element of its own: standing dx metres to the
+      // right and dz farther than o's anchor, at o's elevation over the ground there, its box `box`
+      // (o's without one) — where it is now, like now()
+      part: (o, dx, dz, box) => {
+        const n = placed(o), at = objectAt(n), elevation = at.Y * EYE - landUnder(n);
+        const { x, y, bearing, place, ...rest } = o;
+        return now({ ...rest, across: at.X * EYE + dx, distance: Math.max(0.05, at.Z * EYE + dz), elevation, box: box || o.box });
+      },
+    };
+  }
+  // ── in front, behind, cut by another ───────────────────────────────────
+  // What is drawn in front of what is their depth — at equal depth the later in the spec's objects —
+  // unless an element says: `behind: [ids]` — drawn behind those, `inFront: [ids]` — in front of
+  // them, whatever the depths. The rules of a spec: [the one behind, the one in front] by id.
+  // v: an id or a list of them, given as o's `key` — those naming other elements of the scene (ids:
+  // what stands in it — an insert is over all of it, not among them)
+  const idList = (v, o, key, ids) => {
+    if (v === undefined) return [];
+    const list = typeof v === 'string' ? [v] : Array.isArray(v) ? v : null;
+    if (!list) { warn(`${o.name || o.id}: "${key}" is a list of element ids`); return []; }
+    return list.filter(id => {
+      if (ids.has(id) && id !== o.id) return true;
+      warn(`${o.name || o.id}: "${key}" names "${id}" — not another element standing in the scene (an insert is over all of it)`);
+      return false;
+    });
+  };
+  function orderRules(spec) {
+    const objs = spec.objects || [], ids = new Set(objs.filter(o => !o.insert).map(o => o.id).filter(id => id != null)), rules = [];
+    for (const o of objs) {
+      if (o.insert && (o.behind || o.inFront || o.clip)) warn(`${o.name || o.id}: an insert is over the whole scene — "behind", "inFront" and "clip" are for what stands in it`);
+      if (o.id == null || o.insert) continue;
+      for (const id of idList(o.behind, o, 'behind', ids)) rules.push([o.id, id]);
+      for (const id of idList(o.inFront, o, 'inFront', ids)) rules.push([id, o.id]);
+    }
+    return rules;
+  }
+  // list (far to near) with the rules kept: what is to be behind moved to just before the first
+  // drawing of what it is behind (an element drawn in parts: all of them). idOf(item) → its element's id
+  function arrange(list, rules, idOf) {
+    for (let pass = 0; pass <= rules.length; pass++) {
+      let moved = false;
+      for (const [far, near] of rules) {
+        const first = list.findIndex(it => idOf(it) === near), late = [];
+        if (first < 0) continue;
+        for (let i = list.length - 1; i > first; i--) if (idOf(list[i]) === far) late.unshift(...list.splice(i, 1));
+        if (late.length) { list.splice(first, 0, ...late); moved = true; }
+      }
+      if (!moved) return list;
+    }
+    warn('behind / inFront: elements put each in front of the other, round in a circle');
+    return list;
+  }
+  // `clip`: an element seen only within what other elements paint — {inside: ids} (a figure in a
+  // doorway, a face in a window) — or only out of it — {outside: ids} (under a table top, below
+  // water) — as they are in the frame now. An element with `unseen: true` is not shown itself: a
+  // shape others are cut by. → { inside: true | false, ids } or null
+  function clipOf(o, ids) {
+    const c = o.clip;
+    if (c == null) return null;
+    const side = c && typeof c === 'object' && !Array.isArray(c) ? ['inside', 'outside'].find(k => k in c) : null;
+    if (!side) { warn(`${o.name || o.id}: "clip" is {inside: ids} or {outside: ids}`); return null; }
+    const list = idList(c[side], o, `clip.${side}`, ids);
+    return list.length ? { inside: side === 'inside', ids: list } : null;
+  }
+  // ── flat pieces of the world ───────────────────────────────────────────
+  // A plane (`plane`: a floor, a deck, a table top; the land, draped over the relief) where it lies:
+  // { Xc, Y, Zc: its centre (eye heights), w, d: across and away, cos, sin: its turn, drape, mirror,
+  // pool } — mirror: what it reflects (mirrorOf), pool: how much the scene's lights lie on it unlit (lit)
+  function planeOf(o, dz) {
+    const at = dz.objectAt(o), rot = (o.rotation || 0) * Math.PI / 180;
+    return { Xc: at.X, Y: (o.elevation || 0) / EYE, Zc: at.Z, w: Math.max(0.05, o.width || 4) / EYE, d: Math.max(0.05, o.depth || 4) / EYE, cos: Math.cos(rot), sin: Math.sin(rot), drape: !!o.drape, mirror: mirrorOf(o), pool: poolOf(o) };
+  }
+  // A plane that reflects (`reflect`: a polished floor, still water): all that is above it is seen in
+  // it as in a mirror — { strength: how much (0.35), fade: metres above the plane over which what it
+  // mirrors fades out (4; 0: never), blur: how much the mirrored spreads per metre above it (0.05) };
+  // true, or a number: the strength. → { strength, fade (eye heights), blur } or null (what is wrong, said)
+  function mirrorOf(o) {
+    const r = o.reflect;
+    if (!r) return null;
+    const c = r === true ? {} : typeof r === 'number' ? { strength: r } : typeof r === 'object' && !Array.isArray(r) ? r : null;
+    if (!c || [c.strength, c.fade, c.blur].some(v => v != null && !(typeof v === 'number' && v >= 0))) { warn(`${o.name || o.id}: "reflect" on a plane is true, a strength 0…1 or { "strength", "fade" (metres), "blur" }`); return null; }
+    return { strength: clamp(c.strength ?? 0.35, 0, 1), fade: (c.fade ?? 4) / EYE, blur: c.blur ?? 0.05 };
+  }
+  // `lit` on a plane: the scene's point lights lie on it where the scene is not lit (lookOf) — a pool
+  // under a lamp, a fire's glow on the floor; true, or how strongly (1). → 0…
+  function poolOf(o) {
+    if (o.lit == null || o.lit === false) return 0;
+    if (o.lit === true) return 1;
+    if (typeof o.lit === 'number' && o.lit >= 0) return o.lit;
+    warn(`${o.name || o.id}: "lit" on a plane is true or a strength (1)`);
+    return 0;
+  }
+  // is world point A ({ X, Y, Z }, eye heights) above a reflecting plane of `planes` (planeOf's)? — what
+  // stands on it is mirrored in it (its own `reflect` copy is not drawn)
+  const overMirror = (planes, A) => !!A && planes.some(P => {
+    if (!P.mirror || A.Y < P.Y - 0.01) return false;
+    const dx = A.X - P.Xc, dz = A.Z - P.Zc;
+    return Math.abs(dx * P.cos + dz * P.sin) <= P.w / 2 && Math.abs(dx * P.sin - dz * P.cos) <= P.d / 2;
+  });
+  // the point (f, g) of a plane's painting (both 0…1: across, and from its far edge toward the viewer)
+  // in the world, eye heights — a draped one over the land there
+  const onPlane = P => (f, g) => {
+    const u = -P.w / 2 + P.w * f, v = -P.d / 2 + P.d * g, X = P.Xc + u * P.cos + v * P.sin, Z = P.Zc - v * P.cos + u * P.sin;
+    return [X, P.Y + (P.drape ? groundAt(X * EYE, Z * EYE) / EYE : 0), Z];
+  };
+  // how finely each renderer lays a plane (cells across × away); the land hides what is behind it by
+  // the same cells as it is drawn (landLine)
+  const PLANE_CELLS = { webgl: [24, 48], '2d': [12, 24] };
+  // A flat piece of the world seen truly in perspective from cam: world(f, g) → [X, Y, Z] (eye heights)
+  // for the point (f, g) of its painting, both 0…1, cut into C × R cells; a cell close to the eye
+  // (nearer than it is big) is split finer, and one partly behind the eye is cut at the near plane,
+  // not dropped — a floor reaches right to your feet. each(pts) for each cell within view [x0, y0,
+  // x1, y1] (the frame's px): its corners [x, y, f, g, depth along the gaze] — 3 to 5, convex.
+  const NEAR = 0.06;
+  function cellsOf(cam, world, C, R, W, H, yh, view, each) {
+    const c = Math.cos(cam.yaw || 0), s = Math.sin(cam.yaw || 0), h = cam.h ?? 1;
+    // a point of it seen from the eye: e — [right, down, along the gaze] (eye heights), f, g
+    const eye = (f, g) => { const P = world(f, g), rx = P[0] - cam.x, rz = P[2] - cam.z; return { e: [rx * c - rz * s, h - P[1], rx * s + rz * c], f, g }; };
+    // the grid's corners, each seen once
+    const grid = [];
+    for (let i = 0; i <= R; i++) for (let j = 0; j <= C; j++) grid.push(eye(j / C, i / R));
+    const cell = (a, b, d, q, depth) => { // its corners: far left, far right, near right, near left
+      const zs = [a.e[2], b.e[2], d.e[2], q.e[2]];
+      let zmin = zs[0], zmax = zs[0];
+      for (const z of zs) { if (z < zmin) zmin = z; if (z > zmax) zmax = z; }
+      if (zmax < NEAR) return;
+      if (depth < 4 && zmin < Math.hypot(a.e[0] - d.e[0], a.e[1] - d.e[1], a.e[2] - d.e[2])) {
+        const fm = (a.f + b.f) / 2, gm = (a.g + q.g) / 2, top = eye(fm, a.g), right = eye(b.f, gm), bottom = eye(fm, q.g), left = eye(a.f, gm), mid = eye(fm, gm);
+        cell(a, top, mid, left, depth + 1); cell(top, b, right, mid, depth + 1); cell(left, mid, bottom, q, depth + 1); cell(mid, right, d, bottom, depth + 1);
+        return;
+      }
+      let poly = [a, b, d, q];
+      if (zmin < NEAR) {
+        const cut = [];
+        for (let i = 0; i < 4; i++) {
+          const u = poly[i], v = poly[(i + 1) % 4], uin = u.e[2] >= NEAR, vin = v.e[2] >= NEAR;
+          if (uin) cut.push(u);
+          if (uin !== vin) {
+            const k = (NEAR - u.e[2]) / (v.e[2] - u.e[2]);
+            cut.push({ e: u.e.map((x, j) => x + (v.e[j] - x) * k), f: u.f + (v.f - u.f) * k, g: u.g + (v.g - u.g) * k });
+          }
+        }
+        poly = cut;
+        if (poly.length < 3) return;
+      }
+      const pt = [];
+      let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+      for (const k of poly) {
+        const x = W / 2 + H * k.e[0] / k.e[2], y = yh * H + H * k.e[1] / k.e[2] - cam.y * H;
+        pt.push([x, y, k.f, k.g, k.e[2]]);
+        if (x < x0) x0 = x; if (x > x1) x1 = x; if (y < y0) y0 = y; if (y > y1) y1 = y;
+      }
+      if (x1 < view[0] || x0 > view[2] || y1 < view[1] || y0 > view[3]) return;
+      each(pt);
+    };
+    for (let i = 0; i < R; i++) for (let j = 0; j < C; j++) { const n = i * (C + 1) + j; cell(grid[n], grid[n + 1], grid[n + C + 2], grid[n + C + 1], 0); }
+  }
+  // The land (spec.relief, drawn as the planes draped over it) hides what stands behind its rises.
+  // Over the columns of view [x0, y0, x1, y1] (the frame's px: what is seen; one every LAND_PX), for
+  // LAND_STEPS depths: how high on the frame the land nearer than each reaches — the land as it is
+  // drawn this frame: `cells`, those of its draped planes (cellsOf; what lies below the view hides
+  // nothing seen, so they may leave it out) — so an element D away (along the gaze) is seen only
+  // above the line at the depth just in front of it. Null without them. (The line half a pixel low:
+  // what is cut and the land's edge meet with no pixel of sky between.)
+  const LAND_PX = 4, LAND_STEPS = 80, LAND_NEAR = 0.1, LAND_GAP = 0.1, LAND_NONE = 1e5;
+  function landLine([x0, , x1], cells) {
+    if (!cells.length) return null;
+    const k = Math.pow(Z_FAR / LAND_NEAR, 1 / (LAND_STEPS - 1)), zs = Array.from({ length: LAND_STEPS }, (_, i) => LAND_NEAR * Math.pow(k, i));
+    const cols = Math.max(2, Math.ceil((x1 - x0) / LAND_PX)), dx = (x1 - x0) / cols, top = new Float32Array((cols + 1) * LAND_STEPS).fill(LAND_NONE);
+    // each cell as drawn: where its edges cross each column, at the depth there — a point of the land
+    // there is in front of every depth from the first at or past it (its step: the log of its depth,
+    // eased along the edge)
+    const step = z => Math.log(Math.max(z, LAND_NEAR) / LAND_NEAR) / Math.log(k);
+    for (const pts of cells) {
+      for (let i = 0; i < pts.length; i++) {
+        let l = pts[i], r = pts[(i + 1) % pts.length];
+        if (l[0] === r[0]) continue;
+        if (l[0] > r[0]) [l, r] = [r, l];
+        const sl = step(l[4]), sr = step(r[4]), w = r[0] - l[0];
+        for (let j = Math.max(0, Math.ceil((l[0] - x0) / dx)), last = Math.min(cols, Math.floor((r[0] - x0) / dx)); j <= last; j++) {
+          const u = (x0 + j * dx - l[0]) / w, y = l[1] + (r[1] - l[1]) * u, n = j * LAND_STEPS + Math.min(LAND_STEPS - 1, Math.max(0, Math.ceil(sl + (sr - sl) * u - 1e-9)));
+          if (y < top[n]) top[n] = y;
+        }
+      }
+    }
+    for (let j = 0; j <= cols; j++) for (let i = 1, n = j * LAND_STEPS + 1; i < LAND_STEPS; i++, n++) if (top[n - 1] < top[n]) top[n] = top[n - 1];
     return {
-      yh, Z, objectX, objectAt, objectZ,
-      // an element where it is now (its `place`), the one truth the renderers, the picking and
-      // whatever follows it go by: { o: as painted on the stage (x, y, size: fractions of it),
-      // Z: the depth it is drawn at, at: where it stands in the world }
-      now: o => {
-        const n = placed(o);
-        return { o: { ...o, x: objectX(n), y: objectY(n), size: objectSize(n), _yh: yh }, Z: objectZ(n), at: objectAt(n) };
+      // the line in front of depth D over the columns from xa to xb: [[x, y], …], or null if nowhere
+      // there it comes above `bottom` (y: the lowest the element reaches on the frame)
+      at(D, xa, xb, bottom) {
+        let n = zs.findIndex(z => z > D - LAND_GAP);
+        n = n < 0 ? LAND_STEPS - 1 : n - 1;
+        if (n < 0 || xb <= x0 || xa >= x1) return null;
+        const j0 = Math.max(0, Math.floor((xa - x0) / dx)), j1 = Math.min(cols, Math.ceil((xb - x0) / dx));
+        const pts = [];
+        let hides = false;
+        for (let j = j0; j <= j1; j++) { const y = top[j * LAND_STEPS + n] + 0.5; pts.push([x0 + j * dx, y]); if (y < bottom) hides = true; }
+        return hides ? pts : null;
       },
     };
   }
+
   // Screen transform [a b c d e f] for a plane at distance Z (Infinity = the sky): maps the
   // scene as painted from the starting spot (on the stage) to the frame (W × H) from where the
   // camera is now.
@@ -655,14 +1328,17 @@ const Moood = (() => {
   }
   // Where an element's painting (as depths() places it on the SW-wide stage) goes on the frame from
   // camera cam, where it is now: { m: the transform, D: its distance along the gaze }, or null behind the eye
-  function placeOf(o, cam, W, H, dz, round) {
-    const n = dz.now(o);
-    if (!round) return { m: view(cam, n.Z, W, H, dz.yh), D: n.Z - cam.z };
-    return billboard(cam, n.at, n.o.x * STAGE * H, n.o.y * H, W, H, dz.yh);
+  function placeOf(o, cam, W, H, dz, round) { return seenOf(cam, dz.now(o), W, H, dz.yh, round); }
+  // where something standing — n: { o, at, Z }, a now() of it (depths: the element, or a part of it) —
+  // is seen from cam: { m, D }, or null (behind the eye, looking around)
+  function seenOf(cam, n, W, H, yh, round) {
+    return round ? billboard(cam, n.at, n.o.x * STAGE * H, n.o.y * H, W, H, yh) : { m: view(cam, n.Z, W, H, yh), D: n.Z - cam.z };
   }
   // The hero of a platformer h = { dx, dy (metres from where it is painted), flip } as a transform
   // of its painting: its anchor painted at x = ax, `ppm` painted px per metre
   const heroMatrix = (h, ax, ppm) => [h.flip ? -1 : 1, 0, 0, 1, (h.flip ? 2 * ax : 0) + h.dx * ppm, -h.dy * ppm];
+  // (2D) affine m after n: [a b c d e f] each
+  const mul = (m, n) => [m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1], m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3], m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5]];
   // The full circle of the sky looking around: painted 2π stage heights wide, straight ahead in
   // its middle; seen through the frame as a cylinder.
   const TAU = 2 * Math.PI;
@@ -707,7 +1383,7 @@ const Moood = (() => {
   function limits(spec, W, H) {
     const { Z, objectZ, objectX } = depths(spec), aspect = W / H;
     const land = (spec.layers || []).map((L, i) => (LAND.has(L.kind) ? Z[i] : null)).filter(z => z !== null);
-    const things = (spec.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => {
+    const things = (spec.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane && !o.insert).map(o => {
       const z = objectZ(o), b = Array.isArray(o.box) && o.box.length === 4 ? (o.box[0] + o.box[2]) / 2 / EYE : 0;
       return { x: (objectX(o) - 0.5) * STAGE * z + b, z };
     });
@@ -721,7 +1397,7 @@ const Moood = (() => {
     if (setup.mode === 'roam') {
       if (setup.area) { const [l, r, b, f] = setup.area; room = [-l, r, -b, f]; }
       else {
-        const dz = depths(spec), at = (spec.objects || []).filter(o => !o.sky && !o.ground && o.kind !== 'bird').map(o => dz.objectAt(o)).filter(p => Math.hypot(p.X, p.Z) <= ROOM);
+        const dz = depths(spec), at = (spec.objects || []).filter(o => !o.sky && !o.ground && !o.insert && o.kind !== 'bird').map(o => dz.objectAt(o)).filter(p => Math.hypot(p.X, p.Z) <= ROOM);
         const xs = [0, ...at.map(p => p.X)], zs = [0, ...at.map(p => p.Z)], k = 1 / EYE;
         room = [Math.min(0, Math.min(...xs) + k), Math.max(0, Math.max(...xs) - k), Math.min(0, Math.min(...zs) + k), Math.max(0, Math.max(...zs) - k)];
       }
@@ -772,8 +1448,13 @@ const Moood = (() => {
     const hw = Math.max(0, cam.z - zb) * lim.aspect / 2;
     cam.x = clamp(cam.x, Math.max(lo, -hw), Math.min(hi, hw));
   }
-  // near things fade out as you walk up to and past them
-  const fadeNear = (Z, cam) => clamp((Z - cam.z - 0.3) / 0.6, 0, 1);
+  // Near things: an element D away along the gaze (eye heights) fades over the last steps before
+  // the eye — from PASS_TO (60 cm) to PASS_FROM (20 cm), as you walk through a curtain of leaves: a
+  // painted card is not to pass the eye magnified many times over. Nearer than that, and behind the
+  // eye, it is not drawn. One beside the way (a post, a figure a metre aside) slides out of the frame
+  // whole before it comes so near.
+  const PASS_FROM = 0.12, PASS_TO = 0.35;
+  const nearFade = D => clamp((D - PASS_FROM) / (PASS_TO - PASS_FROM), 0, 1);
 
   function place(ctx, S, cam, Z) { ctx.transform(...view(cam, Z, S.W, S.H, S.yh)); }
 
@@ -803,7 +1484,8 @@ const Moood = (() => {
     // through the world (`place`) is put where the state has it as each frame starts (move)
     const round = camSetup(spec).round, farFirst = (a, b) => (b.Z - a.Z) || 0;
     const at = o => { const n = dz.now(o); return { o: n.o, Z: n.Z, p: round && !o.sky && !o.ground ? n.at : null }; };
-    const objects = (spec.objects || []).map(o => ({ from: o, ...at(o) })).sort(farFirst), moving = objects.filter(ob => ob.from.place);
+    const objects = (spec.objects || []).filter(o => !o.insert).map(o => ({ from: o, ...at(o) })).sort(farFirst), moving = objects.filter(ob => ob.from.place);
+    const inserts = (spec.objects || []).filter(o => o.insert).map(o => ({ ...o, _yh: dz.yh }));
     const move = () => { if (!moving.length) return; for (const ob of moving) Object.assign(ob, at(ob.from)); objects.sort(farFirst); };
     const sky = !spec.sky ? '#000000' : (() => {
       const c = document.createElement('canvas').getContext('2d');
@@ -812,20 +1494,151 @@ const Moood = (() => {
       return g;
     })();
     const particles = (spec.particles || []).map(p => ({ p, list: makeParticles(p, W, H, rnd) }));
-    // vignette depends only on the scene, not the frame: paint it once
+    // vignette depends only on the frame: painted once, full, laid as strong as the light says
     const vignette = layer(W, H), vg = vignette.getContext('2d');
     const v = vg.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.35, W / 2, H / 2, Math.hypot(W, H) * 0.6);
     v.addColorStop(0, 'rgba(0,0,0,0)');
-    v.addColorStop(1, `rgba(0,0,0,${0.75 * clamp(spec.light?.vignette ?? 0.5, 0, 1)})`);
+    v.addColorStop(1, 'rgba(0,0,0,0.75)');
     vg.fillStyle = v; vg.fillRect(0, 0, W, H);
-    return { W, H, SW, u, x0, span, yh: dz.yh, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, move, vignette, scratch: layer(W, H) };
+    const ids = new Set(objects.map(ob => ob.from.id).filter(id => id != null)), clippers = new Set();
+    for (const ob of objects) { ob.clip = clipOf(ob.from, ids); for (const id of ob.clip?.ids || []) clippers.add(id); }
+    // planes where they lie (planeOf); the land: those draped over the relief
+    for (const ob of objects) if (ob.o.plane) ob.plane = planeOf(ob.from, dz);
+    // the shadows each element casts (by its id)
+    const casts = new Map();
+    for (const sh of shadowsOf(spec)) casts.set(sh.id, [...(casts.get(sh.id) || []), sh]);
+    return { W, H, SW, u, x0, span, yh: dz.yh, dz, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, inserts, move, vignette, scratch: layer(W, H), rules: orderRules(spec), casts, clippers, lands: objects.filter(ob => ob.plane?.drape), mirrors: objects.filter(ob => ob.plane?.mirror && !ob.from.unseen).map(ob => ob.plane), painted: [] };
+  }
+
+  // ── light and shadows with Canvas 2D ───────────────────────────────────
+  // (the fallback: lit and shadowed looking ahead only; the light laid by the screen, not by depth)
+  // canvas-sized layers of a 2D stage, made once: [canvas, its context]
+  function layer2d(S, name) {
+    const o = S.out;
+    if (!S[name]) S[name] = layer(o.cw, o.ch);
+    return [S[name], S[name].getContext('2d')];
+  }
+  // the elements' lights as sources (sourcesNow), where they were last painted (S.painted: { o, lights }
+  // — each element, and each part of one, as standing() drew it)
+  function sources2d(S, spec) {
+    const from = [];
+    for (const { o, lights } of S.painted) {
+      const [ax, ay, k] = anchorOf(o, S.SW, S.H);
+      for (const l of lights) {
+        const at = worldOf(o, (l.x - ax) / k, (l.y - ay) / k);
+        if (at) from.push({ id: l.id ?? String(o.id ?? o.kind), at, reach: 2 * l.r / k / EYE, rgb: l.col.split(',').map(Number), strength: l.a });
+      }
+    }
+    return sourcesNow(spec, S.dz, from);
+  }
+  // (2D) A lit scene's light: what is lit (the land, what stands, particles) is drawn on a layer of its
+  // own (L.g), and the light laid on it — each time something unlit comes (L.flush: a halo, what
+  // glows; and at the end), so that what is unlit is over what is behind it and under what is in
+  // front of it, as in WebGL. L.dirty: drawn on since. Not lit: L.g null, ctx drawn on.
+  function lit2d(ctx, S, look, cam) {
+    const L = { g: null, dirty: false, look, flush() {} };
+    if (!S.lit) return L;
+    const { out } = S, [lc, g] = layer2d(S, 'litLayer');
+    g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, out.cw, out.ch); g.translate(out.x, out.y);
+    let map = null;
+    L.g = g;
+    L.flush = () => {
+      if (!L.dirty) return;
+      L.dirty = false;
+      map ||= lightMap(S, look, cam);
+      // the light only where something is painted, multiplied in; then put down, the layer cleared
+      const [laid, lg] = layer2d(S, 'lightLaid');
+      lg.globalCompositeOperation = 'copy'; lg.drawImage(map, 0, 0);
+      lg.globalCompositeOperation = 'destination-in'; lg.drawImage(lc, 0, 0);
+      g.save(); g.setTransform(1, 0, 0, 1, 0, 0);
+      g.globalCompositeOperation = 'multiply'; g.drawImage(laid, 0, 0);
+      ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.drawImage(lc, 0, 0); ctx.restore();
+      g.globalCompositeOperation = 'source-over'; g.clearRect(0, 0, out.cw, out.ch); g.restore();
+    };
+    return L;
+  }
+  // the light as it falls this frame: the ambient, the point sources as soft discs where they are seen
+  function lightMap(S, look, cam) {
+    const { W, H, out } = S, [map, mg] = layer2d(S, 'lightMap'), amb = ambientOf(look, S.sources).map(v => v * 255);
+    // (its sources as much as the scene is lit)
+    mg.setTransform(1, 0, 0, 1, 0, 0); mg.globalCompositeOperation = 'source-over';
+    mg.fillStyle = `rgb(${amb.map(v => Math.round(clamp(v, 0, 255))).join(',')})`; mg.fillRect(0, 0, map.width, map.height);
+    mg.globalCompositeOperation = 'lighter';
+    for (const s of S.sources) {
+      const p = !s.dir && project(cam, ...s.at, W, H, S.yh);
+      if (!p || s.strength < 0.002) continue;
+      const r = s.reach * H / p[2], x = p[0] + out.x, y = p[1] + out.y, g = mg.createRadialGradient(x, y, 0, x, y, r);
+      // (1 − x²)²: as the light falls off (in its own colour: past full it can't brighten here)
+      for (const u of [0, 0.25, 0.5, 0.75, 1]) g.addColorStop(u, `rgba(${s.rgb.join(',')},${Math.min(1, s.strength * look.lit * falloff(u))})`);
+      mg.fillStyle = g; mg.fillRect(x - r, y - r, 2 * r, 2 * r);
+    }
+    mg.globalCompositeOperation = 'source-over';
+    return map;
+  }
+  // the affine map taking three points a to three points b ([x, y] each): [a b c d e f]
+  function affine3(a, b) {
+    const [[x0, y0], [x1, y1], [x2, y2]] = a, det = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);
+    if (Math.abs(det) < 1e-9) return null;
+    const solve = (v0, v1, v2) => { const p = ((v1 - v0) * (y2 - y0) - (v2 - v0) * (y1 - y0)) / det, q = ((x1 - x0) * (v2 - v0) - (x2 - x0) * (v1 - v0)) / det; return [p, q, v0 - p * x0 - q * y0]; };
+    const [A, C, E] = solve(b[0][0], b[1][0], b[2][0]), [B, D, F] = solve(b[0][1], b[1][1], b[2][1]);
+    return [A, B, C, D, E, F];
+  }
+  // An element's shadows (shadowsOf), with Canvas 2D — or a part's, its element's: its painting (the
+  // item's own canvas, standing()) laid where the light throws three points of its box — an affine
+  // likeness of the true shadow — black and blurred, onto g before it (on an upright element: within
+  // its box; on a plane: within it as it lies). g draws in the canvas's pixels; items are in the frame's
+  function shadows2d(g, S, it, list, cam) {
+    const { W, H, SW, out } = S, o = it.o, m = it.m, b = objectBox(o, SW, H), [ax, ay, k] = anchorOf(o, SW, H);
+    const world = (px, py) => worldOf(o, (px - ax) / k, (py - ay) / k), A0 = world(ax, ay), A = { X: A0[0], Y: A0[1], Z: A0[2] };
+    // (its foot at the anchor: what stands on the ground touches its shadow there)
+    const pts = [[b.bx, ay], [b.bx + b.bw, ay], [b.bx + b.bw / 2, b.by]];
+    for (const sh of S.casts.get(String(it.id)) || []) {
+      const src = shadowLight(S.sources, sh, A);
+      if (!src) continue;
+      const on = sh.onto.filter(id => id !== 'ground').map(id => list.find(x => !x.part && String(x.id) === id)).filter(Boolean), walls = on.filter(w => !w.plane);
+      for (const id of sh.onto) {
+        const R = id === 'ground' ? null : on.find(w => String(w.id) === id);
+        if (id !== 'ground' && !R) continue;
+        const pl = R?.plane ? { q: [R.plane.Xc, R.plane.Y, R.plane.Zc], n: [0, 1, 0] } : R ? { q: worldOf(R.o, 0, 0), n: [0, 0, 1] } : { q: [0, groundAt(o._at.across, o._at.distance) / EYE, 0], n: [0, 1, 0] };
+        const hits = pts.map(([px, py]) => rayHit(pl, world(px, py), src.at, src.dir));
+        const seen = hits.map(h => h && project(cam, ...h[0], W, H, S.yh));
+        if (seen.some(q => !q)) continue;
+        const T = affine3(pts.map(([px, py]) => [m[0] * px + m[4] - it.sx, m[3] * py + m[5] - it.sy]), seen.map(q => [q[0] + out.x, q[1] + out.y]));
+        if (!T) continue;
+        // as dark as at its foot
+        const [sc, sg] = layer2d(S, 'shadowLayer'), top = hits[2], a = shadowAt(sh, src, hits[0][0], S.ambient, S.lit);
+        if (a < 0.005) continue;
+        sg.setTransform(1, 0, 0, 1, 0, 0); sg.globalCompositeOperation = 'source-over'; sg.clearRect(0, 0, sc.width, sc.height);
+        sg.setTransform(...T); sg.drawImage(it.canvas, 0, 0);
+        sg.setTransform(1, 0, 0, 1, 0, 0); sg.globalCompositeOperation = 'source-in'; sg.fillStyle = '#000'; sg.fillRect(0, 0, sc.width, sc.height);
+        g.save(); g.setTransform(1, 0, 0, 1, 0, 0);
+        // on a plane: within it; on a wall: within its box; on the ground: below the walls' feet it
+        // also falls on
+        if (R?.plane) {
+          g.beginPath();
+          cellsOf(cam, onPlane(R.plane), 1, 1, W, H, S.yh, [-out.x, -out.y, out.cw - out.x, out.ch - out.y], pts => { g.moveTo(pts[0][0] + out.x, pts[0][1] + out.y); for (const q of pts) g.lineTo(q[0] + out.x, q[1] + out.y); g.closePath(); });
+          g.clip();
+        } else if (R) {
+          const rm = R.m, rb = R.box;
+          g.beginPath(); g.rect(rm[0] * rb.bx + rm[4] + out.x, rm[3] * rb.by + rm[5] + out.y, rm[0] * rb.bw, rm[3] * rb.bh); g.clip();
+        } else if (walls.length) {
+          const feet = Math.max(...walls.map(w => w.m[3] * w.o.y * H + w.m[5]));
+          g.beginPath(); g.rect(0, feet + out.y, out.cw, out.ch); g.clip();
+        }
+        // a penumbra as wide as the light seen from the caster's top, over the way to the shadow
+        const blur = sh.soft * (src.dir ? top[1] : top[1] - 1) * H / seen[2][2] / 2;
+        g.globalAlpha = a; if (blur > 0.5) g.filter = `blur(${blur.toFixed(1)}px)`;
+        g.drawImage(sc, 0, 0);
+        g.restore();
+      }
+    }
   }
 
   // Looking around, with Canvas 2D (the fallback): the sky turned as a flat band (not bent into a
-  // cylinder), then the cards facing the eye, far to near. Cards turned their own way (`facing`),
-  // like planes, are drawn by the WebGL renderer only.
-  function aroundFrame(ctx, S, cam, t) {
-    const { W, H, SW } = S, full = TAU * H, off = W / 2 - full / 2 - cam.yaw * H;
+  // cylinder); then what stands about (standing()). Cards turned their own way (`facing`) are drawn
+  // by the WebGL renderer only.
+  function skyAround(ctx, S, cam, t) {
+    const { W, H } = S, full = TAU * H, off = W / 2 - full / 2 - cam.yaw * H;
     for (const { o } of S.objects) {
       if (!o.sky) continue;
       for (let x0 = ((off % full) + full) % full - full; x0 < W; x0 += full) {
@@ -835,30 +1648,279 @@ const Moood = (() => {
         ctx.restore();
       }
     }
-    const seen = [];
-    for (const { o, p } of S.objects) {
-      if (o.sky || o.ground || o.plane || typeof o.facing === 'number') continue;
-      const b = billboard(cam, p, o.x * SW, o.y * H, W, H, S.yh);
-      if (b) seen.push({ o, b });
-    }
-    seen.sort((a, b) => b.b.D - a.b.D);
-    for (const { o, b } of seen) {
-      const fade = clamp((b.D - 0.3) / 0.6, 0, 1), lights = [];
-      if (fade <= 0) continue;
-      ctx.save(); ctx.transform(...b.m); ctx.globalAlpha = fade;
-      drawObject(ctx, o, SW, H, t, lights); drawLights(ctx, lights);
+  }
+
+  // What stands in the scene, with Canvas 2D: far to near (as the elements say: behind, inFront),
+  // each cut by what it is to be seen inside or out of (clip), and by the land in front of it. An
+  // element painting parts (e.part) is painted first, it and each part in a canvas of its own, and
+  // those drawn among the rest at their own depths (as is one that casts a shadow or cuts another:
+  // its canvas is what is cast, and the mask). Planes lie among them, each at its farthest. Everything
+  // here is in the frame's pixels. A lit scene: what is lit is drawn on L's layer (lit2d), what glows
+  // and the halos straight on ctx, between. One that casts a shadow (and each of its parts) has it
+  // drawn just before it; the halos of the scene's own lights at their depth among the rest.
+  function standing(ctx, S, cam, t, L) {
+    const { W, H, SW, dz, out } = S, items = [], painted = S.painted = [], lit = L.g;
+    // o as seen from cam: an item to draw ({ id, o, m, D, Z: what orders it, box, fade, clip, unseen }), or null
+    const itemOf = (ob, o, p, Z) => {
+      const at = seenOf(cam, { o, at: p, Z }, W, H, S.yh, S.round);
+      if (!at) return null;
+      const box = objectBox(o, SW, H), fade = nearFade(at.D);
+      // (a platformer's hero: moved and turned from where it is painted)
+      const m = cam.hero && o.id === cam.hero.id ? mul(at.m, heroMatrix(cam.hero, o.x * SW, o.size * H / (o.height || 2))) : at.m;
+      return fade > 0 ? { id: ob.from.id, ob, o, m, D: at.D, Z: S.round ? at.D : Z, box, fade, clip: ob.clip, unseen: !!ob.from.unseen } : null;
+    };
+    for (const ob of S.objects) {
+      const o = ob.o;
+      if (o.plane) {
+        const P = ob.plane;
+        if (!ob.from.unseen) items.push({ id: ob.from.id, ob, o, plane: P, Z: S.round ? Math.hypot(P.Xc - cam.x, P.Zc - cam.z) + Math.max(P.w, P.d) / 2 : ob.Z });
+        continue;
+      }
+      if (S.round && (o.sky || o.ground || typeof o.facing === 'number')) continue;
+      const it = itemOf(ob, o, ob.p, ob.Z), id = String(ob.from.id);
+      // (out of sight — behind the eye, passed — it goes on all the same, as a frame unseen paints it)
+      if (!S.casts.has(id) && !S.clippers.has(id) && (ob.parted === false || (o.kind && o.kind !== 'custom'))) { if (it) items.push(it); else unseen2d(S, o, t); continue; }
+      // painted now, it and its parts, each where it is seen (painted all the same when it is out of
+      // sight: its parts may not be)
+      const recs = [], whole = prepaint(S, ob, 0, it || { o, m: [1, 0, 0, 1, 0, 0] }, t, painted, recs);
+      ob.parted = recs.length > 0;
+      // (its canvases kept only while it needs them: one painting no parts, casting no shadow, cutting
+      // nothing is drawn straight from the next frame on — this frame's item holds its canvas till drawn)
+      if (!ob.parted && !S.casts.has(id) && !S.clippers.has(id)) ob.canvases = null;
+      else ob.canvases.length = recs.length + 1;
+      if (it && whole) items.push(whole);
+      recs.forEach((r, i) => {
+        const n = dz.part(ob.from, r.dx, r.dz, r.box), pit = itemOf(ob, n.o, n.at, n.Z), done = pit && prepaint(S, ob, i + 1, pit, t, painted, null, r);
+        if (done) items.push(done);
+      });
+    }
+    items.sort((a, b) => (b.Z - a.Z) || 0);
+    arrange(items, S.rules, it => it.id);
+    // the land hiding what stands behind its rises: for the camera as it is (kept while it stands)
+    const key = SHARED.ground && `${cam.x}|${cam.y}|${cam.z}|${cam.h}|${cam.yaw}`;
+    // (the land's cells as they are drawn this frame: plane2d)
+    const seen = [-out.x, -out.y, out.cw - out.x, out.ch - out.y];
+    for (const ob of S.lands) { ob.cells = []; cellsOf(cam, onPlane(ob.plane), ...PLANE_CELLS['2d'], W, H, S.yh, [seen[0], -Infinity, seen[2], seen[3]], pts => ob.cells.push(pts)); }
+    if (key !== S.landKey) { S.landKey = key; S.land = key ? landLine(seen, S.lands.flatMap(ob => ob.cells)) : null; }
+    const land = S.land;
+    const far = h => (S.round ? Math.hypot(h.at[0] - cam.x, h.at[2] - cam.z) : h.at[2]);
+    const look = L.look, halos = airOf(S.sources, look, far);
+    const halo = ({ h, fog }) => {
+      const p = project(cam, ...h.at, W, H, S.yh);
+      if (!p) return;
+      ctx.save(); ctx.globalCompositeOperation = 'lighter';
+      if (fog) glow(ctx, p[0], p[1], h.reach * H / p[2], h.rgb.join(','), airGlow(look, h, p[2], t));
+      else {
+        const r = h.halo * H / p[2], a = Math.min(1, h.strength) * flickerNow(h, t);
+        glow(ctx, p[0], p[1], r, h.rgb.join(','), 0.6 * a); glow(ctx, p[0], p[1], r / 4, '255,245,220', 0.8 * a);
+      }
       ctx.restore();
+    };
+    const masks = new Map();
+    // (in a lit scene what is unlit — a halo, what glows — is painted over what the light has been
+    // laid on so far, under what is in front of it: L.flush)
+    // the reflecting planes' mirrors, made before any is drawn: what stands nearer is in them too
+    const mirrors = new Map(items.filter(it => it.plane?.mirror).map(it => [it, mirror2d(S, it, items, cam, t)]));
+    for (const it of items) {
+      if (halos.length && halos[0].Z >= it.Z) { L.flush(); while (halos.length && halos[0].Z >= it.Z) halo(halos.shift()); }
+      if (it.unseen) continue;
+      if (lit && it.o.glows) L.flush();
+      const g = lit && !it.o.sky && !it.o.glows ? lit : ctx;
+      if (g === lit) L.dirty = true;
+      if (it.plane) {
+        plane2d(g, it, S, cam, t, painted);
+        if (mirrors.has(it)) onPlane2d(g, S, it.plane, cam, () => { g.globalAlpha = it.plane.mirror.strength; g.filter = `blur(${(it.plane.mirror.blur * 0.1 * H).toFixed(1)}px)`; g.drawImage(mirrors.get(it), 0, 0); });
+        if (it.plane.pool && S.lit < 1) onPlane2d(g, S, it.plane, cam, () => pool2d(g, S, it.plane, cam, t));
+        continue;
+      }
+      const cut = land && !it.o.sky && !it.o.ground ? landCut(land, it) : null;
+      if (cut === false) continue;
+      if (it.canvas && S.casts.has(String(it.id))) shadows2d(g, S, it, items, cam);
+      // on water: a mirrored, fainter copy about the water surface under it, fading away from it (as
+      // gl.js draws it) — not over a reflecting plane: that mirrors it
+      const copy = !S.round && !it.part && (it.o.reflect ?? (it.o.kind === 'boat' || it.o.kind === 'bridge')), A = copy && worldOf(it.o, 0, 0);
+      if (copy && !(A && overMirror(S.mirrors, { X: A[0], Y: A[1], Z: A[2] }))) {
+        const m = it.m, gy = m[3] * (isFinite(it.Z) ? Math.max(it.o.y * H, (S.yh + 1 / it.Z) * H) : S.yh * H) + m[5];
+        g.save(); g.setTransform(1, 0, 0, 1, 0, 0); g.globalAlpha = 0.3 * it.fade;
+        g.drawImage(flipped(S, gy, gy - (m[3] * it.box.by + m[5]), 0.27, gc => drawItem(gc, it, S, cam, t)), 0, 0);
+        g.restore();
+      }
+      g.save();
+      if (cut) {
+        g.beginPath(); g.moveTo(cut[0][0], -10 * H);
+        for (const [x, y] of cut) g.lineTo(x, y);
+        g.lineTo(cut.at(-1)[0], -10 * H); g.clip();
+      }
+      if (it.clip) {
+        // in a layer of its own, cut by what the others named paint now (their mask made once a
+        // frame for all it cuts — a plane among them laid as it lies)
+        const ids = it.clip.ids.join('\n');
+        let mask = masks.get(ids);
+        if (!mask) {
+          mask = (S.masks ||= [])[masks.size] ||= layer(W, H);
+          const mg = mask.getContext('2d');
+          mg.clearRect(0, 0, W, H);
+          for (const m of items) if (it.clip.ids.includes(m.id)) { if (m.plane) plane2d(mg, m, S, cam, t, []); else drawItem(mg, m, S, cam, t); }
+          masks.set(ids, mask);
+        }
+        const lay = S.lay ||= layer(W, H), lg = lay.getContext('2d');
+        lg.clearRect(0, 0, W, H);
+        drawItem(lg, it, S, cam, t);
+        lg.globalCompositeOperation = it.clip.inside ? 'destination-in' : 'destination-out';
+        lg.drawImage(mask, 0, 0);
+        lg.globalCompositeOperation = 'source-over';
+        g.drawImage(lay, 0, 0);
+      } else drawItem(g, it, S, cam, t, painted);
+      g.restore();
+      // its glows (e.light, a house's windows) over it, unlit
+      if (lit && it.lights?.length) { L.flush(); ctx.save(); ctx.transform(...it.m); ctx.globalAlpha = it.fade; drawLights(ctx, it.lights); ctx.restore(); }
+      // (one that began painting parts: from the next frame on, they stand at their own depths)
+      if (!it.canvas && READS.get(it.o)?.parts) it.ob.parted = true;
+    }
+    if (halos.length) { L.flush(); halos.forEach(halo); }
+  }
+  // (2D) drawn by draw(g) — in the frame's pixels — mirrored about the line y = line, only below it,
+  // fading over `fade` px below it to `to` (0 by default; fade 0: none): a canvas the size of the canvas
+  function flipped(S, line, fade, to, draw) {
+    const out = S.out, [c, g] = layer2d(S, 'flipped'), y = out.y + line;
+    g.setTransform(1, 0, 0, 1, 0, 0); g.globalCompositeOperation = 'source-over'; g.clearRect(0, 0, c.width, c.height);
+    g.setTransform(1, 0, 0, -1, out.x, out.y + 2 * line);
+    draw(g);
+    g.setTransform(1, 0, 0, 1, 0, 0); g.globalCompositeOperation = 'destination-in';
+    if (fade > 0) { const gr = g.createLinearGradient(0, y, 0, y + fade); gr.addColorStop(0, '#000'); gr.addColorStop(1, `rgba(0,0,0,${to})`); g.fillStyle = gr; } else g.fillStyle = '#000';
+    g.fillRect(0, y, c.width, Math.max(0, c.height - y));
+    g.globalCompositeOperation = 'source-over';
+    return c;
+  }
+  // (2D) a reflecting plane's mirror (planeOf: mirror): what stands above it — each item, and each
+  // halo of the scene's lights — flipped about where the plane's level is seen at its depth, fading out
+  // over the mirror's `fade` above it; a canvas the size of the canvas. (Planes, and what is cut by
+  // others, are not mirrored; its blur is one for all of it.)
+  function mirror2d(S, pl, items, cam, t) {
+    const { H, out } = S, P = pl.plane, M = P.mirror, [c, g] = layer2d(S, `mirror:${pl.id}`);
+    g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, c.width, c.height);
+    const A = (S.yh - cam.y) * H, B = H * ((cam.h ?? 1) - P.Y);
+    const add = (D, draw) => {
+      if (!isFinite(D) && M.fade > 0) return;
+      g.drawImage(flipped(S, isFinite(D) ? A + B / D : A, M.fade * H / D, 0, draw), 0, 0);
+    };
+    for (const it of items) if (!it.plane && !it.unseen && !it.clip && !it.o.ground) add(it.D, gc => drawItem(gc, it, S, cam, t));
+    for (const h of S.sources) {
+      const p = h.halo && h.strength > 0.002 && project(cam, ...h.at, S.W, H, S.yh);
+      if (p) add(p[2], gc => { gc.globalCompositeOperation = 'lighter'; glow(gc, p[0], p[1], h.halo * H / p[2], h.rgb.join(','), 0.6 * Math.min(1, h.strength) * flickerNow(h, t)); });
+    }
+    return c;
+  }
+  // (2D) draw(g) over a plane P only where it lies — g in the canvas's pixels
+  function onPlane2d(g, S, P, cam, draw) {
+    const { W, H, out } = S;
+    g.save(); g.setTransform(1, 0, 0, 1, 0, 0); g.beginPath();
+    cellsOf(cam, onPlane(P), 1, 1, W, H, S.yh, [-out.x, -out.y, out.cw - out.x, out.ch - out.y], pts => { g.moveTo(pts[0][0] + out.x, pts[0][1] + out.y); for (const q of pts) g.lineTo(q[0] + out.x, q[1] + out.y); g.closePath(); });
+    g.clip();
+    draw();
+    g.restore();
+  }
+  // (2D) a `lit` plane P: the scene's point lights lie on it as soft pools, as much as the scene is not
+  // lit — each a disc of the plane under the light as wide as its reach there, laid by three of its
+  // points (an affine likeness)
+  function pool2d(g, S, P, cam, t) {
+    const { W, H, out } = S, k = P.pool * (1 - S.lit);
+    g.globalCompositeOperation = 'lighter';
+    for (const s of S.sources) {
+      const h = s.dir ? -1 : s.at[1] - P.Y;
+      if (h < -0.03 || h >= s.reach || s.strength < 0.002) continue;
+      const r = Math.sqrt(s.reach * s.reach - h * h), C = [s.at[0], P.Y, s.at[2]];
+      const q = [C, [C[0] + r, C[1], C[2]], [C[0], C[1], C[2] + r]].map(p => project(cam, ...p, W, H, S.yh));
+      const T = q.every(Boolean) && affine3([[0, 0], [1, 0], [0, 1]], q.map(p => [p[0] + out.x, p[1] + out.y]));
+      if (!T) continue;
+      const a = k * s.strength * flickerNow(s, t) * falloff(Math.max(0, h) / s.reach), gr = g.createRadialGradient(0, 0, 0, 0, 0, 1);
+      for (const u of [0, 0.25, 0.5, 0.75, 1]) gr.addColorStop(u, `rgba(${s.rgb.join(',')},${Math.min(1, 0.35 * a * falloff(u))})`);
+      g.setTransform(...T); g.fillStyle = gr; g.fillRect(-1, -1, 2, 2);
+    }
+  }
+  // (2D) a plane lying in the scene (it.plane: planeOf): its painting (from above, in metres — the
+  // sky's units, as gl.js paints it) kept in a canvas of its own, repainted as gl.js repaints a live
+  // element (what it read moves; `redraw`), laid in perspective through the renderer's cells
+  // (cellsOf), each an affine triangle or two of it. painted: where its lights go (sources2d)
+  const PLANE_2D = 1024;
+  function plane2d(g, it, S, cam, t, painted) {
+    const { W, H, SW, out } = S, ob = it.ob, P = it.plane, w = P.w * EYE * H, d = P.d * EYE * H;
+    const o = ob.flat ||= { ...ob.from, sky: true, plane: true, _plane: P }, snap = redrawOf(o);
+    const read = ob.texRead || {}, due = !ob.tex || (o.redraw != null ? ob.texSnap !== snap : read.time || (read.state && ob.texVer !== STATE.ver && moved(read)) || (read.lights && ob.texSrc !== SOURCES.ver));
+    if (due) {
+      const k = PLANE_2D / Math.max(w, d), c = ob.tex ||= layer(w * k, d * k), pg = c.getContext('2d'), lights = [];
+      pg.setTransform(1, 0, 0, 1, 0, 0); pg.clearRect(0, 0, c.width, c.height);
+      pg.setTransform(k, 0, 0, k, w / 2 * k, d / 2 * k);
+      drawObject(pg, o, SW, H, t, lights); drawLights(pg, lights);
+      Object.assign(ob, { texLights: lights, texVer: STATE.ver, texSrc: SOURCES.ver, texSnap: snap, texRead: READS.get(o) });
+      PERF.repainted(o);
     }
+    painted.push({ o, lights: ob.texLights });
+    const c = ob.tex, tris = pts => {
+      for (let i = 1; i + 1 < pts.length; i++) {
+        const tri = [pts[0], pts[i], pts[i + 1]], T = affine3(tri.map(q => [q[2] * c.width, q[3] * c.height]), tri.map(q => [q[0], q[1]]));
+        if (!T) continue;
+        // (a little wider than the triangle: neighbours meet without a seam)
+        const cx = (tri[0][0] + tri[1][0] + tri[2][0]) / 3, cy = (tri[0][1] + tri[1][1] + tri[2][1]) / 3;
+        g.save(); g.beginPath();
+        for (const [x, y] of tri) { const l = Math.hypot(x - cx, y - cy) || 1; g.lineTo(x + (x - cx) / l * 0.7, y + (y - cy) / l * 0.7); }
+        g.clip(); g.transform(...T); g.drawImage(c, 0, 0); g.restore();
+      }
+    };
+    // (the land's cells made already this frame: standing)
+    if (ob.cells) ob.cells.forEach(tris); else cellsOf(cam, onPlane(P), ...PLANE_CELLS['2d'], W, H, S.yh, [-out.x, -out.y, out.cw - out.x, out.ch - out.y], tris);
+  }
+  // (2D) an element's painting — or, with rec, one of its parts' — made in a canvas of its own as it
+  // is seen (it.m), over the part of the canvas it covers: the item, now drawn as that canvas, or
+  // null when it covers none of it. painted: where its lights go (sources2d); recs: where its parts
+  // go (e.part)
+  function prepaint(S, ob, i, it, t, painted, recs, rec) {
+    const { SW, H, out } = S, box = objectBox(it.o, SW, H), m = it.m;
+    // (m mirrors a platformer's hero turned left)
+    const xs = [m[0] * box.bx + m[4], m[0] * (box.bx + box.bw) + m[4]], ys = [m[3] * box.by + m[5], m[3] * (box.by + box.bh) + m[5]];
+    const xa = Math.max(-out.x, Math.min(...xs)), xb = Math.min(out.cw - out.x, Math.max(...xs));
+    const ya = Math.max(-out.y, Math.min(...ys)), yb = Math.min(out.ch - out.y, Math.max(...ys));
+    const seen = xb - xa >= 1 && yb - ya >= 1, w = seen ? Math.ceil(xb - xa) : 1, h = seen ? Math.ceil(yb - ya) : 1;
+    const c = (ob.canvases ||= [])[i] ||= layer(1, 1), g = c.getContext('2d'), lights = [];
+    if (c.width !== w || c.height !== h) { c.width = w; c.height = h; } else { g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, w, h); }
+    g.setTransform(1, 0, 0, 1, -xa, -ya); g.transform(...m);
+    if (rec) { const [ax, ay, k] = anchorOf(it.o, SW, H); rec.paint(g, ax, ay, k, lights); } else drawObject(g, it.o, SW, H, t, lights, recs);
+    // (in a lit scene its glows are unlit: drawn apart, over it — standing)
+    if (!(S.lit > 0)) drawLights(g, lights);
+    painted.push({ o: it.o, lights });
+    return seen ? { ...it, canvas: c, sx: xa, sy: ya, part: !!rec, lights: S.lit > 0 ? lights : null } : null;
+  }
+  // (2D) one item drawn on g (the frame's pixels); painted: where its lights go
+  function drawItem(g, it, S, cam, t, painted) {
+    g.save();
+    g.globalAlpha = it.fade;
+    if (it.canvas) { g.drawImage(it.canvas, it.sx, it.sy); g.restore(); return; }
+    const lights = [];
+    g.transform(...it.m);
+    drawObject(g, it.o, S.SW, S.H, t, lights);
+    // (in a lit scene its glows are unlit: drawn apart, over it — standing)
+    if (S.lit > 0) it.lights = lights; else drawLights(g, lights);
+    painted?.push({ o: it.o, lights });
+    g.restore();
+  }
+  // what of an item the land in front of it leaves seen: the line it is seen above ([[x, y], …]),
+  // null — all of it, false — none of it
+  function landCut(land, it) {
+    const { m, box: b } = it, xa = m[0] * b.bx + m[4], xb = xa + m[0] * b.bw, x0 = Math.min(xa, xb), x1 = Math.max(xa, xb), y0 = m[3] * b.by + m[5], y1 = y0 + m[3] * b.bh;
+    const line = land.at(it.D, x0, x1, y1);
+    if (!line) return null;
+    return line.every(([, y]) => y <= y0) ? false : line;
   }
 
-  function drawWater(ctx, S, L, wy, t) {
+  // (src: the canvas the water mirrors — what is put down so far)
+  function drawWater(ctx, S, L, wy, t, src) {
     const { W, H, u } = S, depth = H - wy, step = Math.max(3, Math.round(u * 3));
     if (depth <= 0) return;
     const k = Math.min(1.2, wy / depth), speed = 1 + Math.abs(L.drift ?? 0) * 2;
     // copy only the band above the horizon that the reflection actually shows
     const band = Math.max(0, Math.floor(wy - depth * k - step)), sc = S.scratch.getContext('2d');
     sc.clearRect(0, band, W, wy - band);
-    sc.drawImage(ctx.canvas, S.out.x, S.out.y + band, W, wy - band, 0, band, W, wy - band);
+    sc.drawImage(src, S.out.x, S.out.y + band, W, wy - band, 0, band, W, wy - band);
     for (let y = wy; y < H; y += step) {
       const d = (y - wy) / depth;
       const dx = (Math.sin(30 * Math.log(0.03 + d) - t * 1.4 * speed) * 0.6 + Math.sin(d * 53 + t * 0.8) * 0.4) * (1 + d * 16) * u;
@@ -900,53 +1962,79 @@ const Moood = (() => {
     }
     ctx.restore();
 
+    const look = lookOf(spec);
+    S.sources = sources2d(S, spec);
+    // lit as much as the light is now (lookOf); its ambient level: how much a shadow takes away is the
+    // source's share of the light
+    S.lit = look.lit;
+    S.ambient = ambientOf(look, S.sources).reduce((a, b) => a + b) / 3;
+    const lit = lit2d(ctx, S, look, cam);
     for (const l of S.round ? [] : S.layers) {
-      const L = l.L;
+      const L = l.L, g = lit.g || ctx;
       if (l.Z - cam.z < 0.05) continue;
-      if (L.kind === 'water') { const m = view(cam, l.Z, W, H, S.yh); drawWater(ctx, S, L, Math.round(m[5] + m[3] * L.y * H), t); continue; }
-      ctx.save(); place(ctx, S, cam, l.Z);
+      lit.dirty = !!lit.g;
+      // (the water mirrors what is put down already: in a lit scene, lit)
+      if (L.kind === 'water') { lit.flush(); lit.dirty = !!lit.g; const m = view(cam, l.Z, W, H, S.yh); drawWater(g, S, L, Math.round(m[5] + m[3] * L.y * H), t, ctx.canvas); continue; }
+      g.save(); place(g, S, cam, l.Z);
       if (l.canvas) {
-        ctx.drawImage(l.canvas, l.x0, 0);
-        ctx.fillStyle = L.color; ctx.fillRect(l.x0, l.canvas.height - 1, l.canvas.width, 50 * H); // the body goes on below
+        g.drawImage(l.canvas, l.x0, 0);
+        g.fillStyle = L.color; g.fillRect(l.x0, l.canvas.height - 1, l.canvas.width, 50 * H); // the body goes on below
         if (l.windows?.length) {
           const lc = rgb('#ffd08a');
           for (const w of l.windows) {
-            if (Math.sin(t * 0.07 + w.p) > -0.85) { ctx.fillStyle = `rgba(${lc},${0.55 + 0.25 * Math.sin(w.p)})`; ctx.fillRect(w.x, w.y, w.w, w.h); }
+            if (Math.sin(t * 0.07 + w.p) > -0.85) { g.fillStyle = `rgba(${lc},${0.55 + 0.25 * Math.sin(w.p)})`; g.fillRect(w.x, w.y, w.w, w.h); }
           }
         }
       } else if (L.kind === 'clouds') {
-        for (const c of l.clouds) ctx.drawImage(c.c, wrapX(c.x + t * c.sp * (L.drift ?? 0.3) * 3, S, c.c.width), c.y - c.c.height / 2);
+        for (const c of l.clouds) g.drawImage(c.c, wrapX(c.x + t * c.sp * (L.drift ?? 0.3) * 3, S, c.c.width), c.y - c.c.height / 2);
       } else if (L.kind === 'fog') {
         const col = rgb(L.color);
         for (const b of l.blobs) {
-          ctx.save(); ctx.translate(wrapX(b.x + t * b.sp * (L.drift ?? 0.3) * 2, S, 2 * b.rx) + b.rx, L.y * H + b.dy);
-          ctx.scale(1, b.ry / b.rx); glow(ctx, 0, 0, b.rx, col, b.a * 2.2); ctx.restore();
+          g.save(); g.translate(wrapX(b.x + t * b.sp * (L.drift ?? 0.3) * 2, S, 2 * b.rx) + b.rx, L.y * H + b.dy);
+          g.scale(1, b.ry / b.rx); glow(g, 0, 0, b.rx, col, b.a * 2.2); g.restore();
         }
       }
-      ctx.restore();
+      g.restore();
     }
 
-    if (S.round) aroundFrame(ctx, S, cam, t);
-    else for (const { o, Z } of S.objects) {
-      if (o.plane) continue; // horizontal planes are drawn by the WebGL renderer only
-      const lights = [], fade = fadeNear(Z, cam);
-      if (fade <= 0) continue;
-      ctx.save(); place(ctx, S, cam, Z); ctx.globalAlpha = fade;
-      if (cam.hero && o.id === cam.hero.id) ctx.transform(...heroMatrix(cam.hero, o.x * SW, o.size * H / (o.height || 2)));
-      drawObject(ctx, o, SW, H, t, lights);
-      drawLights(ctx, lights);
+    if (S.round) skyAround(ctx, S, cam, t);
+    standing(ctx, S, cam, t, lit);
+
+    for (const { p, list } of S.particles) { stepParticles(lit.g || ctx, p, list, W, H, t, dt, u); lit.dirty = !!lit.g; }
+    lit.flush();
+    // inserts over it all, each in a layer of its own (the iris cuts it alone)
+    for (const o of S.inserts) {
+      const open = opening(o);
+      if (open < 0.002) continue;
+      const g = S.scratch.getContext('2d'), lights = [];
+      g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, W, H);
+      g.setTransform(1, 0, 0, 1, (W - SW) / 2, 0);
+      drawObject(g, o, SW, H, t, lights);
+      iris(g, o, SW, H, open, lights);
+      ctx.drawImage(S.scratch, 0, 0);
+    }
+    // the grade: tint, saturation, brightness, vignette, grain (the light now: lookOf)
+    if (look.tint && look.tintStrength) {
+      ctx.save(); ctx.globalAlpha = clamp(look.tintStrength, 0, 0.5) * 0.45;
+      ctx.fillStyle = `rgb(${look.tint.map(Math.round).join(',')})`; ctx.fillRect(0, 0, W, H); ctx.restore();
+    }
+    if (look.saturation < 1) {
+      ctx.save(); ctx.globalCompositeOperation = 'saturation'; ctx.globalAlpha = clamp(1 - look.saturation, 0, 1);
+      ctx.fillStyle = '#808080'; ctx.fillRect(0, 0, W, H); ctx.restore();
+    }
+    // (the colour times b, as WebGL: darker multiplied, brighter added to itself)
+    if (look.brightness < 1) {
+      ctx.save(); ctx.globalCompositeOperation = 'multiply';
+      ctx.fillStyle = `rgb(${Array(3).fill(Math.round(Math.max(0, look.brightness) * 255)).join(',')})`;
+      ctx.fillRect(0, 0, W, H); ctx.restore();
+    } else if (look.brightness > 1) {
+      ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalCompositeOperation = 'lighter';
+      ctx.globalAlpha = Math.min(1, look.brightness - 1); ctx.drawImage(ctx.canvas, 0, 0); // (up to twice as bright)
       ctx.restore();
     }
-
-    for (const { p, list } of S.particles) stepParticles(ctx, p, list, W, H, t, dt, u);
-    const lt = spec.light || {};
-    if (lt.tint && lt.tintStrength) {
-      ctx.save(); ctx.globalAlpha = clamp(lt.tintStrength, 0, 0.5) * 0.45;
-      ctx.fillStyle = lt.tint; ctx.fillRect(0, 0, W, H); ctx.restore();
-    }
-    ctx.drawImage(S.vignette, 0, 0);
-    if ((lt.grain ?? 0.5) > 0) {
-      ctx.save(); ctx.globalAlpha = clamp(lt.grain ?? 0.5, 0, 1);
+    ctx.save(); ctx.globalAlpha = clamp(look.vignette, 0, 1); ctx.drawImage(S.vignette, 0, 0); ctx.restore();
+    if (look.grain > 0) {
+      ctx.save(); ctx.globalAlpha = clamp(look.grain, 0, 1);
       ctx.translate(Math.random() * 160, Math.random() * 160); ctx.fillStyle = S.grain; ctx.fillRect(-160, -160, W + 320, H + 320); ctx.restore();
     }
     // out of the frame the scene dims toward the canvas's edges (with Canvas 2D, what nothing
@@ -960,6 +2048,28 @@ const Moood = (() => {
     }
   }
 
+  // A frame unseen (stage.draw(false)): the scene goes on as if it were drawn — what moves through
+  // the world is put where it is now, the painting code of what has a memory of its own (a module's
+  // springs and steps, the point it marks) runs as for a frame, particles move — and nothing is
+  // drawn. Custom elements are painted at a fraction of their size, to a canvas nobody sees.
+  // (A drawn frame paints so what is out of sight: unseen2d.)
+  const UNSEEN = 0.05;
+  function unseen2d(S, o, t) {
+    if (o.kind && o.kind !== 'custom') return;
+    const g = S.unseen.getContext('2d');
+    g.setTransform(UNSEEN, 0, 0, UNSEEN, 0, 0);
+    paintCustom(g, o, S.SW, S.H, t, []);
+  }
+  function tick(S, t, dt) {
+    const { W, H, u } = S;
+    S.move();
+    for (const o of [...S.objects.map(ob => ob.o), ...S.inserts.filter(o => opening(o) >= 0.002)]) unseen2d(S, o, t);
+    for (const { p, list } of S.particles) {
+      const wind = (p.wind ?? 0) * 60 * u;
+      for (const q of list) moveParticle(p.kind, q, W, H, t, dt, u, wind);
+    }
+  }
+
   // Mounts the engine on a canvas: returns { show(spec), resetCamera() }.
   // Camera: drag = step sideways / turn the head up-down, wheel / pinch = walk toward the cursor,
   // keys: A D ← → = sideways, W S ↑ ↓ = forward-back, 0 = back to the start.
@@ -971,12 +2081,16 @@ const Moood = (() => {
     const grain = ctx.createPattern(grainTile, 'repeat');
     return {
       name: '2d', fpsIdle: 20, pixelBudget: 1.3e6, resMax: 1.5,
-      build(spec, W, H, prev, out) { const S = build(spec, W, H); S.grain = grain; S.out = out; return S; },
+      build(spec, W, H, prev, out) { const S = build(spec, W, H); S.grain = grain; S.out = out; S.unseen = layer(8, 8); return S; },
       frame(S, spec, cam, t, dt) { frame(ctx, S, spec, cam, t, dt); },
+      // painted as when drawn: Canvas 2D paints every element each frame — that is drawing it
+      tick(S, spec, cam, t, dt, goal, painted) { if (painted) frame(ctx, S, spec, cam, t, dt); else tick(S, t, dt); },
     };
   }
 
-  function mount(canvas) {
+  // opts.check: the scene checked as it is drawn (CHECK — ?debug does it too)
+  function mount(canvas, opts = {}) {
+    CHECK.on = !!opts.check || /[?&]debug\b/.test(location.search);
     // a canvas gets one context type for life: WebGL2 when available, else 2D
     // (?2d in the URL forces the 2D renderer, for comparison)
     const R = (typeof MooodGL !== 'undefined' && !/[?&]2d\b/.test(location.search) && MooodGL.create(canvas)) || canvas2DRenderer(canvas);
@@ -1055,6 +2169,9 @@ const Moood = (() => {
     // the pointer moves, and kept till the gesture ends; it stays under the cursor all the way —
     // the gaze lifting or lowering with it — and the walk stops where it about fills the frame
     // (something high up: where it still shows with the gaze lifted as far as it goes).
+    // What the viewer points at is seen from the camera as shown — the film's camera on top of the
+    // viewer's own (off: how far the film moves it); the viewer's moves change their own.
+    const off = { x: 0, y: 0, z: 0, h: 0, yaw: 0 }, seenCam = () => ({ x: target.x + off.x, y: target.y + off.y, z: target.z + off.z, h: target.h + off.h, yaw: target.yaw + off.yaw });
     let aim = null, aimAt = 0;
     // is the element truly painted at the cursor: nearly opaque paint on a tenth of the 9×9
     // pixels around it (the thin spokes of a wheel count; a veil, a glow, empty air don't)?
@@ -1070,35 +2187,35 @@ const Moood = (() => {
       return n >= 8;
     };
     const pick = (clientX, clientY) => {
-      const [cx, cy] = local(clientX, clientY), Hc = box.h, Wc = box.w, yh = S?.yh ?? 0.6, dz = spec ? depths(spec) : null;
-      const at = D => ({ Z: target.z + D, x: target.x + (cx - Wc / 2) / Hc * D });
-      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => dz.now(o))
-        .filter(({ Z }) => fadeNear(Z, target) > 0).sort((a, b) => a.Z - b.Z);
+      const [cx, cy] = local(clientX, clientY), Hc = box.h, Wc = box.w, yh = S?.yh ?? 0.6, dz = spec ? depths(spec) : null, v = seenCam();
+      const at = D => ({ Z: v.z + D, x: v.x + (cx - Wc / 2) / Hc * D });
+      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane && !o.insert && !o.unseen).map(o => dz.now(o))
+        .filter(({ Z }) => nearFade(Z - v.z) > 0).sort((a, b) => a.Z - b.Z);
       for (const { o, Z } of near) {
-        const m = view(target, Z, Wc, Hc, yh), b = objectBox(o, STAGE * Hc, Hc);
+        const m = view(v, Z, Wc, Hc, yh), b = objectBox(o, STAGE * Hc, Hc);
         const x0 = m[0] * b.bx + m[4], y0 = m[3] * b.by + m[5];
         if (cx < x0 || cx > x0 + m[0] * b.bw || cy < y0 || cy > y0 + m[3] * b.bh) continue;
         if (!seenAt(o, m, cx, cy, Hc)) continue;
         // the point under the cursor, Y eye heights up; stop where the thing about fills the
         // frame, or — high up — where the point still shows with the gaze lifted as far as it goes
-        const D = Z - target.z, Y = target.h - (cy / Hc - yh + target.y) * D, up = (lim.setup?.look ?? 0) + LOOK_UP;
-        const sight = Y > target.h ? (Y - target.h) / Math.max(0.05, yh - cy / Hc - up) : 0;
+        const D = Z - v.z, Y = v.h - (cy / Hc - yh + v.y) * D, up = (lim.setup?.look ?? 0) + LOOK_UP;
+        const sight = Y > v.h ? (Y - v.h) / Math.max(0.05, yh - cy / Hc - up) : 0;
         return { ...at(D), Y, cy: cy / Hc, stop: Math.max(1.1, 1.15 * o.size * Z, sight) };
       }
-      const below = cy - (yh - target.y) * Hc;
-      return { ...at(below > 0.02 * Hc ? clamp(Hc * target.h / below, 0.8, 100) : 6), stop: 1.2 };
+      const below = cy - (yh - v.y) * Hc;
+      return { ...at(below > 0.02 * Hc ? clamp(Hc * v.h / below, 0.8, 100) : 6), stop: 1.2 };
     };
     const walkToward = (factor, clientX, clientY) => {
       const now = performance.now();
       if (!aim || now - aimAt > 400 || Math.hypot(clientX - aim.px, clientY - aim.py) > 6) aim = { ...pick(clientX, clientY), px: clientX, py: clientY };
       aimAt = now;
-      const d0 = aim.Z - target.z;
+      const v = seenCam(), d0 = aim.Z - v.z;
       if (d0 <= 0.05) return;
       // each notch covers a share of the way left (the approach slows by itself), up to the stop
       const d = factor > 1 ? Math.max(Math.min(d0, aim.stop), d0 / factor) : d0 / factor;
-      target.z = aim.Z - d;
-      target.x = aim.x - (aim.x - target.x) * d / d0;
-      if (aim.Y !== undefined) target.y = (S?.yh ?? 0.6) - aim.cy + (target.h - aim.Y) / Math.max(0.05, d);
+      target.z = aim.Z - d - off.z;
+      target.x = aim.x - (aim.x - v.x) * d / d0 - off.x;
+      if (aim.Y !== undefined) target.y = (S?.yh ?? 0.6) - aim.cy + (v.h - aim.Y) / Math.max(0.05, d) - off.y;
       // what you walked up to may lie past where walking goes: you may stand there
       lim.reach = target.z > lim.zMax ? Math.max(lim.reach ?? 0, target.z) : undefined;
       limitCam(target, lim);
@@ -1113,8 +2230,8 @@ const Moood = (() => {
     const grabAt = (clientX, clientY) => {
       // looking around, a drag turns the head: what you took hold of follows the finger
       if (round()) { const [cx, cy] = local(clientX, clientY); grab = { round: true, cx, cy, yaw: target.yaw, look: target.y }; return; }
-      const [cx, cy] = local(clientX, clientY), D = clamp(pick(clientX, clientY).Z - target.z, 0.4, 60);
-      grab = { x: target.x + (cx - box.w / 2) / box.h * D, D, cy, look: target.y };
+      const [cx, cy] = local(clientX, clientY), v = seenCam(), D = clamp(pick(clientX, clientY).Z - v.z, 0.4, 60);
+      grab = { x: v.x + (cx - box.w / 2) / box.h * D, D, cy, look: target.y };
     };
     const dragTo = (clientX, clientY) => {
       const [cx, cy] = local(clientX, clientY), x0 = target.x, y0 = target.y, now = performance.now();
@@ -1129,7 +2246,7 @@ const Moood = (() => {
         lastMove = now;
         return;
       }
-      target.x = grab.x - (cx - box.w / 2) / box.h * grab.D;
+      target.x = grab.x - (cx - box.w / 2) / box.h * grab.D - off.x;
       target.y = grab.look - (cy - grab.cy) / box.h;
       limitCam(target, lim);
       const dt = Math.max(8, now - lastMove) / 1000, k = Math.min(1, dt * 20);
@@ -1138,37 +2255,51 @@ const Moood = (() => {
       glide.vy += ((target.y - y0) / dt - glide.vy) * k;
       lastMove = now;
     };
-    // where in the canvas (CSS px) an element is from camera c — where its `place` has it now: the
-    // point its code marks (e.at), else its anchor (its top, with over) — lifted by `lift` metres:
+    // A point of an element, by `ref`: its id — the point its code marks (e.at), else its anchor — or
+    // 'id#name', a point its painting names (e.at(x, y, name)). → { o: the element, n: it where it is
+    // now (depths().now — or the part the point is in, depths().part), f: the point in metres from
+    // n's anchor as painted, or null (its anchor), named }, or null: no such element, or its painting
+    // marks no such point now
+    function pointOf(ref, dz) {
+      const [id, name] = String(ref).split('#'), o = byId.get(id);
+      if (!o) return null;
+      const f = name !== undefined ? NAMED.get(id)?.get(name) : FOCUS.get(id);
+      if (name !== undefined && !f) return null;
+      const n = f?.part ? dz.part(o, f.part.dx, f.part.dz) : dz.now(o);
+      return { o, n, f: f || null, named: name !== undefined };
+    }
+    // where in the canvas (CSS px) an element's point (pointOf) is from camera c — where its `place`
+    // has it now — its anchor's top (with over) when its code marks none — lifted by `lift` metres:
     // [x, y, its distance]; null when out of sight
-    function seenFrom(c, id, lift = 0, over = false) {
-      const o = (spec?.objects || []).find(o => o.id === id);
-      if (!o || o.sky) return null;
-      const W = box.w, H = box.h, dz = depths(spec), yh = dz.yh;
+    function seenFrom(c, ref, lift = 0, over = false) {
+      if (!spec) return null;
+      const dz = depths(spec), P = pointOf(ref, dz);
+      if (!P || P.o.sky || P.o.insert) return null;
+      const { o, n, f } = P, W = box.w, H = box.h, yh = dz.yh;
       if (o.plane) {
-        const p = dz.objectAt(o), Z = p.Zp, up = lift / EYE;
+        const p = dz.objectAt(o), Z = p.Zp, up = lift / EYE + (o.drape ? groundAt(p.X * EYE, p.Z * EYE) / EYE : 0);
         if (round()) {
           const q = project(c, p.X, p.Y + up, p.Z, W, H, yh);
           return q && q[2] > 0.3 ? [box.x + q[0], box.y + q[1], q[2]] : null;
         }
-        if (fadeNear(Z, c) < 0.3) return null;
+        if (Z - c.z <= 0.05) return null; // (behind the eye)
         const m = view(c, Z, W, H, yh), px = dz.objectX(o) * STAGE * H, py = (yh + (1 - (o.elevation || 0) / EYE) / Z - up / Z) * H;
         return [box.x + m[0] * px + m[4], box.y + m[3] * py + m[5], Z - c.z];
       }
-      const at = placeOf(o, c, W, H, dz, round());
-      // behind the eye, or faded out as it is passed (fadeNear)
-      if (!at || at.D < 0.48) return null;
-      const n = dz.now(o), [ax, ay, ppm] = anchorOf(n.o, STAGE * H, H), f = FOCUS.get(id) || { x: 0, y: 0 };
-      if (over && !FOCUS.has(id)) lift += o.height ?? EYE;
-      let px = ax + f.x * ppm, py = ay + f.y * ppm - lift / EYE * H / n.at.Zp;
-      if (c.hero && id === c.hero.id) { const hm = heroMatrix(c.hero, ax, ppm); px = hm[0] * px + hm[4]; py += hm[5]; }
+      const at = seenOf(c, n, W, H, yh, round());
+      // behind the eye, or faded out as it is passed (nearFade)
+      if (!at || nearFade(at.D) < 0.3) return null;
+      const [ax, ay, ppm] = anchorOf(n.o, STAGE * H, H);
+      if (over && !f) lift += o.height ?? EYE;
+      let px = ax + (f ? f.x : 0) * ppm, py = ay + (f ? f.y : 0) * ppm - lift / EYE * H / n.at.Zp;
+      if (c.hero && o.id === c.hero.id && !f?.part) { const hm = heroMatrix(c.hero, ax, ppm); px = hm[0] * px + hm[4]; py += hm[5]; }
       return [box.x + at.m[0] * px + at.m[4], box.y + at.m[3] * py + at.m[5], at.D];
     }
     // the camera keeps the elements it follows in the visible part of the screen: together when
     // they fit, else the first of them
     function keepInView() {
       const ids = lim.setup?.follow;
-      if (!ids?.length || pointers.size || keys.size || glide) return;
+      if (!ids?.length || pointers.size || keys.size || glide || op.pose) return;
       const [vl, vr] = lim.view, L = box.x + (vl + 0.1) * box.w, R = box.x + (vr - 0.1) * box.w;
       const pts = ids.map(id => seenFrom(target, id)).filter(Boolean);
       if (!pts.length) return;
@@ -1177,6 +2308,136 @@ const Moood = (() => {
       const aim = hi - lo <= R - L ? (lo + hi) / 2 : pts[0][0];
       target.x += (aim - (L + R) / 2) * pts[0][2] / box.h;
     }
+    // What is where in the frame now, seen from camera c — for whoever looks closely (?debug, a
+    // render's --json). By element (its id, else its name, else its kind and place in the spec):
+    // { kind, seen, box: [x, y, w, h] — where its painting may reach, in the canvas's CSS px; at — the
+    // point its code marks (e.at), anchor — where it stands, [x, y]; distance (m); fade — 1, less in
+    // the last steps before the eye (nearFade); points — those its code names (e.at(x, y, name)): {name: [x, y]};
+    // parts — those it paints (e.part): [{dx, dz, box, seen, distance}]; notes — what its code wrote
+    // (e.debug): {value, at?}; paint — its last painting: {ms, repaint: 'frame' (it reads the time),
+    // 'state' (the state or the light on it) or 'once'} }
+    function layout(c) {
+      const out = {};
+      if (!spec || !dzOf) return out;
+      const W = box.w, H = box.h, SW = STAGE * H, yh = dzOf.yh;
+      const r1 = v => Math.round(v * 10) / 10, pt = (x, y) => [r1(box.x + x), r1(box.y + y)];
+      const rect = (x0, y0, x1, y1) => [r1(box.x + Math.min(x0, x1)), r1(box.y + Math.min(y0, y1)), r1(Math.abs(x1 - x0)), r1(Math.abs(y1 - y0))];
+      const inFrame = ([x, y, w, h]) => x < box.x + W && x + w > box.x && y < box.y + H && y + h > box.y;
+      (spec.objects || []).forEach((o, i) => {
+        const key = keyOf(o), el = { kind: o.sky ? 'sky' : o.ground ? 'ground' : o.plane ? 'plane' : o.insert ? 'insert' : o.kind || 'custom' };
+        let place = null; // a point its code names (its units, from its anchor) → [x, y] on the canvas
+        if (o.sky || o.insert) { el.box = rect(0, 0, W, H); el.seen = !!o.sky || opening(o) >= 0.002; }
+        else if (o.ground) {
+          const m = view(c, Z_FAR, W, H, yh), y = m[5] + m[3] * yh * H;
+          el.box = rect(0, y, W, H); el.seen = y < H;
+        } else if (o.plane) {
+          const p = dzOf.objectAt(o), w = (o.width || 4) / EYE / 2, d = (o.depth || 4) / EYE / 2, a = (o.rotation || 0) * Math.PI / 180;
+          const q = [[-w, -d], [w, -d], [w, d], [-w, d]].map(([u, v]) => project(c, p.X + u * Math.cos(a) + v * Math.sin(a), (o.elevation || 0) / EYE, p.Z - v * Math.cos(a) + u * Math.sin(a), W, H, yh)).filter(Boolean);
+          if (q.length) { const xs = q.map(v => v[0]), ys = q.map(v => v[1]); el.box = rect(Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)); }
+          el.seen = !!el.box && inFrame(el.box);
+        } else {
+          // where something standing (the element, or one of its parts: a now() of it) is in the frame:
+          // its box, anchor, distance, fade, and onFrame — its painting's point → the canvas
+          const stand = (n, hero) => {
+            const at = seenOf(c, n, W, H, yh, round());
+            if (!at) return null;
+            const [ax, ay, ppm] = anchorOf(n.o, SW, H), b = objectBox(n.o, SW, H), m = at.m;
+            const hm = hero ? heroMatrix(c.hero, ax, ppm) : null;
+            const onFrame = (x, y) => { if (hm) { x = hm[0] * x + hm[4]; y += hm[5]; } return [m[0] * x + m[4], m[3] * y + m[5]]; };
+            const p0 = onFrame(b.bx, b.by), p1 = onFrame(b.bx + b.bw, b.by + b.bh), box_ = rect(p0[0], p0[1], p1[0], p1[1]);
+            const fade = Math.round(nearFade(at.D) * 100) / 100;
+            return { box: box_, fade, seen: fade > 0 && inFrame(box_), anchor: pt(...onFrame(ax, ay)), distance: r1(at.D * EYE), on: (x, y) => pt(...onFrame(ax + x * ppm, ay + y * ppm)) };
+          };
+          const own = stand(dzOf.now(o), c.hero && o.id === c.hero.id);
+          if (!own) el.seen = false;
+          else {
+            const { on, ...rest } = own;
+            Object.assign(el, rest);
+            place = on;
+            // its points: the one its code marks (e.at), and those it names (e.at(x, y, name)) — each
+            // where it was painted, in the element or in one of its parts
+            const where = f => (f.part ? stand(dzOf.part(o, f.part.dx, f.part.dz), false)?.on(f.x, f.y) ?? null : on(f.x, f.y));
+            const f = FOCUS.get(o.id), named = NAMED.get(o.id);
+            if (f) el.at = where(f);
+            if (named?.size) el.points = Object.fromEntries([...named].map(([nm, p]) => [nm, where(p)]));
+            // its parts (e.part), each standing at its own depth
+            const parts = PARTS.get(key);
+            if (parts?.length) el.parts = parts.map(q => { const s_ = stand(dzOf.part(o, q.dx, q.dz, q.box), false); return s_ ? { dx: q.dx, dz: q.dz, box: s_.box, seen: s_.seen, distance: s_.distance } : { dx: q.dx, dz: q.dz, seen: false }; });
+          }
+        }
+        const notes = NOTES.get(key), last = PERF.last.get(key), ms = last?.ms, read = last?.read;
+        if (notes) el.notes = notes.map(nt => (nt.at && place ? { value: nt.value, at: place(nt.at.x, nt.at.y) } : { value: nt.value }));
+        if (ms != null) el.paint = { ms: Math.round(ms * 100) / 100, repaint: read?.time || o.frames > 1 ? 'frame' : read?.state || read?.lights ? 'state' : 'once', ...(read?.keys.size ? { keys: [...read.keys.keys()].map(k => (k === ALL ? '*' : k)) } : {}), ...(PERF.repaints.has(key) ? { repaints: PERF.repaints.get(key) } : {}) };
+        out[key ?? `${el.kind}#${i}`] = el;
+      });
+      return out;
+    }
+    // ?debug: over the frame, what is where — each element seen: its box and id, its anchor (a ring),
+    // the point its code marks (a cross), what its code wrote (e.debug); the scene's second, and
+    // what it does wrong (window.__mooodErrors, then __mooodWarnings: e.warn's too) (?debug=keeper,boy: only those)
+    const looking = /[?&]debug\b/.test(location.search) ? overlay(new URLSearchParams(location.search).get('debug')) : null;
+    function overlay(only) {
+      const ids = only ? new Set(only.split(',')) : null;
+      const c = document.createElement('canvas'), g = c.getContext('2d');
+      c.style.cssText = 'position:fixed;pointer-events:none;z-index:8';
+      document.body.append(c);
+      const say = v => (typeof v === 'string' ? v : JSON.stringify(v, (k, x) => (typeof x === 'number' ? Math.round(x * 100) / 100 : x)) ?? String(v)).replace(/"/g, '');
+      const hue = k => hash(k) % 360;
+      return {
+        draw(cam, t) {
+          const r = canvas.getBoundingClientRect(), dpr = window.devicePixelRatio || 1, cw = Math.max(1, canvas.clientWidth), ch = Math.max(1, canvas.clientHeight);
+          Object.assign(c.style, { left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px` });
+          if (c.width !== Math.round(cw * dpr) || c.height !== Math.round(ch * dpr)) { c.width = Math.round(cw * dpr); c.height = Math.round(ch * dpr); }
+          g.setTransform(dpr, 0, 0, dpr, 0, 0);
+          g.clearRect(0, 0, cw, ch);
+          g.font = '12px ui-monospace, Consolas, monospace'; g.textBaseline = 'top'; g.lineWidth = 1;
+          const label = (text, x, y, col) => {
+            const w = g.measureText(text).width + 6;
+            g.fillStyle = 'rgba(0,0,0,0.6)'; g.fillRect(x, y, w, 15);
+            g.fillStyle = col; g.fillText(text, x + 3, y + 1.5);
+          };
+          for (const [id, el] of Object.entries(layout(cam))) {
+            if (!el.seen || el.kind === 'sky' || el.kind === 'ground' || !el.box || (ids && !ids.has(id))) continue;
+            const col = `hsl(${hue(id)},85%,70%)`, [x, y, w, h] = el.box;
+            // what spans most of the frame (a wall, a floor) is drawn faintly, so the rest reads
+            g.globalAlpha = w * h > 0.5 * box.w * box.h ? 0.4 : 1;
+            g.strokeStyle = col; g.setLineDash(el.kind === 'insert' || el.kind === 'plane' ? [4, 4] : []);
+            g.strokeRect(x + 0.5, y + 0.5, w, h); g.setLineDash([]);
+            if (el.anchor) { g.beginPath(); g.arc(...el.anchor, 4, 0, 7); g.stroke(); }
+            if (el.at) { const [ax, ay] = el.at; g.beginPath(); g.moveTo(ax - 7, ay); g.lineTo(ax + 7, ay); g.moveTo(ax, ay - 7); g.lineTo(ax, ay + 7); g.stroke(); }
+            // its named points (a diamond and the name), its parts (dashed, each where it stands)
+            for (const [nm, q] of Object.entries(el.points || {})) {
+              if (!q) continue;
+              const [qx, qy] = q; g.beginPath(); g.moveTo(qx, qy - 5); g.lineTo(qx + 5, qy); g.lineTo(qx, qy + 5); g.lineTo(qx - 5, qy); g.closePath(); g.stroke();
+              label(`#${nm}`, qx + 7, qy - 7, col);
+            }
+            g.setLineDash([2, 3]);
+            for (const q of el.parts || []) if (q.seen) g.strokeRect(q.box[0] + 0.5, q.box[1] + 0.5, q.box[2], q.box[3]);
+            g.setLineDash([]);
+            const lx = Math.max(box.x, Math.min(x, box.x + box.w - 160)), ly = Math.max(box.y, y);
+            label(`${id}${el.paint?.ms >= 0.1 ? ` · ${el.paint.ms.toFixed(1)} ms` : ''}`, lx, ly, col);
+            (el.notes || []).forEach((nt, i) => {
+              const text = say(nt.value).slice(0, 90);
+              if (nt.at) { const [px, py] = nt.at; g.fillStyle = col; g.fillRect(px - 2, py - 2, 4, 4); label(text, px + 5, py - 7, col); }
+              else label(text, lx, ly + 16 * (i + 1), col);
+            });
+            g.globalAlpha = 1;
+          }
+          // what the scene does wrong (its errors, what its modules said they do not know), the latest
+          const wrong = [...(window.__mooodErrors || []), ...(window.__mooodWarnings || [])];
+          if (wrong.length > 6) label(`… ${wrong.length - 6} more (window.__mooodErrors, __mooodWarnings)`, box.x + 8, box.y + 8, '#ffb4a0');
+          wrong.slice(-6).forEach((m, i) => label(m.slice(0, 200), box.x + 8, box.y + 8 + 16 * (i + (wrong.length > 6)), '#ffb4a0'));
+          const target = STATE.values.camera_target;
+          label(`${t.toFixed(2)} s${target != null ? ` · camera_target ${target}` : ''}`, box.x + 8, box.y + box.h - 23, '#fff');
+        },
+      };
+    }
+    // false: the scene goes on unseen — each frame steps it (R.tick), nothing is drawn, live elements
+    // painted coarsely (a render seeking a late moment draws only the frames it takes); 'painted' —
+    // unseen, each painted as a drawn frame paints it (the last seconds before a frame taken: what
+    // keeps a memory goes on exactly as when drawn); drawn again, the next frame is drawn whatever
+    // the frame rate (owed)
+    let drawn = true, owed = false;
     const reset = () => { Object.assign(target, { x: 0, y: lim.setup?.look ?? 0, z: 0, h: lim.setup?.h ?? 1, yaw: 0 }); };
     const round = () => !!lim.setup?.round, roam = () => lim.setup?.mode === 'roam';
     const platform = () => lim.setup?.mode === 'platform';
@@ -1257,13 +2518,156 @@ const Moood = (() => {
     // phone's tilt): near things shift against far ones, the depth is felt standing still too.
     // `shown` is the camera as drawn: where you are, plus the lean (eased, LEAN eye heights).
     const LEAN = 0.047, leaned = { x: 0, y: 0 }, shown = { ...cam };
-    // A film moves the camera from its script, through the state: camera_x (metres to the right),
-    // camera_h (metres up), camera_z (metres ahead — a dolly in, with all the depth it has),
-    // camera_look (screen heights the gaze is lowered); added to wherever the viewer has it.
+    // ── the film's camera ────────────────────────────────────────────────
+    // A film moves the camera through the state. camera_target — an element to look at: an operator
+    // frames it (camera_shot: how big — wide, full, medium, close, or how many times the frame's
+    // height it is tall; camera_frame: where in the frame its point goes, [x, y] fractions of the
+    // frame, or x alone — its point is the one its code marks, e.at, else its box's middle) and keeps
+    // it there as it moves, leaving it room ahead the way it goes — with a cameraman's weight: setting
+    // off and settling gently, over camera_glide seconds (from one target to the next too, and back to
+    // the scene's own camera when the target is gone; 0 — there at once). Standing ahead the operator
+    // dollies and slides; looking around (around, roam) it turns toward the target and comes as near
+    // as the shot needs.
+    // On top of that: camera_x (metres to the right), camera_z (metres ahead — a dolly in, with all
+    // the depth the scene has), camera_look (screen heights the gaze is lowered), camera_h (metres up
+    // — the operator still keeps the target framed); and on top of all, wherever the viewer moved from
+    // the start. A cut (scene.cut) puts the operator where it is meant to be at once.
     const num = k => (typeof STATE.values[k] === 'number' ? STATE.values[k] : 0);
-    function directed(c) {
+    const SHOTS = { wide: 0.3, full: 0.8, medium: 1.6, close: 3.5 }, GLIDE = 1.5, AXES = ['x', 'y', 'z', 'h', 'yaw'];
+    // where a head goes down the frame for a shot: the whole figure in the middle while it fits, then
+    // a head with room above it, the eyes near the upper third close up
+    const HEAD = [[0, 0.5], [0.8, 0.18], [1.6, 0.3], [3.5, 0.38]];
+    const headAt = shot => { const i = HEAD.findIndex(([k]) => k > shot); if (i < 0) return HEAD.at(-1)[1]; const [a, u] = HEAD[i - 1], [b, v] = HEAD[i]; return u + (v - u) * (shot - a) / (b - a); };
+    // the operator: its pose (as the scene's start pose is — the viewer's moves go on top), how fast
+    // it moves, the target's point a frame ago and how fast that moves; null pose: the scene's own camera
+    let op = { pose: null, vel: null, cut: null, fresh: false, id: null, at: null, v: { X: 0, Y: 0, Z: 0 } };
+    let byId = new Map(), dzOf = null;
+    const glideOf = () => { const g = STATE.values.camera_glide; return typeof g === 'number' && g >= 0 ? g : GLIDE; };
+    const startPose = () => ({ x: 0, y: lim.setup?.look ?? 0, z: 0, h: lim.setup?.h ?? 1, yaw: 0 });
+    // the target's point in the world (eye heights) and how tall it is (metres), or null
+    // (id, or 'id#name' — a point its painting names: aimed at, the shot measured by the element)
+    function targetOf(ref) {
+      const o = byId.get(ref.split('#')[0]);
+      if (!o) { warn(`camera_target: there is no element "${ref}"`); return null; }
+      if (o.sky || o.ground || o.plane || o.insert) { warn(`camera_target: "${ref}" is not something standing in the scene`); return null; }
+      const custom = o.kind === 'custom' || !o.kind, tall = custom ? o.height || 2 : HEIGHT[o.kind] || 2, P = custom ? pointOf(ref, dzOf) : null;
+      if (ref.includes('#') && !P) return null; // a point it doesn't mark now: the camera stays as it is
+      let f = P?.f;
+      const at = P ? P.n.at : dzOf.now(o).at;
+      if (!f) {
+        const b = custom && Array.isArray(o.box) && o.box.length === 4 ? o.box : [0, -tall, 0, 0];
+        f = { x: (b[0] + b[2]) / 2, y: (b[1] + b[3]) / 2 };
+      }
+      return { X: at.X + f.x / EYE, Y: at.Y - f.y / EYE, Z: at.Z, tall, marked: !!P?.f, known: !custom || READS.has(o) };
+    }
+    const shotOf = v => {
+      if (v == null) return SHOTS.full;
+      if (typeof v === 'number' && v > 0) return v;
+      if (SHOTS[v]) return SHOTS[v];
+      warn(`camera_shot: ${JSON.stringify(v)} — one of ${Object.keys(SHOTS).join(', ')}, or how many times the frame's height the target is tall`);
+      return SHOTS.full;
+    };
+    const frameOf = v => {
+      if (v == null) return [null, null];
+      if (typeof v === 'number') return [v, null];
+      if (Array.isArray(v) && v.length === 2 && v.every(k => typeof k === 'number')) return v;
+      warn(`camera_frame: ${JSON.stringify(v)} — [x, y] (fractions of the frame) or x`);
+      return [null, null];
+    };
+    // where the operator would stand for target `id` now: { pose — like the start pose, lead — how far
+    // ahead it aims and how fast the target goes }; c: the camera as the viewer has it (its height and
+    // where it stands count)
+    function framing(id, c, dt) {
+      const P = targetOf(id);
+      if (!P) return null;
+      // how fast its point moves (smoothed): the operator aims where it is going, not where it was
+      if (op.at && dt > 0) {
+        const k = 1 - Math.exp(-dt / 0.3);
+        for (const a of ['X', 'Y', 'Z']) op.v[a] += ((P[a] - op.at[a]) / dt - op.v[a]) * k;
+      }
+      op.at = P;
+      const w = 5 / Math.max(0.1, glideOf()), ahead = 2 / w, s = lim.setup;
+      const X = P.X + op.v.X * ahead, Z = P.Z + op.v.Z * ahead, shot = shotOf(STATE.values.camera_shot);
+      // (never so near that the target itself fades as a passed thing does: nearFade)
+      const D = Math.max(PASS_TO, P.tall / EYE / shot), A = box.w / box.h, yh = S?.yh ?? 0.6;
+      op.D = D;
+      const b = startPose(), yaw = s?.round ? Math.atan2(X - c.x, Z - c.z) : 0;
+      // room ahead: a tenth of the frame at a walk across it
+      const across = op.v.X * Math.cos(yaw) - op.v.Z * Math.sin(yaw);
+      let [fx, fy] = frameOf(STATE.values.camera_frame);
+      fx ??= 0.5 - 0.1 * clamp(across * EYE / 1.4, -1, 1);
+      fy ??= P.marked ? headAt(shot) : 0.5;
+      // closer than full height the camera comes down (or up) to the point's own height, as an
+      // operator does: a close-up is level with the face, not looked at from far below with a shifted lens
+      const ph = b.h + (P.Y - b.h) * clamp((shot - SHOTS.full) / (SHOTS.medium - SHOTS.full), 0, 1);
+      const h = c.h + ph - b.h + num('camera_h') / EYE, off = Math.atan((fx - 0.5) * A);
+      // (aimed ahead by `lead`: where an operator following it all along would be is that much behind)
+      const lead = { x: op.v.X * ahead, z: op.v.Z * ahead, vx: op.v.X, vz: op.v.Z };
+      if (s?.round) {
+        const d = Math.hypot(X - c.x, Z - c.z) || 1;
+        return { pose: { x: X - D * (X - c.x) / d, z: Z - D * (Z - c.z) / d, y: yh + (h - P.Y) / (D * Math.cos(off)) - fy, h: ph, yaw: yaw - off }, lead, known: P.known };
+      }
+      return { pose: { x: X - (fx - 0.5) * A * D, z: Z - D, y: yh + (h - P.Y) / D - fy, h: ph, yaw: 0 }, lead, known: P.known };
+    }
+    // the operator's step: c — the camera as the viewer has it — becomes the film's camera
+    function directed(c, dt) {
+      const id = STATE.values.camera_target, s = lim.setup, b = startPose();
+      op.D = null; // (framing: the shot's distance, while a target is framed)
+      if (op.cut !== STATE.cut) { op.cut = STATE.cut; op.fresh = true; op.at = null; op.v = { X: 0, Y: 0, Z: 0 }; }
+      if (id !== op.id) { op.id = id; op.at = null; op.v = { X: 0, Y: 0, Z: 0 }; }
+      // (not while a scene is on its way: the state may be the next one's already)
+      const aim = id != null && S && !waiting && s?.mode !== 'platform' ? framing(String(id), c, dt) : null;
+      // without a target: the scene's own camera (looking around, where the viewer stands)
+      const own = { ...b, ...(s?.round ? { x: c.x, z: c.z } : {}) }, goal = aim ? aim.pose : own;
+      if (aim || op.pose) {
+        // just after a cut, there at once (until the target has been painted: its painting marks its
+        // point as it is painted); else from where the camera is, along a critically damped spring (exact for
+        // any step): it sets off and settles without overshoot
+        const snap = op.fresh || glideOf() < 0.01;
+        if (snap || !op.pose) {
+          op.pose = { ...(snap ? goal : own) }; op.vel = { x: 0, y: 0, z: 0, h: 0, yaw: 0 };
+          // at a moving target: as if following it all along — on it, moving with it
+          if (snap && aim) { op.pose.x -= aim.lead.x; op.pose.z -= aim.lead.z; op.vel.x = aim.lead.vx; op.vel.z = aim.lead.vz; }
+        }
+        if (!snap) {
+          const w = 5 / glideOf(), e = Math.exp(-w * dt);
+          if (s?.round) goal.yaw = op.pose.yaw + ((((goal.yaw - op.pose.yaw) % TAU) + 3 * Math.PI) % TAU - Math.PI);
+          for (const a of AXES) {
+            const d = op.pose[a] - goal[a], k = (op.vel[a] + w * d) * dt;
+            op.vel[a] = (op.vel[a] - w * k) * e;
+            op.pose[a] = goal[a] + (d + k) * e;
+          }
+        }
+        const p = op.pose;
+        // settled back on the scene's own camera: the operator steps away
+        if (!aim && AXES.every(a => Math.abs(p[a] - goal[a]) < 1e-4 && Math.abs(op.vel[a]) < 1e-4)) op.pose = null;
+        else {
+          if (s?.round) { c.x = p.x; c.z = p.z; } else { c.x += p.x - b.x; c.z += p.z - b.z; }
+          c.y += p.y - b.y; c.h += p.h - b.h; c.yaw += p.yaw - b.yaw;
+        }
+      }
+      if (op.fresh) op.fresh = id != null && !aim?.known;
       c.x += num('camera_x') / EYE; c.h = (c.h ?? 1) + num('camera_h') / EYE; c.z += num('camera_z') / EYE; c.y += num('camera_look');
     }
+    const operating = () => !!op.pose && AXES.some(a => Math.abs(op.vel[a]) > 1e-4);
+    // The viewer's own moves over the film's camera (target: where they moved from the start): while
+    // the operator frames a target they are a look aside — they ease back to nothing once the viewer
+    // lets go (VIEWER_BACK s), they come at most VIEWER_NEAR of the way to the target (never through
+    // it, nor so near that it fades: nearFade). A cut — a new shot (scene.cut, not the scene's start: shown again, a draft, the viewer
+    // stays where they were) — takes them back to the start at once.
+    const VIEWER_BACK = 0.8, VIEWER_NEAR = 0.5;
+    let viewerShot = 0;
+    function overTarget(dt) {
+      // (a platformer's camera rides with its hero: no moves of the viewer's own)
+      if (viewerShot !== STATE.shots && !platform()) { viewerShot = STATE.shots; Object.assign(target, startPose()); Object.assign(cam, target); }
+      if (!op.pose || !(op.D > 0)) return;
+      // (looking around, the operator stands where the shot needs: the viewer only turns their head)
+      const b = startPose(), axes = round() ? ['y', 'yaw'] : AXES;
+      if (!round()) target.z = Math.min(target.z, b.z + Math.min(VIEWER_NEAR * op.D, op.D - PASS_TO));
+      if (fixed() || pointers.size || keys.size || glide || performance.now() - aimAt < 600) return;
+      const k = 1 - Math.exp(-dt / VIEWER_BACK);
+      for (const a of axes) target[a] += (b[a] - target[a]) * k;
+    }
     function leanShown(dt) {
       const k = 1 - Math.exp(-dt * 3), s = lim.setup;
       leaned.x += ((s?.sway ? 0 : lean.x) - leaned.x) * k; leaned.y += ((s?.sway ? 0 : lean.y) - leaned.y) * k;
@@ -1360,7 +2764,7 @@ const Moood = (() => {
       if (typing() || e.ctrlKey || e.metaKey || e.altKey) return;
       const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
       if (k === '0') { reset(); return; }
-      if (k === 'p') { perf.style.display = perf.style.display === 'none' ? 'block' : 'none'; return; }
+      if (k === 'p') { PERF.on = perf.style.display === 'none'; perf.style.display = PERF.on ? 'block' : 'none'; PERF.ms.clear(); return; }
       if (KEYS.includes(k) && !fixed()) { keys.add(k); e.preventDefault(); }
     });
     addEventListener('keyup', e => keys.delete(e.key.length === 1 ? e.key.toLowerCase() : e.key));
@@ -1368,16 +2772,18 @@ const Moood = (() => {
 
     const loop = now => {
       requestAnimationFrame(loop);
-      const moving = keys.size > 0 || pointers.size > 0 || !!glide || (plat && (Math.abs(plat.vx) > 0.01 || !plat.ground)) || Math.abs(target.x - cam.x) + Math.abs(target.y - cam.y) + Math.abs(target.z - cam.z) + Math.abs(target.h - cam.h) + Math.abs(target.yaw - cam.yaw) > 0.001;
+      const moving = keys.size > 0 || pointers.size > 0 || !!glide || operating() || (plat && (Math.abs(plat.vx) > 0.01 || !plat.ground)) || Math.abs(target.x - cam.x) + Math.abs(target.y - cam.y) + Math.abs(target.z - cam.z) + Math.abs(target.h - cam.h) + Math.abs(target.yaw - cam.yaw) > 0.001;
       if (moving) activeUntil = now + 500;
       const fps = now < activeUntil ? FPS_ACTIVE : fpsIdle;
       const real = (now - last) / 1000;
       // skip this display refresh; the tolerance is under half a refresh so vsync jitter
       // never drops a frame we meant to draw (that made 30 fps stutter at ~27)
-      if (real < 1 / fps - 0.006) return;
-      const dt = Math.min(0.05, real);
+      if (real < 1 / fps - 0.006 && !owed) return;
+      owed = false;
+      const dt = Math.min(0.05, real), was = t;
       last = now; t = Math.max(t, (performance.now() - born) / 1000);
       STATE.sample?.(); // the state's moves where they are this very moment
+      if (spec && !waiting) beforeFrame(t, t - was);
       if (real < 0.5) frameEma += (real - frameEma) * 0.1; // ignore tab-switch gaps
       adapt(now, fps);
       // a brisk walk: ~6 m/s forward, ~3.5 m/s sideways (world units are eye heights)
@@ -1409,6 +2815,7 @@ const Moood = (() => {
       if (fixed()) leanTo(t);
       keepInView();
       limitCam(target, lim);
+      overTarget(dt);
       if (glide && pointers.size === 0) {
         target.x += glide.vx * dt; target.y += glide.vy * dt; target.yaw += glide.vyaw * dt;
         limitCam(target, lim);
@@ -1422,14 +2829,25 @@ const Moood = (() => {
       cam.x += (target.x - cam.x) * k; cam.y += (target.y - cam.y) * k; cam.z += (target.z - cam.z) * k; cam.h += (target.h - cam.h) * k; cam.yaw += (target.yaw - cam.yaw) * k;
       cam.hero = plat && { id: plat.id, dx: plat.x - plat.x0, dy: plat.y - plat.y0, flip: plat.dir < 0 };
       leanShown(dt);
-      directed(shown);
+      const own = { ...shown };
+      // on a relief (spec.relief) the viewer's eyes go over the land as they walk: 1.7 m over the
+      // ground where they stand, as they were at the start
+      if (SHARED.ground && !plat) shown.h += (groundAt(shown.x * EYE, shown.z * EYE) - groundAt(0, 0)) / EYE;
+      directed(shown, dt);
+      for (const a of AXES) off[a] = (shown[a] ?? 0) - (own[a] ?? 0);
       const t0 = performance.now();
-      if (S) R.frame(S, spec, shown, t, dt, now >= activeUntil, target);
+      if (S && drawn === true) {
+        lookOf(spec);
+        R.frame(S, spec, shown, t, dt, now >= activeUntil, op.pose ? shown : target);
+        if (looking) looking.draw(shown, t);
+      } else if (S) { lookOf(spec); R.tick(S, spec, shown, t, dt, op.pose ? shown : target, drawn === 'painted'); }
       drawMs += performance.now() - t0;
       frames++;
-      if (now - perfAt > 1000 && perf.style.display !== 'none') {
-        perf.textContent = `${R.name} · ${Math.round(frames * 1000 / (now - perfAt))} fps (cap ${fps})\n${canvas.width}×${canvas.height} · res ${res.toFixed(2)}\njs ${(drawMs / frames).toFixed(1)} ms/frame`;
-        frames = 0; drawMs = 0; perfAt = now;
+      if (now - perfAt > 1000 && PERF.on) {
+        // and the elements that cost the most: their painting's ms a frame
+        const costly = [...PERF.ms].sort((a, b) => b[1] - a[1]).slice(0, 8).map(([k, ms]) => `\n  ${(ms / frames).toFixed(2).padStart(6)} ms  ${k.slice(0, 28)}`).join('');
+        perf.textContent = `${R.name} · ${Math.round(frames * 1000 / (now - perfAt))} fps (cap ${fps})\n${canvas.width}×${canvas.height} · res ${res.toFixed(2)}\njs ${(drawMs / frames).toFixed(1)} ms/frame${costly}`;
+        frames = 0; drawMs = 0; perfAt = now; PERF.ms.clear();
       } else if (now - perfAt > 1000) { frames = 0; drawMs = 0; perfAt = now; }
     };
     requestAnimationFrame(loop);
@@ -1440,7 +2858,8 @@ const Moood = (() => {
         const shared = MooodKit.shared(next, modules);
         if (shared instanceof Promise) { waiting = next; shared.then(() => { if (waiting === next) { waiting = null; this.show(next, modules); } }); return; }
         waiting = null; SHARED = shared;
-        spec = next; FOCUS.clear();
+        spec = next; FOCUS.clear(); NAMED.clear(); NOTES.clear(); PARTS.clear(); PERF.last.clear(); warned.clear(); STATE.read.clear(); BEFORE.clear(); PERF.repaints.clear();
+        dzOf = depths(spec); byId = new Map((spec.objects || []).filter(o => o.id != null).map(o => [String(o.id), o]));
         // values not set yet (the state may start after the scene is shown) are where the scene starts them
         if (spec.state && typeof spec.state === 'object') STATE.values = { ...spec.state, ...STATE.values };
         // a new level, or the same one edited: the hero stays where it got to
@@ -1461,19 +2880,50 @@ const Moood = (() => {
       // the scene's state changed (scenestate.js): the painting code sees it as e.state
       // was(key, ago): what a value was `ago` seconds ago (e.was); sample(): brings the values that
       // are moving to where they are now — called as each frame starts, so it paints them on time
-      setState(values, was, sample) {
+      // cutAt: when the last cut was (the scene's start or scene.cut); shots: how many scene.cuts
+      setState(values, was, sample, cutAt, shots) {
         STATE.values = values || {}; if (was) STATE.was = was; if (sample) STATE.sample = sample;
+        if (cutAt != null) STATE.cut = (cutAt - born) / 1000;
+        if (shots != null) STATE.shots = shots;
         STATE.ver++; activeUntil = performance.now() + 300;
       },
       // where in the canvas (CSS px) an element is now — the point its code marks (e.at), else its
-      // anchor (its top, with over) — lifted by `lift` metres; null when out of sight
-      screenOf: (id, lift = 0, over = false) => seenFrom(shown, id, lift, over),
+      // anchor (its top, with over); 'id#name' — a point its painting names — lifted by `lift`
+      // metres: [x, y, its distance]; null when out of sight (behind the eye, passed, a point its
+      // painting doesn't mark now)
+      screenOf: (ref, lift = 0, over = false) => seenFrom(shown, ref, lift, over),
+      // the ground's height (metres) at (across, distance): spec.relief, 0 without one
+      ground: groundAt,
+      // the state keys the shown scene's painting has read so far — its elements' code, its modules
+      read: () => STATE.read,
+      // the moment drawn as another camera sees it (a render's --views): `values` — the camera's keys
+      // (camera_target, camera_shot, camera_x…) over the film's, the operator there at once; the film
+      // itself — its state, its clock, its operator — goes on untouched (the next frame is its own)
+      still(values) {
+        if (!S || !spec || drawn !== true) return;
+        const film = STATE.values, was = structuredClone(op), c = Object.fromEntries(AXES.map(a => [a, shown[a] - off[a]]));
+        c.hero = shown.hero;
+        try {
+          STATE.values = { ...film, ...values, camera_glide: 0 };
+          op.fresh = true;
+          directed(c, 0);
+          lookOf(spec);
+          R.frame(S, spec, c, t, 0, false, c);
+          if (looking) looking.draw(c, t);
+        } finally { STATE.values = film; op = was; }
+      },
+      // true: drawn; false: the scene goes on unseen; 'painted': unseen, painted as when drawn (above)
+      draw(how = true) { owed = how === true && drawn !== true; drawn = how === true || how === 'painted' ? how : false; },
+      // what is where now, for whoever looks closely: { t (s), camera, frame (CSS px), elements (layout) }
+      inspect: () => ({ t: Math.round(t * 1000) / 1000, camera: Object.fromEntries(AXES.map(a => [a, Math.round(shown[a] * 1e4) / 1e4])), frame: { ...box }, elements: layout(shown) }),
     };
   }
 
   return {
     mount,
     // for the WebGL renderer (gl.js): the one-time painting code and camera maths
-    internals: { STAGE, WIDEST, TAU, project, billboard, placeOf, camSetup, heroMatrix, STATE, READS, EXT, DEEP, Z_FAR, EYE, depths, view, limits, fadeNear, objectBox, seeded, hash, clamp, layer, rgb, glowSprite, grainTile, staticLayer, drawObject, PARTICLES, makeParticles, moveParticle },
+    internals: { clock, STAGE, WIDEST, TAU, project, billboard, placeOf, camSetup, heroMatrix, STATE, READS, EXT, DEEP, Z_FAR, EYE, depths, view, limits, nearFade, objectBox, anchorOf, iris, opening, warn, seeded, hash, clamp, layer, rgb, glowSprite, grainTile, staticLayer, drawObject, PARTICLES, makeParticles, moveParticle,
+      orderRules, arrange, clipOf, landLine, groundAt, land: () => !!SHARED.ground, CHECK, planeOf, overMirror, onPlane, cellsOf, PLANE_CELLS,
+      lookOf, hazeReach, airOf, airGlow, sourcesNow, SOURCES, falloff, flickerNow, redrawOf, moved, PERF, shadowsOf, shadowLight, rayHit, ambientOf, shadowAt },
   };
 })();