@pixerate/flair 0.2.0 → 0.4.0

package/dist/{chunk-JWZCPMFG.js → chunk-GL37YCCM.js}

@@ -8,31 +8,21 @@ import {
   drawFrame,
   resetGlCaches,
   wrapSource
-} from "./chunk-HKXOHRCD.js";
-import {
-  ManualClock
-} from "./chunk-WMZQCUFJ.js";
+} from "./chunk-VA74HBPK.js";
 import {
   CAMERA_MS,
-  DEFAULT_STAGE,
-  areaOf,
-  between,
-  boundsOf,
-  calculateFramingRect,
-  easeInOutCubic,
-  frame,
-  isDeleteCommand,
-  isElementCommand,
-  isUpdateCommand,
-  overlapArea,
-  viewAt,
-  visibleRect
-} from "./chunk-36DTNSHU.js";
+  CAMERA_STEP_MS,
+  EFFECT_TYPES,
+  MAX_TILT,
+  cameraAt,
+  cameraTrack,
+  sceneStage
+} from "./chunk-WAMA45G3.js";
 import {
   controlValue,
   imageUrls,
   parseControls
-} from "./chunk-J55UBNAT.js";
+} from "./chunk-WC3VADZC.js";
 
 // src/shader/renderer.ts
 var ShaderRenderer = class {
@@ -48,6 +38,7 @@ var ShaderRenderer = class {
   frame = 0;
   fpsFrames = 0;
   fpsSince = 0;
+  ownsCanvas = false;
   resizeObserver;
   mouse = [0, 0, 0, 0];
   disposed = false;
@@ -66,11 +57,21 @@ var ShaderRenderer = class {
   onContextLost;
   /** Called when an image control's URL cannot be loaded; the control shows black. */
   onImageError;
-  /** Creates a canvas in `host` (with `className`) and starts the animation loop. Size the canvas with CSS. */
-  constructor(host, className = "") {
-    const canvas = document.createElement("canvas");
-    canvas.className = className;
-    host.appendChild(canvas);
+  /**
+   * Creates a canvas in `target` (with `className`), or attaches to an existing
+   * `HTMLCanvasElement`, and starts the animation loop. Size the canvas with CSS.
+   */
+  constructor(target, className = "") {
+    let canvas;
+    if (target instanceof HTMLCanvasElement || "tagName" in target && target.tagName === "CANVAS") {
+      canvas = target;
+      if (className) canvas.className = className;
+    } else {
+      canvas = document.createElement("canvas");
+      if (className) canvas.className = className;
+      target.appendChild(canvas);
+      this.ownsCanvas = true;
+    }
     this.canvas = canvas;
     this.gl = createContext(canvas, true);
     this.textures = this.gl && this.textureCache(this.gl);
@@ -190,7 +191,7 @@ var ShaderRenderer = class {
     this.textures = null;
     this.gl?.getExtension("WEBGL_lose_context")?.loseContext();
     this.gl = null;
-    this.canvas.remove();
+    if (this.ownsCanvas) this.canvas.remove();
   }
   resize() {
     const w = Math.max(1, Math.round(this.canvas.clientWidth * this.pixelRatio));
@@ -1039,228 +1040,6 @@ function getGlslBlendFunction(mode) {
   }
 }
 
-// src/time/noise.ts
-var GOLDEN_GAMMA = 0x9e3779b97f4a7c15n;
-var MULT1 = 0xbf58476d1ce4e5b9n;
-var MULT2 = 0x94d049bb133111ebn;
-var MASK64 = 0xffffffffffffffffn;
-var BASE_MIX = 0x2545f4914f6cdd1dn;
-var POW2_53 = 9007199254740992;
-function hash64(x) {
-  let v = x + GOLDEN_GAMMA & MASK64;
-  v = (v ^ v >> 30n) * MULT1 & MASK64;
-  v = (v ^ v >> 27n) * MULT2 & MASK64;
-  return (v ^ v >> 31n) & MASK64;
-}
-function mixSeeds(parts) {
-  let h = BASE_MIX;
-  for (const p of parts) {
-    const val = typeof p === "bigint" ? p : BigInt(Math.floor(p));
-    h = hash64(h ^ hash64(val & MASK64));
-  }
-  return h;
-}
-function unitFloat(seed) {
-  const s = typeof seed === "bigint" ? seed : BigInt(Math.floor(seed));
-  const hashed = hash64(s);
-  const shifted = Number(hashed >> 11n);
-  return shifted / POW2_53;
-}
-function quinticFade(t) {
-  return t * t * t * (t * (t * 6 - 15) + 10);
-}
-function lattice(seed, i) {
-  const mixed = seed ^ hash64(i & MASK64);
-  return unitFloat(mixed) * 2 - 1;
-}
-function noise1d(seed, x) {
-  if (!Number.isFinite(x)) return 0;
-  const s = typeof seed === "bigint" ? seed : BigInt(Math.floor(seed));
-  const floorX = Math.floor(x);
-  const u = quinticFade(x - floorX);
-  const i = BigInt(Math.floor(floorX));
-  const a = lattice(s, i);
-  const b = lattice(s, i + 1n);
-  return a + (b - a) * u;
-}
-function noise3d(x, y, z, seed = 0) {
-  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) {
-    return 0;
-  }
-  const s = typeof seed === "bigint" ? seed : BigInt(Math.floor(seed));
-  const fx = Math.floor(x);
-  const fy = Math.floor(y);
-  const fz = Math.floor(z);
-  const u = quinticFade(x - fx);
-  const v = quinticFade(y - fy);
-  const w = quinticFade(z - fz);
-  const ix = BigInt(fx);
-  const iy = BigInt(fy);
-  const iz = BigInt(fz);
-  const g = (dx, dy, dz) => {
-    const combined = mixSeeds([s, ix + dx, iy + dy, iz + dz]);
-    return unitFloat(combined) * 2 - 1;
-  };
-  const lerp = (a, b, t) => a + (b - a) * t;
-  const x00 = lerp(g(0n, 0n, 0n), g(1n, 0n, 0n), u);
-  const x10 = lerp(g(0n, 1n, 0n), g(1n, 1n, 0n), u);
-  const x01 = lerp(g(0n, 0n, 1n), g(1n, 0n, 1n), u);
-  const x11 = lerp(g(0n, 1n, 1n), g(1n, 1n, 1n), u);
-  const y0 = lerp(x00, x10, v);
-  const y1 = lerp(x01, x11, v);
-  return lerp(y0, y1, w);
-}
-function fractalWiggle(freq, amp, octaves = 3, ampMult = 0.5, t = 0, seed = 42, dimension = 0) {
-  const oct = Math.max(1, Math.min(16, Math.floor(octaves)));
-  let currentAmp = amp;
-  let currentFreq = freq;
-  let sum = 0;
-  const baseSeed = BigInt(seed);
-  for (let k = 0; k < oct; k++) {
-    const s = mixSeeds([baseSeed, BigInt(dimension), BigInt(k)]);
-    const phaseOffset = unitFloat(s) * 1e3;
-    sum += currentAmp * noise1d(s, currentFreq * t + phaseOffset);
-    currentAmp *= ampMult;
-    currentFreq *= 2;
-  }
-  return sum;
-}
-
-// src/scene/effects.ts
-var EFFECT_TYPES = [
-  "gradient",
-  "flow",
-  "glow",
-  "spotlight",
-  "shimmer",
-  "ripple",
-  "timer",
-  "counter",
-  "highlight",
-  "blur",
-  "burst",
-  "media"
-];
-var EFFECT_FADE_MS = 300;
-function effectGone(running, now) {
-  if (running.until !== void 0) {
-    return now >= running.until + EFFECT_FADE_MS;
-  }
-  if (running.effect.duration !== void 0) {
-    return now >= running.from + running.effect.duration + EFFECT_FADE_MS;
-  }
-  return false;
-}
-function effectOpacity(running, now) {
-  if (now < running.from) return 0;
-  const inFade = Math.min(1, (now - running.from) / 150);
-  if (running.until !== void 0) {
-    const out = Math.max(0, 1 - (now - running.until) / EFFECT_FADE_MS);
-    return inFade * out;
-  }
-  if (running.effect.duration !== void 0) {
-    const remaining = running.from + running.effect.duration - now;
-    if (remaining < 0) {
-      const out = Math.max(0, 1 + remaining / EFFECT_FADE_MS);
-      return inFade * out;
-    }
-  }
-  return inFade;
-}
-
-// src/scene/check.ts
-var NO_CHECK = { framing: [], overlaps: [], edges: [], underTitle: [] };
-var SMALL_TEXT_PX = 24;
-function titleBox(title, stage) {
-  const width = Math.min(stage.width, title.length * 20 + 64);
-  return { x: (stage.width - width) / 2, y: 24, width, height: 60 };
-}
-function touchedIds(shot) {
-  const ids = /* @__PURE__ */ new Set();
-  for (const cmd of shot.run ?? []) {
-    if (isElementCommand(cmd)) {
-      ids.add(cmd.element.id);
-    } else if ("id" in cmd && typeof cmd.id === "string") {
-      ids.add(cmd.id);
-    }
-  }
-  return [...ids];
-}
-var IN_FRAME = 0.95;
-function checkShot(shot, elements, view, stage, title) {
-  const frameRect = visibleRect(view, stage);
-  const touched = new Set(touchedIds(shot));
-  const framing = [];
-  const edges = [];
-  const overlaps = [];
-  const activeElements = elements.filter((e) => !e.isDeleted && (e.opacity === void 0 || e.opacity > 0));
-  for (const el of activeElements) {
-    const box = boundsOf(el);
-    const overlap = overlapArea(box, frameRect);
-    const boxArea = areaOf(box);
-    if (touched.has(el.id)) {
-      if (overlap === 0) {
-        framing.push({ id: el.id, how: "outside" });
-      } else if (boxArea > 0 && overlap / boxArea < IN_FRAME) {
-        framing.push({ id: el.id, how: "cut" });
-      }
-    } else if (overlap > 0 && boxArea > 0 && overlap / boxArea < IN_FRAME) {
-      edges.push(el.id);
-    }
-  }
-  const touchedList = activeElements.filter((e) => touched.has(e.id));
-  for (let i = 0; i < touchedList.length; i++) {
-    for (let j = i + 1; j < touchedList.length; j++) {
-      const a = touchedList[i];
-      const b = touchedList[j];
-      const aBox = boundsOf(a);
-      const bBox = boundsOf(b);
-      const ol = overlapArea(aBox, bBox);
-      const minArea = Math.min(areaOf(aBox), areaOf(bBox));
-      if (minArea > 0 && ol / minArea > 0.3) {
-        overlaps.push([a.id, b.id]);
-      }
-    }
-  }
-  const smallTexts = [];
-  let smallestText;
-  for (const el of activeElements) {
-    if (el.text && el.fontSize) {
-      const px = Math.round(el.fontSize * view.zoom);
-      const item = { id: el.id, text: el.text, px };
-      if (!smallestText || px < smallestText.px) {
-        smallestText = item;
-      }
-      if (px < SMALL_TEXT_PX) {
-        smallTexts.push(item);
-      }
-    }
-  }
-  const underTitle = [];
-  if (title) {
-    const tBox = titleBox(title, stage);
-    const sceneTBox = {
-      x: tBox.x / view.zoom - view.scrollX,
-      y: tBox.y / view.zoom - view.scrollY,
-      width: tBox.width / view.zoom,
-      height: tBox.height / view.zoom
-    };
-    for (const el of activeElements) {
-      if (overlapArea(boundsOf(el), sceneTBox) > 0) {
-        underTitle.push(el.id);
-      }
-    }
-  }
-  return {
-    framing,
-    overlaps,
-    smallestText,
-    smallTexts: smallTexts.length ? smallTexts : void 0,
-    edges,
-    underTitle
-  };
-}
-
 // src/scene/validate.ts
 var LONG_CAPTION = 120;
 var LONG_TITLE = 60;
@@ -1297,9 +1076,22 @@ function validateScene(scene) {
         if (!Array.isArray(shot.camera.frame) || shot.camera.frame.length === 0) {
           say(shotNum, "Dynamic camera framing requires a non-empty frame array of element IDs.");
         }
-      } else if (shot.camera.width <= 0 || shot.camera.height <= 0) {
+      } else if ("width" in shot.camera && (shot.camera.width <= 0 || shot.camera.height <= 0)) {
         say(shotNum, "Camera rectangle width and height must be positive.");
       }
+      const cam = shot.camera;
+      const angle = (name, max) => {
+        const v = cam[name];
+        if (v !== void 0 && !(typeof v === "number" && Math.abs(v) <= max))
+          say(shotNum, `Camera ${name} is degrees between -${max} and ${max}.`);
+      };
+      angle("tilt", MAX_TILT);
+      angle("turn", MAX_TILT);
+      angle("roll", 180);
+      if (cam.perspective !== void 0 && !(typeof cam.perspective === "number" && cam.perspective >= 0.3))
+        say(shotNum, "Camera perspective is the lens distance as a multiple of the stage width, 0.3 or more (1.2 by default).");
+      if (cam.motionBlur !== void 0 && !(typeof cam.motionBlur === "number" && cam.motionBlur >= 0 && cam.motionBlur <= 3))
+        say(shotNum, "Camera motionBlur is 0 (none) to 3 (a whip); 1 is natural.");
     }
     if (shot.hold !== void 0 && shot.hold < 0) {
       say(shotNum, "Shot hold cannot be negative.");
@@ -1347,381 +1139,19 @@ function validateScene(scene) {
   return issues;
 }
 
-// src/scene/report.ts
-function reviewScene(scene, logs, options = {}) {
-  const warnings = [];
-  const notes = [];
-  const minTextPx = options.minTextPx ?? 18;
-  const totalMs = logs.length > 0 ? logs[logs.length - 1].end : 0;
-  const totalSec = (totalMs / 1e3).toFixed(1);
-  if (scene.target) {
-    const [minS, maxS] = scene.target;
-    const durS = totalMs / 1e3;
-    if (durS < minS) {
-      warnings.push(`Scene is ${totalSec}s, shorter than target minimum (${minS}s).`);
-    } else if (durS > maxS) {
-      warnings.push(`Scene is ${totalSec}s, longer than target maximum (${maxS}s).`);
-    }
-  }
-  for (const log of logs) {
-    const shotPrefix = `Shot ${log.index}:`;
-    if (log.failed.length > 0) {
-      warnings.push(`${shotPrefix} ${log.failed.length} command(s) failed: ${log.failed.join(", ")}`);
-    }
-    for (const f of log.framing) {
-      warnings.push(`${shotPrefix} element "${f.id}" is ${f.how} of the camera frame.`);
-    }
-    for (const [a, b] of log.overlaps) {
-      notes.push(`${shotPrefix} elements "${a}" and "${b}" overlap significantly.`);
-    }
-    if (log.smallTexts) {
-      for (const t of log.smallTexts) {
-        if (t.px < minTextPx) {
-          warnings.push(`${shotPrefix} text "${t.text}" is only ${t.px}px on screen (less than ${minTextPx}px minimum).`);
-        }
-      }
-    }
-    for (const id of log.underTitle) {
-      warnings.push(`${shotPrefix} element "${id}" is partially covered by the title bar.`);
-    }
-  }
-  const lines = [
-    `# Scene Preview Review: ${scene.title || scene.name}`,
-    `**Total Duration:** ${totalSec}s (${logs.length} shots)`,
-    ""
-  ];
-  if (warnings.length > 0) {
-    lines.push("### \u26A0\uFE0F Warnings to Address:");
-    for (const w of warnings) lines.push(`- ${w}`);
-    lines.push("");
-  } else {
-    lines.push("\u2705 No critical layout or framing warnings.");
-    lines.push("");
-  }
-  if (notes.length > 0) {
-    lines.push("### \u2139\uFE0F Layout Notes:");
-    for (const n of notes) lines.push(`- ${n}`);
-    lines.push("");
-  }
-  lines.push("### Shot Breakdown");
-  lines.push("| Shot | Start | End | Duration | Title / Caption |");
-  lines.push("|:---:|:---:|:---:|:---:|:---|");
-  for (const log of logs) {
-    const dur = ((log.end - log.start) / 1e3).toFixed(1);
-    const text = log.title || log.caption || "\u2014";
-    lines.push(`| ${log.index} | ${(log.start / 1e3).toFixed(1)}s | ${(log.end / 1e3).toFixed(1)}s | ${dur}s | ${text.slice(0, 40)} |`);
-  }
-  return {
-    totalMs,
-    warnings,
-    notes,
-    markdown: lines.join("\n")
-  };
-}
-
-// src/scene/behavior.ts
-function evaluateWriggle(t, freq, amount, octaves = 3, seed = 42) {
-  return fractalWiggle(freq, amount, octaves, 0.5, t, seed, 0);
-}
-function evaluateBehavior(behavior, elapsedSec, durationSec, baseValue = 0) {
-  const t = Math.max(0, elapsedSec);
-  switch (behavior.type) {
-    case "oscillate": {
-      const freq = behavior.frequency;
-      const phase = behavior.phase ?? 0;
-      const angle = 2 * Math.PI * freq * t + phase;
-      let waveVal = 0;
-      switch (behavior.wave) {
-        case "square":
-          waveVal = Math.sin(angle) >= 0 ? 1 : -1;
-          break;
-        case "triangle":
-          waveVal = 2 / Math.PI * Math.asin(Math.sin(angle));
-          break;
-        case "sawtooth": {
-          const norm = angle / (2 * Math.PI) % 1;
-          waveVal = 2 * (norm < 0 ? norm + 1 : norm) - 1;
-          break;
-        }
-        case "sine":
-        default:
-          waveVal = Math.sin(angle);
-          break;
-      }
-      const offset = waveVal * behavior.amplitude;
-      return behavior.center !== void 0 ? behavior.center + offset : baseValue + offset;
-    }
-    case "ramp": {
-      const from = behavior.from ?? baseValue;
-      const to = behavior.to;
-      const p = durationSec > 0 ? Math.min(1, Math.max(0, t / durationSec)) : 1;
-      let eased = p;
-      switch (behavior.ease) {
-        case "easeIn":
-          eased = p * p;
-          break;
-        case "easeOut":
-          eased = p * (2 - p);
-          break;
-        case "easeInOut":
-          eased = p < 0.5 ? 2 * p * p : -1 + (4 - 2 * p) * p;
-          break;
-        case "linear":
-        default:
-          eased = p;
-          break;
-      }
-      return from + (to - from) * eased;
-    }
-    case "rate": {
-      return baseValue + behavior.rate * t;
-    }
-    case "wriggle": {
-      const wander = evaluateWriggle(
-        t,
-        behavior.frequency,
-        behavior.amount,
-        behavior.octaves ?? 3,
-        behavior.seed ?? 42
-      );
-      return baseValue + wander;
-    }
-    case "overshoot": {
-      const from = behavior.startValue ?? baseValue;
-      const target = behavior.targetValue;
-      const cycles = behavior.cycles ?? 3;
-      const damping = behavior.damping ?? 4;
-      if (durationSec <= 0) return target;
-      const p = Math.min(1, t / durationSec);
-      if (p >= 1) return target;
-      const envelope = Math.exp(-damping * p);
-      const oscillation = Math.cos(cycles * Math.PI * p);
-      const progress = 1 - envelope * oscillation;
-      return from + (target - from) * progress;
-    }
-    case "throw": {
-      const v0 = behavior.initialVelocity;
-      const k = Math.max(1e-3, behavior.friction ?? 2);
-      const displacement = v0 / k * (1 - Math.exp(-k * t));
-      return baseValue + displacement;
-    }
-  }
-}
-
-// src/scene/player.ts
-var MemorySceneBoard = class {
-  view;
-  elMap = /* @__PURE__ */ new Map();
-  currentTitle = "";
-  currentCaption = "";
-  runningEffects = [];
-  constructor(stage = DEFAULT_STAGE) {
-    this.view = viewAt(stage.width / 2, stage.height / 2, 1, stage);
-  }
-  getView() {
-    return this.view;
-  }
-  setView(view) {
-    this.view = view;
-  }
-  elements() {
-    return Array.from(this.elMap.values());
-  }
-  runCommand(cmd) {
-    if (isElementCommand(cmd)) {
-      this.elMap.set(cmd.element.id, { ...cmd.element });
-    } else if (isUpdateCommand(cmd)) {
-      const existing = this.elMap.get(cmd.id);
-      if (existing) {
-        this.elMap.set(cmd.id, { ...existing, ...cmd.props });
-      }
-    } else if (isDeleteCommand(cmd)) {
-      this.elMap.delete(cmd.id);
-    } else if (cmd.type === "clear") {
-      this.elMap.clear();
-    }
-  }
-  setTitle(text) {
-    this.currentTitle = text;
-  }
-  setCaption(text) {
-    this.currentCaption = text;
-  }
-  setEffects(effects) {
-    this.runningEffects = effects;
-  }
-};
-async function playScene(scene, board, clock, options = {}) {
-  const stage = {
-    width: scene.stage?.width ?? DEFAULT_STAGE.width,
-    height: scene.stage?.height ?? DEFAULT_STAGE.height,
-    caption: scene.stage?.caption ?? DEFAULT_STAGE.caption
-  };
-  const shots = [];
-  const begin = clock.now();
-  let runningEffects = [];
-  const endsAt = /* @__PURE__ */ new Map();
-  const updateEffects = (next) => {
-    runningEffects = next.filter((r) => !effectGone(r, clock.now()));
-    board.setEffects?.(runningEffects);
-  };
-  for (const [idx, shot] of scene.shots.entries()) {
-    const shotStart = clock.now() - begin;
-    const failedCmds = [];
-    const stopIds = new Set(shot.stopEffects ?? []);
-    if (stopIds.size > 0 || runningEffects.some((r) => endsAt.get(r) === idx)) {
-      const now = clock.now();
-      updateEffects(
-        runningEffects.map(
-          (r) => r.until === void 0 && (stopIds.has(r.effect.id) || endsAt.get(r) === idx) ? { ...r, until: now } : r
-        )
-      );
-    }
-    if (shot.camera) {
-      let targetRect;
-      if ("frame" in shot.camera) {
-        const frameIds = new Set(shot.camera.frame);
-        const targetElements = board.elements().filter((el) => frameIds.has(el.id));
-        if (targetElements.length === 0 && shot.run) {
-          for (const cmd of shot.run) {
-            if (isElementCommand(cmd) && frameIds.has(cmd.element.id)) {
-              targetElements.push(cmd.element);
-            }
-          }
-        }
-        targetRect = calculateFramingRect(targetElements, stage, {
-          padding: shot.camera.padding,
-          minWidth: shot.camera.minWidth,
-          minHeight: shot.camera.minHeight
-        });
-      } else {
-        targetRect = shot.camera;
-      }
-      const targetView = frame(targetRect, stage);
-      if (idx === 0) {
-        board.setView(targetView);
-      } else {
-        const fromView = board.getView();
-        const steps = 15;
-        const stepMs = CAMERA_MS / steps;
-        for (let s = 1; s <= steps; s++) {
-          const t = easeInOutCubic(s / steps);
-          board.setView(between(fromView, targetView, t, stage));
-          await clock.sleep(stepMs);
-        }
-      }
-    }
-    if (shot.title !== void 0) {
-      board.setTitle?.(shot.title, 1);
-    }
-    if (shot.caption !== void 0) {
-      board.setCaption?.(shot.caption);
-    }
-    const startEffects = (shot.effects ?? []).filter((e) => e.at === "start");
-    if (startEffects.length > 0) {
-      const now = clock.now();
-      const added = startEffects.map((effect) => ({ effect, from: now }));
-      for (const r of added) if (r.effect.shots) endsAt.set(r, idx + r.effect.shots);
-      updateEffects([...runningEffects, ...added]);
-    }
-    for (const cmd of shot.run ?? []) {
-      try {
-        await board.runCommand(cmd);
-      } catch (err) {
-        failedCmds.push(err.message || String(err));
-      }
-    }
-    const drawnEffects = (shot.effects ?? []).filter((e) => e.at !== "start");
-    if (drawnEffects.length > 0) {
-      const now = clock.now();
-      const added = drawnEffects.map((effect) => ({ effect, from: now }));
-      for (const r of added) if (r.effect.shots) endsAt.set(r, idx + r.effect.shots);
-      updateEffects([...runningEffects, ...added]);
-    }
-    const drawnTime = clock.now() - begin;
-    const check = options.check ? checkShot(shot, board.elements(), board.getView(), stage, shot.title) : { framing: [], overlaps: [], edges: [], underTitle: [] };
-    const holdMs = shot.hold ?? 800;
-    const behaviors = shot.behaviors ?? [];
-    if (behaviors.length > 0) {
-      const initialProps = /* @__PURE__ */ new Map();
-      for (const b of behaviors) {
-        const key = `${b.target}:${b.property}`;
-        const el = board.elements().find((e) => e.id === b.target);
-        if (el && typeof el[b.property] === "number") {
-          initialProps.set(key, el[b.property]);
-        } else {
-          initialProps.set(key, 0);
-        }
-      }
-      const stepMs = 50;
-      const steps = Math.max(1, Math.round(holdMs / stepMs));
-      const actualStepMs = holdMs / steps;
-      const durationSec = holdMs / 1e3;
-      for (let s = 1; s <= steps; s++) {
-        await clock.sleep(actualStepMs);
-        const elapsedSec = s * actualStepMs / 1e3;
-        for (const b of behaviors) {
-          const baseVal = initialProps.get(`${b.target}:${b.property}`) ?? 0;
-          const nextVal = evaluateBehavior(b, elapsedSec, durationSec, baseVal);
-          board.runCommand({
-            type: "update",
-            id: b.target,
-            props: { [b.property]: nextVal }
-          });
-        }
-      }
-    } else {
-      await clock.sleep(holdMs);
-    }
-    const shotEnd = clock.now() - begin;
-    const log = {
-      ...check,
-      index: idx + 1,
-      start: shotStart,
-      drawn: drawnTime,
-      end: shotEnd,
-      caption: shot.caption,
-      title: shot.title,
-      failed: failedCmds,
-      effects: runningEffects.map((r) => r.effect.id)
-    };
-    shots.push(log);
-    if (options.afterShot) {
-      await options.afterShot(log);
-    }
-  }
-  const duration = clock.now() - begin;
-  const ok = shots.every((s) => s.failed.length === 0 && s.framing.every((f) => f.how !== "outside"));
-  return { ok, duration, shots };
-}
-async function simulateScene(scene, options = {}) {
-  const clock = new ManualClock();
-  const board = new MemorySceneBoard();
-  let done = false;
-  let playError = null;
-  const playPromise = playScene(scene, board, clock, { check: true }).then((res) => {
-    done = true;
-    return res;
-  }).catch((err) => {
-    done = true;
-    playError = err;
-    throw err;
-  });
-  for (let i = 0; i < 5e3 && !done; i++) {
-    await clock.advance(50);
-  }
-  if (playError) throw playError;
-  const result = await playPromise;
-  const review = reviewScene(scene, result.shots, {
-    target: scene.target,
-    minTextPx: options.minTextPx
+// src/scene/standalone.ts
+function planShots(scene, stage) {
+  return cameraTrack(scene).map((entry) => {
+    const steps = Math.round(entry.moveMs / CAMERA_STEP_MS);
+    const move = Array.from({ length: Math.max(0, steps - 1) }, (_, i) => cameraAt(entry, (i + 1) * CAMERA_STEP_MS, stage));
+    move.push(entry.to);
+    return { move, elements: entry.elements };
   });
-  return { result, review };
 }
-
-// src/scene/standalone.ts
 function standaloneSceneHtml(scene) {
+  const stage = sceneStage(scene);
   const serializedScene = JSON.stringify(scene).replace(/</g, "\\u003c");
+  const serializedPlan = JSON.stringify({ stage, cameraMs: CAMERA_MS, shots: planShots(scene, stage) }).replace(/</g, "\\u003c");
   const title = scene.title || scene.name;
   return `<!DOCTYPE html>
 <html lang="en">
@@ -1747,7 +1177,7 @@ function standaloneSceneHtml(scene) {
       position: relative;
       width: 100%;
       max-width: 1200px;
-      aspect-ratio: 16 / 9;
+      aspect-ratio: ${stage.width} / ${stage.height};
       background: #000;
       border-radius: 12px;
       overflow: hidden;
@@ -1762,6 +1192,12 @@ function standaloneSceneHtml(scene) {
       height: 100%;
       overflow: hidden;
     }
+    .board {
+      position: absolute;
+      inset: 0;
+      transform-origin: 50% 50%;
+      will-change: transform, filter;
+    }
     canvas.layer {
       position: absolute;
       top: 0;
@@ -1858,7 +1294,8 @@ function standaloneSceneHtml(scene) {
   <div class="player-container">
     <div class="viewport" id="viewport">
       <canvas id="shaderCanvas" class="layer"></canvas>
-      <canvas id="sceneCanvas" class="layer"></canvas>
+      <div id="board" class="board"><canvas id="sceneCanvas" class="layer"></canvas></div>
+      <svg width="0" height="0" style="position:absolute" aria-hidden="true"><filter id="motionBlur" x="-10%" y="-10%" width="120%" height="120%"><feGaussianBlur id="motionBlurAmount" stdDeviation="0 0"/></filter></svg>
       <div id="titleEl" class="overlay-title"></div>
       <div id="captionEl" class="overlay-caption"></div>
     </div>
@@ -1875,6 +1312,9 @@ function standaloneSceneHtml(scene) {
 
   <script>
     const scene = ${serializedScene};
+    // Each shot's camera move (zoom, scroll, 3D angle and blur at each step) and elements, worked out in advance.
+    const plan = ${serializedPlan};
+    const boardEl = document.getElementById('board');
     const sceneCanvas = document.getElementById('sceneCanvas');
     const shaderCanvas = document.getElementById('shaderCanvas');
     const ctx = sceneCanvas.getContext('2d');
@@ -1888,7 +1328,8 @@ function standaloneSceneHtml(scene) {
 
     let currentShotIdx = 0;
     let isPlaying = false;
-    let shotStartTime = 0;
+    let shotStartTime = performance.now();
+    let moveFrom = performance.now();
     let gl = null;
     let shaderProgram = null;
 
@@ -1970,64 +1411,98 @@ function standaloneSceneHtml(scene) {
       progressEl.style.width = pct + '%';
     }
 
+    // The camera at time 'now': a step of the current shot's move, or where it settled.
+    function cameraNow(now) {
+      const move = plan.shots[currentShotIdx].move;
+      const u = Math.min(1, (now - moveFrom) / plan.cameraMs);
+      return move[Math.min(move.length - 1, Math.floor(u * move.length))];
+    }
+
+    function applyCamera(view) {
+      const w = boardEl.clientWidth || plan.stage.width;
+      const angled = view.tilt || view.turn || view.roll;
+      boardEl.style.transform = angled
+        ? 'perspective(' + (view.perspective || 1.2) * w + 'px) rotateX(' + (view.tilt || 0) + 'deg) rotateY(' + (view.turn || 0) + 'deg) rotateZ(' + (view.roll || 0) + 'deg)'
+        : 'none';
+      // Motion blur streaks along a pan (taken back through the roll, as the board is blurred before it turns).
+      const blur = (view.blur || 0) * w / plan.stage.width;
+      if (blur >= 0.05) {
+        let sx = blur, sy = blur;
+        if (view.blurAngle !== undefined) {
+          const a = (view.blurAngle - (view.roll || 0)) * Math.PI / 180;
+          sx = Math.max(blur * 0.15, blur * Math.abs(Math.cos(a)));
+          sy = Math.max(blur * 0.15, blur * Math.abs(Math.sin(a)));
+        }
+        document.getElementById('motionBlurAmount').setAttribute('stdDeviation', sx.toFixed(2) + ' ' + sy.toFixed(2));
+        boardEl.style.filter = 'url(#motionBlur)';
+      } else {
+        boardEl.style.filter = 'none';
+      }
+    }
+
     function draw() {
-      const now = performance.now() / 1000;
-      renderShader(now);
+      const now = performance.now();
+      renderShader(now / 1000);
 
+      const view = cameraNow(now);
+      applyCamera(view);
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
       ctx.clearRect(0, 0, sceneCanvas.width, sceneCanvas.height);
-      ctx.save();
-      const shot = scene.shots[currentShotIdx];
-
-      // Draw shot elements
-      if (shot && shot.run) {
-        for (const cmd of shot.run) {
-          if (cmd.type === 'element' && cmd.element) {
-            const el = cmd.element;
-            ctx.fillStyle = el.backgroundColor || 'rgba(59, 130, 246, 0.4)';
-            ctx.strokeStyle = el.strokeColor || '#3b82f6';
-            ctx.lineWidth = 3;
-            ctx.strokeRect(el.x, el.y, el.width, el.height);
-            ctx.fillRect(el.x, el.y, el.width, el.height);
+      const k = (sceneCanvas.width / plan.stage.width) * view.zoom;
+      ctx.setTransform(k, 0, 0, k, k * view.scrollX, k * view.scrollY);
 
-            if (el.text) {
-              ctx.fillStyle = '#fff';
-              ctx.font = '24px sans-serif';
-              ctx.fillText(el.text, el.x + 16, el.y + 40);
-            }
-          }
+      for (const el of plan.shots[currentShotIdx].elements) {
+        ctx.fillStyle = el.backgroundColor || 'rgba(59, 130, 246, 0.4)';
+        ctx.strokeStyle = el.strokeColor || '#3b82f6';
+        ctx.lineWidth = 3;
+        ctx.fillRect(el.x, el.y, el.width, el.height);
+        ctx.strokeRect(el.x, el.y, el.width, el.height);
+        if (el.text) {
+          ctx.fillStyle = '#fff';
+          ctx.font = '24px sans-serif';
+          ctx.fillText(el.text, el.x + 16, el.y + 40);
         }
       }
-      ctx.restore();
 
-      if (isPlaying) {
+      // Playing moves on to the next shot once this one's move and hold are over.
+      const shot = scene.shots[currentShotIdx];
+      if (isPlaying && now - shotStartTime > plan.cameraMs + (shot.hold ?? 800) && currentShotIdx < scene.shots.length - 1) {
+        goTo(currentShotIdx + 1, true);
+      }
+      if (isPlaying || now - moveFrom < plan.cameraMs) {
         requestAnimationFrame(draw);
       }
     }
 
+    // Shows a shot: forwards it plays the camera's move into it, otherwise it cuts.
+    function goTo(idx, animate) {
+      currentShotIdx = idx;
+      shotStartTime = performance.now();
+      moveFrom = animate ? shotStartTime : shotStartTime - plan.cameraMs;
+      updateShotUI();
+      requestAnimationFrame(draw);
+    }
+
     playBtn.addEventListener('click', () => {
       isPlaying = !isPlaying;
       playBtn.textContent = isPlaying ? 'Pause' : 'Play';
-      if (isPlaying) requestAnimationFrame(draw);
+      // The current shot counts as settled, so its hold runs from now.
+      if (isPlaying) {
+        shotStartTime = performance.now() - plan.cameraMs;
+        requestAnimationFrame(draw);
+      }
     });
 
     prevBtn.addEventListener('click', () => {
-      if (currentShotIdx > 0) {
-        currentShotIdx--;
-        updateShotUI();
-        draw();
-      }
+      if (currentShotIdx > 0) goTo(currentShotIdx - 1, false);
     });
 
     nextBtn.addEventListener('click', () => {
-      if (currentShotIdx < scene.shots.length - 1) {
-        currentShotIdx++;
-        updateShotUI();
-        draw();
-      }
+      if (currentShotIdx < scene.shots.length - 1) goTo(currentShotIdx + 1, true);
     });
 
-    updateShotUI();
-    draw();
+    window.addEventListener('resize', () => requestAnimationFrame(draw));
+    goTo(0, false);
   </script>
 </body>
 </html>`;
@@ -2047,28 +1522,7 @@ export {
   ALL_BLEND_MODES,
   blendRgba,
   getGlslBlendFunction,
-  hash64,
-  mixSeeds,
-  unitFloat,
-  quinticFade,
-  noise1d,
-  noise3d,
-  fractalWiggle,
-  EFFECT_TYPES,
-  EFFECT_FADE_MS,
-  effectGone,
-  effectOpacity,
-  NO_CHECK,
-  SMALL_TEXT_PX,
-  titleBox,
-  touchedIds,
-  checkShot,
   validateScene,
-  reviewScene,
-  evaluateBehavior,
-  MemorySceneBoard,
-  playScene,
-  simulateScene,
   standaloneSceneHtml
 };
-//# sourceMappingURL=chunk-JWZCPMFG.js.map
+//# sourceMappingURL=chunk-GL37YCCM.js.map