reframe-video 0.6.19 → 0.6.20

package/.claude-plugin/marketplace.json

@@ -0,0 +1,14 @@
+{
+  "name": "reframe",
+  "owner": {
+    "name": "Kiyeon Jeon",
+    "url": "https://github.com/kiyeonjeon21"
+  },
+  "plugins": [
+    {
+      "name": "reframe",
+      "source": "./",
+      "description": "Motion-graphics videos as addressable data — generate, tweak, regenerate without losing human edits."
+    }
+  ]
+}

package/.claude-plugin/plugin.json

@@ -0,0 +1,9 @@
+{
+  "name": "reframe",
+  "version": "0.1.0",
+  "description": "Create and iterate motion-graphics videos as addressable data: deterministic mp4 renders, human edits that survive AI regeneration, label-anchored audio, data-driven batch rendering.",
+  "author": {
+    "name": "Kiyeon Jeon",
+    "url": "https://github.com/kiyeonjeon21"
+  }
+}

package/dist/bin.js

@@ -2799,6 +2799,7 @@ var RENDER_CLI = PACKAGED ? join9(ROOT2, "dist", "cli.js") : join9(ROOT2, "packa
 var LABELS = PACKAGED ? join9(ROOT2, "dist", "labels.js") : join9(ROOT2, "packages", "render-cli", "src", "labels.ts");
 var COMPILE = PACKAGED ? join9(ROOT2, "dist", "compile.js") : join9(ROOT2, "packages", "render-cli", "src", "compile.ts");
 var DIFF = PACKAGED ? join9(ROOT2, "dist", "diff.js") : join9(ROOT2, "packages", "render-cli", "src", "diff.ts");
+var FRAME = PACKAGED ? join9(ROOT2, "dist", "frame.js") : join9(ROOT2, "packages", "render-cli", "src", "frame.ts");
 var PLAYER = PACKAGED ? join9(ROOT2, "dist", "player.js") : join9(ROOT2, "packages", "render-cli", "src", "player.ts");
 var ANALYZE = PACKAGED ? join9(ROOT2, "dist", "analyze.js") : join9(ROOT2, "benchmark", "harness", "motion", "analyze.ts");
 var TRACE = PACKAGED ? join9(ROOT2, "dist", "trace-cli.js") : join9(ROOT2, "benchmark", "harness", "motion", "trace-cli.ts");
@@ -2818,6 +2819,8 @@ usage:
   ${CMD} labels <scene.ts|.json>  print the event clock (label \u2192 exact seconds; for sound design / timing)
   ${CMD} compile <scene.ts|.json> [-o out.json] [--stdin] [--code "<src>"] [--json]
                                  bundle + validate a scene to SceneIR JSON, no render (fast; no ffmpeg/chromium)
+  ${CMD} frame <scene.ts|.json> [--t <sec>] [-o out.png]  render ONE frame at time t to a PNG (no mp4; for a render-and-look loop)
+  ${CMD} skill [--path]          print the authoring skill (SKILL.md) for an agent; --path prints the plugin dir to load
   ${CMD} motion <mp4|framesDir>  motion-profile a rendered clip
   ${CMD} trace <ref.mp4> [--apply scene.ts]  extract a video's motion structure \u2192 MotionSketch / timeline
   ${CMD} diff <ref-image> [<scene.ts>] [--t S] [--mode side|blend|diff|grid]  compare/measure a render against a reference image
@@ -2982,6 +2985,26 @@ ${USAGE}`);
         await (PACKAGED ? run2(process.execPath, [COMPILE, ...passed]) : run2("npx", ["tsx", COMPILE, ...passed]))
       );
     }
+    case "frame": {
+      const input = rest[0];
+      if (!input || input.startsWith("-")) fail(`frame needs a scene file
+
+${USAGE}`);
+      const inputPath = userPath(input);
+      if (!existsSync6(inputPath)) fail(`no such file: ${inputPath}`);
+      const args = rest.slice(1);
+      const outBase = PACKAGED ? join9(USER_CWD, "out") : join9(ROOT2, "out");
+      const stem = `${basename(input).replace(/\.[^.]+$/, "")}.png`;
+      let outArgs = args;
+      if (args.indexOf("-o") === -1) {
+        await mkdir4(outBase, { recursive: true });
+        outArgs = [...args, "-o", join9(outBase, stem)];
+      }
+      outArgs = outArgs.map((a, i) => outArgs[i - 1] === "-o" ? userPath(a) : a);
+      process.exit(
+        await (PACKAGED ? run2(process.execPath, [FRAME, inputPath, ...outArgs]) : run2("npx", ["tsx", FRAME, inputPath, ...outArgs]))
+      );
+    }
     case "player": {
       const input = rest[0];
       if (!input || input.startsWith("-")) fail(`player needs a scene file
@@ -3170,6 +3193,16 @@ ${results.length - failed} rendered (${orphaned} with orphans), ${failed} failed
       process.stdout.write(await readFile7(file, "utf8"));
       return;
     }
+    case "skill": {
+      if (rest.includes("--path")) {
+        process.stdout.write(`${ROOT2}
+`);
+        return;
+      }
+      const { readFile: readFile7 } = await import("node:fs/promises");
+      process.stdout.write(await readFile7(join9(ROOT2, "skills", "reframe", "SKILL.md"), "utf8"));
+      return;
+    }
     case "demo":
       if (PACKAGED) {
         fail(

package/dist/frame.js

@@ -0,0 +1,1149 @@
+#!/usr/bin/env tsx
+
+// ../render-cli/src/frame.ts
+import { writeFile } from "node:fs/promises";
+import { dirname as dirname4, resolve as resolve4 } from "node:path";
+
+// ../render-cli/src/frameLoop.ts
+import { join as join3, dirname as dirname2 } from "node:path";
+import { fileURLToPath as fileURLToPath2, pathToFileURL } from "node:url";
+import { build } from "esbuild";
+import { chromium } from "playwright";
+
+// ../render-cli/src/fonts.ts
+import { readFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+var FONTS_DIR = true ? join(dirname(fileURLToPath(import.meta.url)), "..", "assets", "fonts") : join(dirname(fileURLToPath(import.meta.url)), "..", "..", "..", "assets", "fonts");
+var WEIGHTS = [400, 700, 800];
+var cssCache = null;
+async function fontFaceCss() {
+  if (cssCache) return cssCache;
+  const rules = await Promise.all(
+    WEIGHTS.map(async (weight) => {
+      const data = await readFile(join(FONTS_DIR, `inter-${weight}.woff2`));
+      return `@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: ${weight};
+  src: url(data:font/woff2;base64,${data.toString("base64")}) format("woff2");
+}`;
+    })
+  );
+  cssCache = rules.join("\n");
+  return cssCache;
+}
+
+// ../render-cli/src/images.ts
+import { readFile as readFile2 } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { extname, isAbsolute, resolve } from "node:path";
+
+// ../core/src/ir.ts
+var DEFAULT_TO_DURATION = 0.5;
+var DEFAULT_TWEEN_DURATION = 0.5;
+var DEFAULT_MOTIONPATH_DURATION = 1;
+var DEFAULT_STILL_DURATION = 1;
+
+// ../core/src/path.ts
+function locate(segCount, u) {
+  if (segCount <= 0) return { i: 0, t: 0 };
+  const clamped = Math.max(0, Math.min(1, u));
+  const scaled = clamped * segCount;
+  let i = Math.floor(scaled);
+  if (i >= segCount) i = segCount - 1;
+  return { i, t: scaled - i };
+}
+function controls(points, closed, i) {
+  const n = points.length;
+  const at = (k) => {
+    if (closed) return points[(k % n + n) % n];
+    return points[Math.max(0, Math.min(n - 1, k))];
+  };
+  return [at(i - 1), at(i), at(i + 1), at(i + 2)];
+}
+function segCountOf(points, closed) {
+  const n = points.length;
+  if (n < 2) return 0;
+  return closed ? n : n - 1;
+}
+function pathPoint(points, closed, u, curviness = 1) {
+  const n = points.length;
+  if (n === 0) return [0, 0];
+  if (n === 1) return [points[0][0], points[0][1]];
+  const segs = segCountOf(points, closed);
+  const { i, t } = locate(segs, u);
+  const [p0, p1, p2, p3] = controls(points, closed, i);
+  const t2 = t * t;
+  const t3 = t2 * t;
+  if (curviness === 1) {
+    const f = (a, b, c, d) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3);
+    return [f(p0[0], p1[0], p2[0], p3[0]), f(p0[1], p1[1], p2[1], p3[1])];
+  }
+  const h00 = 2 * t3 - 3 * t2 + 1;
+  const h10 = t3 - 2 * t2 + t;
+  const h01 = -2 * t3 + 3 * t2;
+  const h11 = t3 - t2;
+  const k = curviness * 0.5;
+  const H = (a, b, c, d) => h00 * b + h10 * k * (c - a) + h01 * c + h11 * k * (d - b);
+  return [H(p0[0], p1[0], p2[0], p3[0]), H(p0[1], p1[1], p2[1], p3[1])];
+}
+function pathTangentAngle(points, closed, u, curviness = 1) {
+  const n = points.length;
+  if (n < 2) return 0;
+  const segs = segCountOf(points, closed);
+  const { i, t } = locate(segs, u);
+  const [p0, p1, p2, p3] = controls(points, closed, i);
+  const t2 = t * t;
+  let dx;
+  let dy;
+  if (curviness === 1) {
+    const d = (a, b, c, e) => 0.5 * (-a + c + 2 * (2 * a - 5 * b + 4 * c - e) * t + 3 * (-a + 3 * b - 3 * c + e) * t2);
+    dx = d(p0[0], p1[0], p2[0], p3[0]);
+    dy = d(p0[1], p1[1], p2[1], p3[1]);
+  } else {
+    const g00 = 6 * t2 - 6 * t;
+    const g10 = 3 * t2 - 4 * t + 1;
+    const g01 = -6 * t2 + 6 * t;
+    const g11 = 3 * t2 - 2 * t;
+    const k = curviness * 0.5;
+    const D = (a, b, c, e) => g00 * b + g10 * k * (c - a) + g01 * c + g11 * k * (e - b);
+    dx = D(p0[0], p1[0], p2[0], p3[0]);
+    dy = D(p0[1], p1[1], p2[1], p3[1]);
+  }
+  if (dx === 0 && dy === 0) return 0;
+  return Math.atan2(dy, dx) * 180 / Math.PI;
+}
+
+// ../core/src/compile.ts
+var key = (target, prop) => `${target}.${prop}`;
+function scaleTimeline(tl, k) {
+  switch (tl.kind) {
+    case "seq":
+    case "par":
+      return { ...tl, children: tl.children.map((c) => scaleTimeline(c, k)) };
+    case "stagger":
+      return { ...tl, interval: tl.interval * k, children: tl.children.map((c) => scaleTimeline(c, k)) };
+    case "wait":
+      return { ...tl, duration: tl.duration * k };
+    case "tween":
+      return { ...tl, duration: (tl.duration ?? DEFAULT_TWEEN_DURATION) * k };
+    case "motionPath":
+      return { ...tl, duration: (tl.duration ?? DEFAULT_MOTIONPATH_DURATION) * k };
+    case "to":
+      return {
+        ...tl,
+        duration: (tl.duration ?? DEFAULT_TO_DURATION) * k,
+        ...tl.stagger !== void 0 && { stagger: tl.stagger * k }
+      };
+    case "beat":
+      return {
+        ...tl,
+        children: tl.children.map((c) => scaleTimeline(c, k)),
+        ...tl.gap !== void 0 && { gap: tl.gap * k }
+      };
+  }
+}
+function orderBeats(children) {
+  return children.map((c, i) => ({ c, i, key: c.kind === "beat" && c.order !== void 0 ? c.order : i })).sort((a, b) => a.key - b.key || a.i - b.i).map((x) => x.c);
+}
+function compileScene(ir) {
+  const nodeById = /* @__PURE__ */ new Map();
+  const nodeOrder = [];
+  const collect = (nodes) => {
+    for (const node of nodes) {
+      nodeById.set(node.id, node);
+      nodeOrder.push(node.id);
+      if (node.type === "group") collect(node.children);
+    }
+  };
+  collect(ir.nodes);
+  const initialValues = /* @__PURE__ */ new Map();
+  for (const [id, node] of nodeById) {
+    for (const [prop, value] of Object.entries(node.props)) {
+      if (typeof value === "number" || typeof value === "string") {
+        initialValues.set(key(id, prop), value);
+      }
+    }
+  }
+  if (ir.initial !== void 0) {
+    const override = ir.states?.[ir.initial] ?? {};
+    for (const [id, props] of Object.entries(override)) {
+      for (const [prop, value] of Object.entries(props)) {
+        initialValues.set(key(id, prop), value);
+      }
+    }
+  }
+  const cameraIsNode = nodeById.has("camera");
+  if (!cameraIsNode) {
+    const cam = ir.camera ?? {};
+    initialValues.set(key("camera", "x"), cam.x ?? ir.size.width / 2);
+    initialValues.set(key("camera", "y"), cam.y ?? ir.size.height / 2);
+    initialValues.set(key("camera", "zoom"), cam.zoom ?? 1);
+    initialValues.set(key("camera", "rotation"), cam.rotation ?? 0);
+    if (cam.perspective !== void 0) initialValues.set(key("camera", "perspective"), cam.perspective);
+    if (cam.focus !== void 0) initialValues.set(key("camera", "focus"), cam.focus);
+    if (cam.aperture !== void 0) initialValues.set(key("camera", "aperture"), cam.aperture);
+  }
+  const segments = /* @__PURE__ */ new Map();
+  const motionPaths = /* @__PURE__ */ new Map();
+  const current = new Map(initialValues);
+  const pushSegment = (seg) => {
+    const k = key(seg.target, seg.prop);
+    let list = segments.get(k);
+    if (!list) segments.set(k, list = []);
+    list.push(seg);
+    current.set(k, seg.to);
+  };
+  const currentValue = (target, prop) => {
+    const v = current.get(key(target, prop));
+    if (v !== void 0) return v;
+    if (prop === "opacity" || prop === "scale" || prop === "progress" || prop === "scaleX" || prop === "scaleY") return 1;
+    if (prop === "rotation" || prop === "skewX" || prop === "skewY") return 0;
+    throw new Error(`cannot animate "${prop}" of "${target}": no base value to start from`);
+  };
+  const labelTimes = /* @__PURE__ */ new Map();
+  const beatTimes = /* @__PURE__ */ new Map();
+  const durationOf = (tl, start) => {
+    switch (tl.kind) {
+      case "seq": {
+        let t = start;
+        for (const child of orderBeats(tl.children)) t = durationOf(child, t);
+        return t;
+      }
+      case "par": {
+        let end = start;
+        for (const child of tl.children) end = Math.max(end, durationOf(child, start));
+        return end;
+      }
+      case "stagger": {
+        let end = start;
+        tl.children.forEach((child, i) => {
+          end = Math.max(end, durationOf(child, start + i * tl.interval));
+        });
+        return end;
+      }
+      case "wait":
+        return start + tl.duration;
+      case "tween":
+        return start + (tl.duration ?? DEFAULT_TWEEN_DURATION);
+      case "motionPath":
+        return start + (tl.duration ?? DEFAULT_MOTIONPATH_DURATION);
+      case "to": {
+        const override = ir.states?.[tl.state] ?? {};
+        const duration = tl.duration ?? DEFAULT_TO_DURATION;
+        const si = tl.stagger ?? 0;
+        const targets = nodeOrder.filter(
+          (id) => id in override && (tl.filter === void 0 || tl.filter.includes(id))
+        );
+        return start + duration + Math.max(0, targets.length - 1) * si;
+      }
+      case "beat": {
+        const grouping = { kind: tl.parallel ? "par" : "seq", children: tl.children };
+        const natural = durationOf(grouping, 0);
+        const k = tl.scale ?? (tl.duration !== void 0 ? tl.duration / Math.max(1e-9, natural) : 1);
+        const beatStart = tl.at ?? start + (tl.gap ?? 0);
+        return beatStart + k * natural;
+      }
+    }
+  };
+  const walk = (tl, start) => {
+    const end = walkInner(tl, start);
+    if ("label" in tl && tl.label !== void 0) labelTimes.set(tl.label, { t0: start, t1: end });
+    return end;
+  };
+  const walkInner = (tl, start) => {
+    switch (tl.kind) {
+      case "seq": {
+        let t = start;
+        for (const child of orderBeats(tl.children)) t = walk(child, t);
+        return t;
+      }
+      case "beat": {
+        const grouping = { kind: tl.parallel ? "par" : "seq", children: tl.children };
+        const k = tl.scale ?? (tl.duration !== void 0 ? tl.duration / Math.max(1e-9, durationOf(grouping, 0)) : 1);
+        const inner = k === 1 ? grouping : scaleTimeline(grouping, k);
+        const beatStart = tl.at ?? start + (tl.gap ?? 0);
+        const end = walk(inner, beatStart);
+        beatTimes.set(tl.name, { t0: beatStart, t1: end });
+        labelTimes.set(tl.name, { t0: beatStart, t1: end });
+        return end;
+      }
+      case "par": {
+        let end = start;
+        for (const child of tl.children) end = Math.max(end, walk(child, start));
+        return end;
+      }
+      case "stagger": {
+        let end = start;
+        tl.children.forEach((child, i) => {
+          end = Math.max(end, walk(child, start + i * tl.interval));
+        });
+        return end;
+      }
+      case "wait":
+        return start + tl.duration;
+      case "tween": {
+        const duration = tl.duration ?? DEFAULT_TWEEN_DURATION;
+        for (const [prop, toValue] of Object.entries(tl.props)) {
+          pushSegment({
+            target: tl.target,
+            prop,
+            t0: start,
+            t1: start + duration,
+            from: currentValue(tl.target, prop),
+            to: toValue,
+            ...tl.ease !== void 0 && { ease: tl.ease }
+          });
+        }
+        return start + duration;
+      }
+      case "motionPath": {
+        const duration = tl.duration ?? DEFAULT_MOTIONPATH_DURATION;
+        const points = tl.points;
+        const closed = tl.closed ?? false;
+        const curviness = tl.curviness ?? 1;
+        const autoRotate = tl.autoRotate ?? false;
+        const rotateOffset = tl.rotateOffset ?? 0;
+        let list = motionPaths.get(tl.target);
+        if (!list) motionPaths.set(tl.target, list = []);
+        list.push({ t0: start, t1: start + duration, points, closed, curviness, autoRotate, rotateOffset, ...tl.ease !== void 0 && { ease: tl.ease } });
+        if (points.length > 0) {
+          const [ex, ey] = pathPoint(points, closed, 1, curviness);
+          current.set(key(tl.target, "x"), ex);
+          current.set(key(tl.target, "y"), ey);
+          if (autoRotate) current.set(key(tl.target, "rotation"), pathTangentAngle(points, closed, 1, curviness) + rotateOffset);
+        }
+        return start + duration;
+      }
+      case "to": {
+        const override = ir.states?.[tl.state] ?? {};
+        const duration = tl.duration ?? DEFAULT_TO_DURATION;
+        const staggerInterval = tl.stagger ?? 0;
+        const targets = nodeOrder.filter(
+          (id) => id in override && (tl.filter === void 0 || tl.filter.includes(id))
+        );
+        targets.forEach((id, i) => {
+          const t0 = start + i * staggerInterval;
+          for (const [prop, toValue] of Object.entries(override[id])) {
+            pushSegment({
+              target: id,
+              prop,
+              t0,
+              t1: t0 + duration,
+              from: currentValue(id, prop),
+              to: toValue,
+              ...tl.ease !== void 0 && { ease: tl.ease }
+            });
+          }
+        });
+        const last = Math.max(0, targets.length - 1);
+        return start + duration + last * staggerInterval;
+      }
+    }
+  };
+  const inferredEnd = (ir.timeline ? walk(ir.timeline, 0) : 0) || 0;
+  for (const list of segments.values()) list.sort((a, b) => a.t0 - b.t0);
+  for (const list of motionPaths.values()) list.sort((a, b) => a.t0 - b.t0);
+  const hasCamera = !cameraIsNode && (ir.camera !== void 0 || motionPaths.has("camera") || [...segments.keys()].some((k) => k.startsWith("camera.")));
+  const hasPerspective = !cameraIsNode && (ir.camera?.perspective !== void 0 || segments.has("camera.perspective"));
+  const zSort = !cameraIsNode && ir.camera?.zSort === true && hasPerspective;
+  return {
+    ir,
+    duration: ir.duration ?? (inferredEnd > 0 ? inferredEnd : DEFAULT_STILL_DURATION),
+    segments,
+    motionPaths,
+    initialValues,
+    nodeById,
+    nodeOrder,
+    labelTimes,
+    beatTimes,
+    hasCamera,
+    hasPerspective,
+    zSort
+  };
+}
+
+// ../core/src/validate.ts
+var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY", "blend"];
+var BLEND_MODES = /* @__PURE__ */ new Set([
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "lighten",
+  "darken",
+  "add",
+  "color-dodge",
+  "soft-light",
+  "hard-light",
+  "difference"
+]);
+var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
+var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
+var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective", "focus", "aperture"];
+var PROPS_BY_TYPE = {
+  rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
+  ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
+  line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
+  text: [...COMMON_PROPS, "content", "contentDecimals", "contentThousands", "prefix", "suffix", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
+  image: [...COMMON_PROPS, "src", "width", "height", "fit"],
+  video: [...COMMON_PROPS, "src", "width", "height", "fit", "start", "rate", "clipStart", "volume", "fadeIn", "pan"],
+  path: [...COMMON_PROPS, "d", "fill", "stroke", "strokeWidth", "progress", "originX", "originY"],
+  group: COMMON_PROPS
+};
+var SceneValidationError = class extends Error {
+  constructor(problems) {
+    super(`Scene validation failed:
+${problems.map((p) => `  - ${p}`).join("\n")}`);
+    this.problems = problems;
+    this.name = "SceneValidationError";
+  }
+  problems;
+};
+function validateScene(ir) {
+  const problems = [];
+  const nodeById = /* @__PURE__ */ new Map();
+  const checkPaint = (where, value) => {
+    if (typeof value !== "object" || value === null) return;
+    const g = value;
+    if (g.kind !== "linear" && g.kind !== "radial" && g.kind !== "conic") {
+      problems.push(`${where}: a paint object must be a gradient with kind "linear" / "radial" / "conic"`);
+      return;
+    }
+    if (!Array.isArray(g.stops) || g.stops.length === 0) {
+      problems.push(`${where}: gradient "${g.kind}" needs at least one color stop`);
+      return;
+    }
+    g.stops.forEach((s, i) => {
+      const st = s;
+      if (typeof st?.color !== "string") problems.push(`${where}: gradient stop ${i} needs a color string`);
+      if (typeof st?.offset !== "number" || st.offset < 0 || st.offset > 1) {
+        problems.push(`${where}: gradient stop ${i} "offset" must be a number in 0..1`);
+      }
+    });
+  };
+  const collect = (nodes) => {
+    for (const node of nodes) {
+      if (nodeById.has(node.id)) {
+        problems.push(`duplicate node id "${node.id}" \u2014 every node id must be unique`);
+      }
+      nodeById.set(node.id, node);
+      const props = node.props;
+      checkPaint(`node "${node.id}" fill`, props.fill);
+      checkPaint(`node "${node.id}" stroke`, props.stroke);
+      if (typeof props.blur === "number" && props.blur < 0) problems.push(`node "${node.id}": blur must be >= 0`);
+      if (typeof props.shadowBlur === "number" && props.shadowBlur < 0) problems.push(`node "${node.id}": shadowBlur must be >= 0`);
+      if (typeof props.blend === "string" && !BLEND_MODES.has(props.blend)) problems.push(`node "${node.id}": unknown blend "${props.blend}" \u2014 use ${[...BLEND_MODES].join(", ")}`);
+      if (typeof props.fit === "string" && !IMAGE_FITS.has(props.fit)) problems.push(`node "${node.id}": unknown fit "${props.fit}" \u2014 use ${[...IMAGE_FITS].join(", ")}`);
+      if (node.type === "group") {
+        const clip = node.props.clip;
+        if (clip) {
+          if (clip.kind !== "rect" && clip.kind !== "ellipse") {
+            problems.push(`group "${node.id}" clip: unknown kind "${clip.kind}" \u2014 use "rect" or "ellipse"`);
+          }
+          if (!(clip.width > 0) || !(clip.height > 0)) {
+            problems.push(`group "${node.id}" clip: width and height must be > 0`);
+          }
+        }
+        const matte = node.props.matte;
+        if (matte !== void 0) {
+          if (matte !== "alpha" && matte !== "luma") {
+            problems.push(`group "${node.id}" matte: unknown mode "${String(matte)}" \u2014 use "alpha" or "luma"`);
+          } else if (node.children.length < 2) {
+            problems.push(`group "${node.id}" matte: needs \u22652 children (first masks the rest)`);
+          }
+        }
+        collect(node.children);
+      }
+    }
+  };
+  collect(ir.nodes);
+  const checkProps = (where, nodeId, props) => {
+    if (nodeId === "camera" && !nodeById.has("camera")) {
+      for (const key2 of Object.keys(props)) {
+        if (!CAMERA_PROPS.includes(key2)) {
+          problems.push(`${where}: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}`);
+        }
+      }
+      return;
+    }
+    const node = nodeById.get(nodeId);
+    if (!node) {
+      problems.push(
+        `${where} targets unknown node "${nodeId}" \u2014 known ids: ${[...nodeById.keys()].join(", ")}`
+      );
+      return;
+    }
+    const allowed = PROPS_BY_TYPE[node.type];
+    for (const key2 of Object.keys(props)) {
+      if (!allowed.includes(key2)) {
+        problems.push(
+          `${where}: "${key2}" is not a prop of ${node.type} "${nodeId}" \u2014 valid props: ${allowed.join(", ")}`
+        );
+      }
+    }
+  };
+  const states = ir.states ?? {};
+  for (const [stateName, overrides] of Object.entries(states)) {
+    for (const [nodeId, props] of Object.entries(overrides)) {
+      checkProps(`state "${stateName}"`, nodeId, props);
+    }
+  }
+  if (ir.initial !== void 0 && !(ir.initial in states)) {
+    problems.push(
+      `initial state "${ir.initial}" is not defined \u2014 defined states: ${Object.keys(states).join(", ") || "(none)"}`
+    );
+  }
+  const labels = /* @__PURE__ */ new Set();
+  const checkTimeline = (tl, path2) => {
+    if ("label" in tl && tl.label !== void 0) {
+      if (labels.has(tl.label)) {
+        problems.push(
+          `${path2}: duplicate timeline label "${tl.label}" \u2014 labels are overlay addresses and must be unique`
+        );
+      }
+      labels.add(tl.label);
+    }
+    switch (tl.kind) {
+      case "seq":
+      case "par":
+        tl.children.forEach((c, i) => checkTimeline(c, `${path2}.${tl.kind}[${i}]`));
+        break;
+      case "stagger":
+        if (tl.interval < 0) problems.push(`${path2}: stagger interval must be >= 0`);
+        tl.children.forEach((c, i) => checkTimeline(c, `${path2}.stagger[${i}]`));
+        break;
+      case "to":
+        if (!(tl.state in states)) {
+          problems.push(
+            `${path2}: to("${tl.state}") references an undefined state \u2014 defined states: ${Object.keys(states).join(", ") || "(none)"}`
+          );
+        }
+        if (tl.duration !== void 0 && tl.duration <= 0) {
+          problems.push(`${path2}: to("${tl.state}") duration must be > 0`);
+        }
+        for (const id of tl.filter ?? []) {
+          if (!nodeById.has(id)) problems.push(`${path2}: filter contains unknown node "${id}"`);
+        }
+        break;
+      case "tween":
+        checkProps(path2, tl.target, tl.props);
+        if (tl.duration !== void 0 && tl.duration <= 0) {
+          problems.push(`${path2}: tween duration must be > 0`);
+        }
+        break;
+      case "motionPath": {
+        const node = nodeById.get(tl.target);
+        const isSceneCamera = tl.target === "camera" && !node;
+        if (!isSceneCamera) {
+          if (!node) {
+            problems.push(
+              `${path2}: motionPath targets unknown node "${tl.target}" \u2014 known ids: ${[...nodeById.keys()].join(", ")}`
+            );
+          } else if (node.type === "line") {
+            problems.push(`${path2}: motionPath cannot target a line (no x/y) \u2014 "${tl.target}"`);
+          }
+        }
+        if (tl.points.length < 1) problems.push(`${path2}: motionPath "${tl.target}" needs at least 1 point`);
+        if (tl.duration !== void 0 && tl.duration <= 0) {
+          problems.push(`${path2}: motionPath "${tl.target}" duration must be > 0`);
+        }
+        if (tl.curviness !== void 0 && tl.curviness < 0) {
+          problems.push(`${path2}: motionPath "${tl.target}" curviness must be >= 0`);
+        }
+        break;
+      }
+      case "wait":
+        if (tl.duration < 0) problems.push(`${path2}: wait duration must be >= 0`);
+        break;
+      case "beat":
+        if (labels.has(tl.name)) {
+          problems.push(
+            `${path2}: duplicate timeline label "${tl.name}" (beat name) \u2014 labels are overlay addresses and must be unique`
+          );
+        }
+        labels.add(tl.name);
+        if (tl.duration !== void 0 && tl.duration <= 0) {
+          problems.push(`${path2}: beat "${tl.name}" duration must be > 0`);
+        }
+        if (tl.scale !== void 0 && tl.scale <= 0) {
+          problems.push(`${path2}: beat "${tl.name}" scale must be > 0`);
+        }
+        for (const id of tl.nodes ?? []) {
+          if (!nodeById.has(id)) {
+            problems.push(
+              `${path2}: beat "${tl.name}" owns unknown node "${id}" \u2014 known ids: ${[...nodeById.keys()].join(", ")}`
+            );
+          }
+        }
+        tl.children.forEach((c, i) => checkTimeline(c, `${path2}.beat(${tl.name})[${i}]`));
+        break;
+    }
+  };
+  if (ir.timeline) checkTimeline(ir.timeline, "timeline");
+  for (const [i, b] of (ir.behaviors ?? []).entries()) {
+    checkProps(`behaviors[${i}]`, b.target, { [b.prop]: 0 });
+  }
+  if (ir.duration !== void 0 && ir.duration <= 0) {
+    problems.push("scene duration must be > 0");
+  }
+  if (ir.camera) {
+    if (nodeById.has("camera")) {
+      problems.push(`camera: a node is already named "camera" \u2014 rename that node or drop the scene camera (the id "camera" can't be both)`);
+    }
+    for (const [key2, value] of Object.entries(ir.camera)) {
+      if (key2 === "zSort") {
+        if (typeof value !== "boolean") problems.push(`camera.zSort must be a boolean`);
+      } else if (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}, zSort`);
+      } else if (typeof value !== "number") {
+        problems.push(`camera.${key2} must be a number`);
+      } else if (key2 === "perspective" && value <= 0) {
+        problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
+      } else if (key2 === "aperture" && value < 0) {
+        problems.push(`camera.aperture must be >= 0 (blur px per unit depth) \u2014 0 disables depth of field`);
+      }
+    }
+  }
+  const SFX_NAMES = ["whoosh", "pop", "tick", "rise", "shimmer", "thud"];
+  for (const [i, cue] of (ir.audio?.cues ?? []).entries()) {
+    if (typeof cue.at === "string" && !labels.has(cue.at)) {
+      problems.push(
+        `audio.cues[${i}]: unknown timeline label "${cue.at}" \u2014 known labels: ${[...labels].join(", ") || "(none)"}`
+      );
+    }
+    if (typeof cue.at === "number" && cue.at < 0) {
+      problems.push(`audio.cues[${i}]: "at" must be >= 0`);
+    }
+    if (cue.sfx === void 0 === (cue.file === void 0)) {
+      problems.push(`audio.cues[${i}]: exactly one of "sfx" or "file" is required`);
+    }
+    if (cue.sfx !== void 0 && !SFX_NAMES.includes(cue.sfx)) {
+      problems.push(`audio.cues[${i}]: unknown sfx "${cue.sfx}" \u2014 valid: ${SFX_NAMES.join(", ")}`);
+    }
+    if (cue.gain !== void 0 && cue.gain < 0) {
+      problems.push(`audio.cues[${i}]: gain must be >= 0`);
+    }
+    if (cue.fadeIn !== void 0 && cue.fadeIn < 0) {
+      problems.push(`audio.cues[${i}]: fadeIn must be >= 0`);
+    }
+    if (cue.fadeOut !== void 0 && cue.fadeOut < 0) {
+      problems.push(`audio.cues[${i}]: fadeOut must be >= 0`);
+    }
+    if (cue.pan !== void 0 && (cue.pan < -1 || cue.pan > 1)) {
+      problems.push(`audio.cues[${i}]: pan must be in [-1, 1] (-1 left \u2026 +1 right)`);
+    }
+  }
+  const duck = ir.audio?.bgm?.duck;
+  if (typeof duck === "object" && duck !== null && duck.depth !== void 0 && (duck.depth < 0 || duck.depth > 1)) {
+    problems.push("audio.bgm.duck.depth must be in [0, 1]");
+  }
+  if (ir.audio?.bgm?.file !== void 0 && ir.audio.bgm.synth !== void 0) {
+    problems.push('audio.bgm: use either "file" or "synth", not both');
+  }
+  if (problems.length > 0) throw new SceneValidationError(problems);
+}
+var TRANSITIONS = ["cut", "crossfade"];
+function validateComposition(comp) {
+  const problems = [];
+  if (comp.scenes.length === 0) problems.push("composition has no scenes");
+  const seen = /* @__PURE__ */ new Set();
+  for (const [i, entry] of comp.scenes.entries()) {
+    const where = `scenes[${i}]`;
+    try {
+      validateScene(entry.scene);
+    } catch (err) {
+      if (err instanceof SceneValidationError) {
+        for (const p of err.problems) problems.push(`${where} (scene "${entry.scene.id}"): ${p}`);
+      } else throw err;
+    }
+    if (seen.has(entry.scene.id)) {
+      problems.push(`${where}: duplicate scene id "${entry.scene.id}" \u2014 scene ids must be unique in a composition`);
+    }
+    seen.add(entry.scene.id);
+    if (entry.transition !== void 0 && !TRANSITIONS.includes(entry.transition)) {
+      problems.push(`${where}: unknown transition "${entry.transition}" \u2014 valid: ${TRANSITIONS.join(", ")}`);
+    }
+    if (typeof entry.at === "string" && Number.isNaN(Number(entry.at))) {
+      problems.push(`${where}: "at" string "${entry.at}" is not a number (use "-0.5"/"+0.5" or a number)`);
+    }
+    if (typeof entry.at === "number" && entry.at < 0) {
+      problems.push(`${where}: absolute "at" must be >= 0`);
+    }
+  }
+  if (problems.length > 0) throw new SceneValidationError(problems);
+}
+
+// ../core/src/presets.ts
+var SET = 1 / 120;
+
+// ../core/src/interpolate.ts
+var BACK_C1 = 1.70158;
+var BACK_C2 = BACK_C1 * 1.525;
+var BACK_C3 = BACK_C1 + 1;
+var ELASTIC_C4 = 2 * Math.PI / 3;
+var ELASTIC_C5 = 2 * Math.PI / 4.5;
+function springEase(stiffness, damping, velocity) {
+  const K = 5;
+  const zeta = Math.min(0.999, Math.max(0.05, damping / (2 * Math.sqrt(Math.max(1e-6, stiffness)))));
+  const wd = K / zeta * Math.sqrt(1 - zeta * zeta);
+  const coef = (K - velocity) / wd;
+  return (u) => {
+    if (u <= 0) return 0;
+    if (u >= 1) return 1;
+    return 1 - Math.exp(-K * u) * (Math.cos(wd * u) + coef * Math.sin(wd * u));
+  };
+}
+function easeOutBounce(u) {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (u < 1 / d1) return n1 * u * u;
+  if (u < 2 / d1) return n1 * (u -= 1.5 / d1) * u + 0.75;
+  if (u < 2.5 / d1) return n1 * (u -= 2.25 / d1) * u + 0.9375;
+  return n1 * (u -= 2.625 / d1) * u + 0.984375;
+}
+var EASE_TABLE = {
+  linear: (u) => u,
+  easeInQuad: (u) => u * u,
+  easeOutQuad: (u) => 1 - (1 - u) * (1 - u),
+  easeInOutQuad: (u) => u < 0.5 ? 2 * u * u : 1 - (-2 * u + 2) ** 2 / 2,
+  easeInCubic: (u) => u ** 3,
+  easeOutCubic: (u) => 1 - (1 - u) ** 3,
+  easeInOutCubic: (u) => u < 0.5 ? 4 * u ** 3 : 1 - (-2 * u + 2) ** 3 / 2,
+  easeInQuart: (u) => u ** 4,
+  easeOutQuart: (u) => 1 - (1 - u) ** 4,
+  easeInOutQuart: (u) => u < 0.5 ? 8 * u ** 4 : 1 - (-2 * u + 2) ** 4 / 2,
+  easeInExpo: (u) => u === 0 ? 0 : 2 ** (10 * u - 10),
+  easeOutExpo: (u) => u === 1 ? 1 : 1 - 2 ** (-10 * u),
+  easeInOutExpo: (u) => u === 0 ? 0 : u === 1 ? 1 : u < 0.5 ? 2 ** (20 * u - 10) / 2 : (2 - 2 ** (-20 * u + 10)) / 2,
+  // --- expressive eases (GSAP's signature feel) — standard Penner equations ---
+  // back: overshoots past the target then settles (pop / snap)
+  easeInBack: (u) => BACK_C3 * u ** 3 - BACK_C1 * u * u,
+  easeOutBack: (u) => 1 + BACK_C3 * (u - 1) ** 3 + BACK_C1 * (u - 1) ** 2,
+  easeInOutBack: (u) => u < 0.5 ? (2 * u) ** 2 * ((BACK_C2 + 1) * 2 * u - BACK_C2) / 2 : ((2 * u - 2) ** 2 * ((BACK_C2 + 1) * (2 * u - 2) + BACK_C2) + 2) / 2,
+  // elastic: rings around the target before settling (playful spring)
+  easeInElastic: (u) => u === 0 ? 0 : u === 1 ? 1 : -(2 ** (10 * u - 10)) * Math.sin((u * 10 - 10.75) * ELASTIC_C4),
+  easeOutElastic: (u) => u === 0 ? 0 : u === 1 ? 1 : 2 ** (-10 * u) * Math.sin((u * 10 - 0.75) * ELASTIC_C4) + 1,
+  easeInOutElastic: (u) => u === 0 ? 0 : u === 1 ? 1 : u < 0.5 ? -(2 ** (20 * u - 10) * Math.sin((20 * u - 11.125) * ELASTIC_C5)) / 2 : 2 ** (-20 * u + 10) * Math.sin((20 * u - 11.125) * ELASTIC_C5) / 2 + 1,
+  // bounce: drops and bounces to rest (lands without overshoot)
+  easeInBounce: (u) => 1 - easeOutBounce(1 - u),
+  easeOutBounce,
+  easeInOutBounce: (u) => u < 0.5 ? (1 - easeOutBounce(1 - 2 * u)) / 2 : (1 + easeOutBounce(2 * u - 1)) / 2,
+  // damped-spring presets (ζ from damping/(2√stiffness)): 0.5 / 0.30 / 0.90
+  spring: springEase(100, 10, 0),
+  springBouncy: springEase(180, 8, 0),
+  springStiff: springEase(210, 26, 0)
+};
+var EASE_NAMES = Object.keys(EASE_TABLE);
+
+// ../core/src/evaluate.ts
+var DEG = Math.PI / 180;
+
+// ../core/src/assets.ts
+function collectSrcs(ir, type) {
+  const srcs = /* @__PURE__ */ new Set();
+  const ids = /* @__PURE__ */ new Set();
+  const walkNodes = (nodes) => {
+    for (const node of nodes) {
+      if (node.type === type) {
+        ids.add(node.id);
+        srcs.add(node.props.src);
+      }
+      if (node.type === "group") walkNodes(node.children);
+    }
+  };
+  walkNodes(ir.nodes);
+  for (const overrides of Object.values(ir.states ?? {})) {
+    for (const [nodeId, props] of Object.entries(overrides)) {
+      if (ids.has(nodeId) && typeof props.src === "string") srcs.add(props.src);
+    }
+  }
+  const walkTimeline = (step) => {
+    if (!step) return;
+    if (step.kind === "seq" || step.kind === "par" || step.kind === "stagger") {
+      for (const child of step.children) walkTimeline(child);
+    } else if (step.kind === "tween" && ids.has(step.target)) {
+      const src = step.props.src;
+      if (typeof src === "string") srcs.add(src);
+    }
+  };
+  walkTimeline(ir.timeline);
+  return [...srcs];
+}
+function collectImageSrcs(ir) {
+  return collectSrcs(ir, "image");
+}
+function collectVideoSrcs(ir) {
+  return collectSrcs(ir, "video");
+}
+
+// ../render-cli/src/images.ts
+var MIME = {
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".webp": "image/webp"
+};
+async function buildImageAssets(ir, sceneDir) {
+  const assets = {};
+  for (const src of collectImageSrcs(ir)) {
+    const mime = MIME[extname(src).toLowerCase()];
+    if (!mime) {
+      throw new Error(
+        `image "${src}": unsupported format "${extname(src)}" \u2014 supported: ${Object.keys(MIME).join(" ")}`
+      );
+    }
+    const candidates = [isAbsolute(src) ? src : null, resolve(sceneDir, src)].filter(
+      (c) => c !== null
+    );
+    const found = candidates.find((c) => existsSync(c));
+    if (!found) {
+      throw new Error(`image "${src}" not found (tried: ${candidates.join(", ")})`);
+    }
+    const data = await readFile2(found);
+    assets[src] = `data:${mime};base64,${data.toString("base64")}`;
+  }
+  return assets;
+}
+
+// ../render-cli/src/videos.ts
+import { spawn } from "node:child_process";
+import { mkdtemp, readFile as readFile3, readdir, rm } from "node:fs/promises";
+import { existsSync as existsSync2 } from "node:fs";
+import { tmpdir } from "node:os";
+import { extname as extname2, isAbsolute as isAbsolute2, join as join2, resolve as resolve2 } from "node:path";
+var VIDEO_EXT = /* @__PURE__ */ new Set([".mp4", ".mov", ".webm", ".m4v", ".mkv"]);
+function runFfmpeg(args) {
+  return new Promise((resolve5, reject) => {
+    const proc = spawn("ffmpeg", args, { stdio: ["ignore", "ignore", "pipe"] });
+    let stderr = "";
+    proc.stderr.on("data", (d) => stderr += d.toString());
+    proc.on(
+      "close",
+      (code) => code === 0 ? resolve5() : reject(new Error(`ffmpeg exited ${code}:
+${stderr.slice(-2e3)}`))
+    );
+    proc.on("error", reject);
+  });
+}
+function neededSeconds(node, duration) {
+  const start = node.props.start ?? 0;
+  const rate = node.props.rate ?? 1;
+  const clipStart = node.props.clipStart ?? 0;
+  return clipStart + Math.max(0, duration - start) * Math.max(0, rate) + 1 / 30;
+}
+function videoNodes(ir) {
+  const out = [];
+  const walk = (nodes) => {
+    for (const n of nodes) {
+      if (n.type === "video") out.push(n);
+      if (n.type === "group") walk(n.children);
+    }
+  };
+  walk(ir.nodes);
+  return out;
+}
+async function buildVideoFrameAssets(ir, sceneDir, fps, duration) {
+  const srcs = collectVideoSrcs(ir);
+  if (srcs.length === 0) return {};
+  const nodes = videoNodes(ir);
+  const reachBySrc = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const reach = neededSeconds(n, duration);
+    reachBySrc.set(n.props.src, Math.max(reachBySrc.get(n.props.src) ?? 0, reach));
+  }
+  const assets = {};
+  for (const src of srcs) {
+    if (!VIDEO_EXT.has(extname2(src).toLowerCase())) {
+      throw new Error(
+        `video "${src}": unsupported format "${extname2(src)}" \u2014 supported: ${[...VIDEO_EXT].join(" ")}`
+      );
+    }
+    const candidates = [isAbsolute2(src) ? src : null, resolve2(sceneDir, src)].filter(
+      (c) => c !== null
+    );
+    const found = candidates.find((c) => existsSync2(c));
+    if (!found) throw new Error(`video "${src}" not found (tried: ${candidates.join(", ")})`);
+    const dir = await mkdtemp(join2(tmpdir(), "reframe-vframes-"));
+    try {
+      const seconds = Math.max(1 / fps, reachBySrc.get(src) ?? duration);
+      await runFfmpeg([
+        "-y",
+        "-i",
+        found,
+        "-t",
+        seconds.toFixed(3),
+        "-vf",
+        `fps=${fps},scale='min(iw,1280)':-2`,
+        "-q:v",
+        "4",
+        join2(dir, "%05d.jpg")
+      ]);
+      const files = (await readdir(dir)).filter((f) => f.endsWith(".jpg")).sort();
+      assets[src] = await Promise.all(
+        files.map(async (f) => `data:image/jpeg;base64,${(await readFile3(join2(dir, f))).toString("base64")}`)
+      );
+      if (assets[src].length === 0) throw new Error(`video "${src}": ffmpeg extracted no frames`);
+    } finally {
+      await rm(dir, { recursive: true, force: true });
+    }
+  }
+  return assets;
+}
+function resolveTiming(ir, opts) {
+  const fps = opts.fps ?? ir.fps ?? 30;
+  const duration = opts.duration ?? compileScene(ir).duration;
+  return { fps, duration };
+}
+
+// ../render-cli/src/vclock.ts
+var VCLOCK_SOURCE = String.raw`
+(() => {
+  let now = 0;
+  let nextId = 1;
+  let rafQueue = [];
+  const timers = [];
+
+  Date.now = () => now;
+  performance.now = () => now;
+
+  window.requestAnimationFrame = (cb) => {
+    const id = nextId++;
+    rafQueue.push({ id, cb });
+    return id;
+  };
+  window.cancelAnimationFrame = (id) => {
+    rafQueue = rafQueue.filter((r) => r.id !== id);
+  };
+
+  const addTimer = (cb, delay, args, interval) => {
+    const id = nextId++;
+    timers.push({
+      id,
+      cb: () => cb(...args),
+      due: now + Math.max(Number(delay) || 0, 0),
+      interval: interval ? Math.max(Number(delay) || 0, 1) : undefined,
+    });
+    return id;
+  };
+  const removeTimer = (id) => {
+    const i = timers.findIndex((t) => t.id === id);
+    if (i >= 0) timers.splice(i, 1);
+  };
+  window.setTimeout = (cb, delay = 0, ...args) =>
+    typeof cb === "function" ? addTimer(cb, delay, args, false) : 0;
+  window.setInterval = (cb, delay = 0, ...args) =>
+    typeof cb === "function" ? addTimer(cb, delay, args, true) : 0;
+  window.clearTimeout = removeTimer;
+  window.clearInterval = removeTimer;
+
+  window.__vclock = {
+    now: () => now,
+    advanceTo(targetMs) {
+      // Fire due timers in order, letting fired callbacks schedule new ones.
+      for (;;) {
+        timers.sort((a, b) => a.due - b.due);
+        const next = timers[0];
+        if (!next || next.due > targetMs) break;
+        now = next.due;
+        if (next.interval !== undefined) next.due += next.interval;
+        else timers.shift();
+        next.cb();
+      }
+      now = targetMs;
+      // One rAF batch per frame; callbacks registered during the batch run
+      // on the next advanceTo (matching real browser semantics).
+      const batch = rafQueue;
+      rafQueue = [];
+      for (const { cb } of batch) cb(now);
+    },
+  };
+})();
+`;
+
+// ../render-cli/src/frameLoop.ts
+async function injectFonts(page) {
+  await page.addStyleTag({ content: await fontFaceCss() });
+  await page.evaluate(async () => {
+    await Promise.all([...document.fonts].map((f) => f.load()));
+    await document.fonts.ready;
+  });
+}
+async function withPage(size, fn) {
+  const browser = await chromium.launch({
+    args: ["--force-color-profile=srgb", "--font-render-hinting=none"]
+  });
+  try {
+    const page = await browser.newPage({ viewport: size, deviceScaleFactor: 1 });
+    return await fn(page);
+  } finally {
+    await browser.close();
+  }
+}
+var bundleCache = null;
+async function browserBundle() {
+  if (bundleCache) return bundleCache;
+  if (true) {
+    const { readFile: readFile5 } = await import("node:fs/promises");
+    bundleCache = await readFile5(
+      join3(dirname2(fileURLToPath2(import.meta.url)), "browserEntry.js"),
+      "utf8"
+    );
+    return bundleCache;
+  }
+  const entry = join3(dirname2(fileURLToPath2(import.meta.url)), "browserEntry.ts");
+  const result = await build({
+    entryPoints: [entry],
+    bundle: true,
+    write: false,
+    format: "iife",
+    target: "es2022"
+  });
+  bundleCache = result.outputFiles[0].text;
+  return bundleCache;
+}
+async function renderFrameAt(ir, t, opts = {}) {
+  const sceneDir = opts.sceneDir ?? process.cwd();
+  const assets = await buildImageAssets(ir, sceneDir);
+  const { fps, duration } = resolveTiming(ir, {});
+  const videoAssets = await buildVideoFrameAssets(ir, sceneDir, fps, duration);
+  const bundle2 = await browserBundle();
+  return withPage(ir.size, async (page) => {
+    await page.setContent(`<!DOCTYPE html><html><body style="margin:0;background:#000"></body></html>`);
+    await injectFonts(page);
+    await page.addScriptTag({ content: bundle2 });
+    await page.evaluate(
+      ([sceneIr, imageAssets, vAssets]) => window.__reframe.init(sceneIr, imageAssets, vAssets),
+      [ir, assets, videoAssets]
+    );
+    const dataUrl = await page.evaluate((tt) => window.__reframe.renderFrame(tt), t);
+    return Buffer.from(dataUrl.slice(22), "base64");
+  });
+}
+
+// ../render-cli/src/loadScene.ts
+import { build as build2 } from "esbuild";
+import { readFile as readFile4 } from "node:fs/promises";
+import { dirname as dirname3, resolve as resolve3 } from "node:path";
+import { fileURLToPath as fileURLToPath3 } from "node:url";
+var HERE = dirname3(fileURLToPath3(import.meta.url));
+var CORE_ENTRY = true ? resolve3(HERE, "index.js") : resolve3(HERE, "..", "..", "core", "src", "index.ts");
+var SceneLoadError = class extends Error {
+  kind;
+  constructor(kind, message, options) {
+    super(message, options);
+    this.name = "SceneLoadError";
+    this.kind = kind;
+  }
+};
+var clean = (err) => (err instanceof Error ? err.message : String(err)).replace(
+  /data:text\/javascript;base64,[A-Za-z0-9+/=]+/g,
+  "<scene bundle>"
+);
+var ALIAS = { "@reframe/core": CORE_ENTRY, "reframe-video": CORE_ENTRY };
+async function bundle(input) {
+  const common = {
+    bundle: true,
+    format: "esm",
+    platform: "neutral",
+    write: false,
+    logLevel: "silent",
+    sourcemap: "inline",
+    alias: ALIAS
+  };
+  try {
+    const out = await build2(
+      "path" in input ? { ...common, entryPoints: [input.path] } : { ...common, stdin: { contents: input.code, resolveDir: input.resolveDir, loader: "ts", sourcefile: "scene.ts" } }
+    );
+    return out.outputFiles[0].text;
+  } catch (err) {
+    throw new SceneLoadError("bundle", clean(err), { cause: err });
+  }
+}
+async function importDefault(code, label) {
+  let mod;
+  try {
+    mod = await import(`data:text/javascript;base64,${Buffer.from(code).toString("base64")}`);
+  } catch (err) {
+    const kind = err instanceof Error && err.name === "SceneValidationError" ? "validation" : "eval";
+    throw new SceneLoadError(kind, clean(err), { cause: err });
+  }
+  if (mod.default === void 0) throw new SceneLoadError("eval", `${label} must default-export a scene or composition`);
+  return mod.default;
+}
+async function loadDefault(path2) {
+  if (path2.endsWith(".json")) {
+    try {
+      return JSON.parse(await readFile4(path2, "utf8"));
+    } catch (err) {
+      throw new SceneLoadError("eval", `failed to read ${path2}: ${clean(err)}`, { cause: err });
+    }
+  }
+  return importDefault(await bundle({ path: path2 }), path2);
+}
+function isComposition(def) {
+  return typeof def === "object" && def !== null && Array.isArray(def.scenes);
+}
+function asScene(def, label) {
+  if (isComposition(def)) {
+    throw new SceneLoadError("validation", `${label} is a composition \u2014 render it directly, not as a single scene`);
+  }
+  try {
+    validateScene(def);
+  } catch (err) {
+    throw new SceneLoadError("validation", clean(err), { cause: err });
+  }
+  return def;
+}
+async function loadModule(path2) {
+  const def = await loadDefault(path2);
+  if (isComposition(def)) {
+    try {
+      validateComposition(def);
+    } catch (err) {
+      throw new SceneLoadError("validation", clean(err), { cause: err });
+    }
+    return { kind: "composition", ir: def };
+  }
+  return { kind: "scene", ir: asScene(def, path2) };
+}
+
+// ../render-cli/src/frame.ts
+async function main() {
+  const argv = process.argv.slice(2);
+  const input = argv[0];
+  if (!input || input.startsWith("-")) {
+    console.error("usage: reframe frame <scene.ts|.json> [--t <sec>] [-o out.png]");
+    process.exit(2);
+  }
+  let t = 0;
+  let out = "";
+  for (let i = 1; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--t") t = Number(argv[++i]);
+    else if (a === "-o") out = argv[++i];
+    else {
+      console.error(`unknown argument: ${a}`);
+      process.exit(2);
+    }
+  }
+  if (!Number.isFinite(t) || t < 0) {
+    console.error("--t must be a non-negative number of seconds");
+    process.exit(2);
+  }
+  const scenePath = resolve4(input);
+  const loaded = await loadModule(scenePath);
+  if (loaded.kind !== "scene") {
+    console.error("frame needs a single scene (not a composition)");
+    process.exit(2);
+  }
+  const buf = await renderFrameAt(loaded.ir, t, { sceneDir: dirname4(scenePath) });
+  const outPath = out ? resolve4(out) : resolve4(`${loaded.ir.id}.png`);
+  await writeFile(outPath, buf);
+  console.log(outPath);
+}
+main().catch((err) => {
+  console.error(err instanceof Error ? err.message : String(err));
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reframe-video",
-  "version": "0.6.19",
+  "version": "0.6.20",
   "description": "Declarative motion graphics that AI can write and humans can tweak — human edits survive AI regeneration. Deterministic mp4 renders from a plain-data scene format.",
   "keywords": [
     "motion-graphics",
@@ -43,7 +43,9 @@
     "dist",
     "assets",
     "guides",
-    "preview"
+    "preview",
+    ".claude-plugin",
+    "skills"
   ],
   "engines": {
     "node": ">=20"

package/skills/reframe/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: reframe
+description: Create and iterate motion-graphics videos (mp4) — title cards, lower thirds, kinetic typography, product teasers, data-driven video batches. Use when the user asks to make, edit, retime, personalize, or add sound to an animated video. Scenes are declarative data; renders are deterministic; human edits survive regeneration.
+---
+
+# reframe — motion graphics as addressable data
+
+All commands run through npx; no install or project setup is needed. The
+runtime needs ffmpeg on PATH and a one-time `npx playwright install chromium`
+(the render command prints an actionable hint if either is missing).
+
+## Creating a scene
+
+1. **Read the guide first** — it is the complete, current syntax (~1,700
+   tokens) and one read is enough to write valid scenes:
+   `npx -y reframe-video guide`
+2. Write a single self-contained `<name>.ts` in the user's directory
+   (`npx -y reframe-video new <name>` scaffolds a documented starter).
+   Scenes must be pure functions of time: no `Math.random()`/`Date` — use
+   `wiggle` with a seed. Give every node a meaningful stable `id` and label
+   the key timeline moments — those names are addresses for everything below.
+3. Render and verify: `npx -y reframe-video render <name>.ts` → `out/<name>.mp4`.
+
+## Directing a high-end piece (cinematic / reference-faithful)
+
+Simple jobs (a lower-third, a logo sting, a KPI card) just work from the guide.
+But a CINEMATIC or REFERENCE-FAITHFUL piece (a product teaser, a UI/session
+reproduction, a title sequence) needs a director's process — **read it first**:
+`npx -y reframe-video guide --directing`. The short version:
+
+1. Get the spec from the user: concept, **references** (screenshots / a reference
+   video / pasted real content — save them to disk), exact brand colors, length +
+   aspect, and tone. Vague prompts are why these take many rounds.
+2. **Storyboard the beats** with `beat("setup"/"rising"/"climax"/…)` BEFORE animating.
+3. **Match references with the `diff` tool** instead of eyeballing:
+   `npx -y reframe-video diff ref.png --mode grid` (measure a screenshot),
+   then `... diff ref.png scene.ts --mode side|diff` (compare a render) → fix → repeat.
+4. Apply cinematic craft: camera push-in per beat (`cameraTo` in `par`), curved
+   entrances (`motionPath` + `easeOutBack`), fake/real depth, layered `oscillate`
+   idle, and label-anchored sound.
+5. **Verify objectively**: `... labels` (exact beat seconds), `... motion out.mp4`
+   (makes "more dynamic" measurable), `... trace ref.mp4 --apply scene.ts` (borrow a
+   reference VIDEO's timing), `... preview` (hand-tune → overlay that survives regen).
+
+## Modifying an existing scene — the contract
+
+Before rewriting any existing scene, read the regeneration contract:
+`npx -y reframe-video guide --regen`. The core rule: **never rename node ids,
+state names, or timeline labels for concepts that survive the redesign** —
+the user's overlay documents hold their hand edits at those addresses.
+
+The user may keep personal edits in an overlay JSON and render with
+`--overlay <file>`. Check the conversation for overlay usage. Two situations
+to handle explicitly:
+
+- After your rewrite, the render's compose report lists orphaned edits for
+  concepts that were genuinely removed — relay that report to the user; never
+  let an edit disappear silently.
+- If the user asks you to change a property their overlay already overrides,
+  editing the scene alone will be invisible in their renders. Resolve the
+  mask (update the scene AND remove/update the superseded overlay entry) and
+  tell them why.
+
+## Other capabilities
+
+- **Batch**: `npx -y reframe-video batch scene.ts data.json` — one mp4 per
+  data row; row keys are overlay addresses (`nodes.<id>.<prop>`,
+  `timeline.<label>.duration`, ...). CSV works too (headers = addresses).
+- **Preview editor**: `npx -y reframe-video preview` — scrub/play/knobs for
+  scenes in the current directory; the user's knob edits export as an overlay
+  JSON they can pass to render.
+- **Audio**: `scene.audio` cues anchor to timeline labels, so sound follows
+  retiming and regeneration. Procedural sfx (whoosh/pop/tick/rise/shimmer/
+  thud) plus bundled CC0 samples (mechanical keypresses, clicks). The guide's
+  Audio section has the schema.
+- **Motion check**: `npx -y reframe-video motion out/<name>.mp4` prints a
+  calibrated motion profile (speeds, static fraction, discontinuities) —
+  useful to verify a vague request like "make it more dynamic" objectively.
+- **Image sequences** (the "glyph reveal" / stop-motion format): generated
+  stills become `image` nodes stacked in painter's order; hard cuts are
+  0.01s opacity steps every ~0.15s, a slow camera-group scale tween adds the
+  push-in, `wiggle` adds shake, and a label per cut anchors a tick sfx.
+  Keep frame ids stable (`frame-0..N`) so the user can swap any plate via
+  overlay or batch row (`nodes.frame-3.src`). Image `src` paths resolve
+  relative to the scene file.
+
+## Verification habits
+
+Render after every change. For visual checks, extract a few frames with
+ffmpeg and look at them. Same input renders byte-identically, so "it changed"
+or "it didn't change" is always provable.