reframe-video 0.5.0 → 0.6.1

package/dist/bin.js

@@ -153,6 +153,14 @@ function compileScene(ir) {
       }
     }
   }
+  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);
+  }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
   const current = new Map(initialValues);
@@ -313,6 +321,7 @@ function compileScene(ir) {
   const inferredEnd = ir.timeline ? walk(ir.timeline, 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.")));
   return {
     ir,
     duration: ir.duration ?? inferredEnd,
@@ -322,7 +331,8 @@ function compileScene(ir) {
     nodeById,
     nodeOrder,
     labelTimes,
-    beatTimes
+    beatTimes,
+    hasCamera
   };
 }
 var key;
@@ -339,12 +349,34 @@ var init_compile = __esm({
 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 (node.type === "group") {
         const clip = node.props.clip;
         if (clip) {
@@ -361,6 +393,14 @@ function validateScene(ir) {
   };
   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(
@@ -428,12 +468,15 @@ function validateScene(ir) {
         break;
       case "motionPath": {
         const node = nodeById.get(tl.target);
-        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}"`);
+        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) {
@@ -478,6 +521,18 @@ function validateScene(ir) {
   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 (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}`);
+      } else if (typeof value !== "number") {
+        problems.push(`camera.${key2} must be a number`);
+      }
+    }
+  }
   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)) {
@@ -536,16 +591,17 @@ function validateComposition(comp) {
   }
   if (problems.length > 0) throw new SceneValidationError(problems);
 }
-var COMMON_PROPS, PROPS_BY_TYPE, SceneValidationError, TRANSITIONS;
+var COMMON_PROPS, CAMERA_PROPS, PROPS_BY_TYPE, SceneValidationError, TRANSITIONS;
 var init_validate = __esm({
   "../core/src/validate.ts"() {
     "use strict";
-    COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor"];
+    COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
+    CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
     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"],
-      text: [...COMMON_PROPS, "content", "contentDecimals", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
+      text: [...COMMON_PROPS, "content", "contentDecimals", "contentThousands", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
       image: [...COMMON_PROPS, "src", "width", "height"],
       path: [...COMMON_PROPS, "d", "fill", "stroke", "strokeWidth", "progress", "originX", "originY"],
       group: COMMON_PROPS
@@ -857,6 +913,21 @@ var init_compose = __esm({
   }
 });
 
+// ../core/src/camera.ts
+var init_camera = __esm({
+  "../core/src/camera.ts"() {
+    "use strict";
+    init_dsl();
+  }
+});
+
+// ../core/src/gradient.ts
+var init_gradient = __esm({
+  "../core/src/gradient.ts"() {
+    "use strict";
+  }
+});
+
 // ../core/src/presets.ts
 function makeRng(seed) {
   let a = seed >>> 0 || 2654435769;
@@ -1249,6 +1320,8 @@ var init_evaluate = __esm({
   "../core/src/evaluate.ts"() {
     "use strict";
     init_behaviors();
+    init_camera();
+    init_gradient();
     init_interpolate();
     init_path();
   }
@@ -1310,6 +1383,8 @@ var init_src = __esm({
     init_compose();
     init_compile();
     init_path();
+    init_camera();
+    init_gradient();
     init_presets();
     init_devicePreset();
     init_cursor();
@@ -2334,6 +2409,7 @@ var ROOT2 = PACKAGED ? resolve4(HERE2, "..") : resolve4(HERE2, "..", "..", "..")
 var USER_CWD = process.env.INIT_CWD ?? process.cwd();
 var RENDER_CLI = PACKAGED ? join6(ROOT2, "dist", "cli.js") : join6(ROOT2, "packages", "render-cli", "src", "cli.ts");
 var LABELS = PACKAGED ? join6(ROOT2, "dist", "labels.js") : join6(ROOT2, "packages", "render-cli", "src", "labels.ts");
+var PLAYER = PACKAGED ? join6(ROOT2, "dist", "player.js") : join6(ROOT2, "packages", "render-cli", "src", "player.ts");
 var ANALYZE = PACKAGED ? join6(ROOT2, "dist", "analyze.js") : join6(ROOT2, "benchmark", "harness", "motion", "analyze.ts");
 var TRACE = PACKAGED ? join6(ROOT2, "dist", "trace-cli.js") : join6(ROOT2, "benchmark", "harness", "motion", "trace-cli.ts");
 var CMD = PACKAGED ? "reframe" : "pnpm reframe";
@@ -2345,6 +2421,8 @@ usage:
   ${CMD} logo <logo.svg|brand-slug> ["Name"] [--motion <preset>] [--energy 0..1] [--seed N] [-o out.mp4]
                                  animate a logo into a sting (presets: draw-bloom, punch-in,
                                  rise-settle, slide-bank, reveal-orbit, spin-forge)
+  ${CMD} player <scene.ts|.json> [-o out.html]  bundle a scene into one self-contained HTML
+                                 player (plays live in any browser or a Claude.ai artifact; visual only)
   ${CMD} preview                 open the scrub/edit UI (lists scenes in your directory)
   ${CMD} new <scene-name>        scaffold <scene-name>.ts in your directory
   ${CMD} labels <scene.ts|.json>  print the event clock (label \u2192 exact seconds; for sound design / timing)
@@ -2489,6 +2567,21 @@ ${USAGE}`);
         await (PACKAGED ? run(process.execPath, [LABELS, inputPath]) : run("npx", ["tsx", LABELS, inputPath]))
       );
     }
+    case "player": {
+      const input = rest[0];
+      if (!input || input.startsWith("-")) fail(`player needs a scene file
+
+${USAGE}`);
+      const inputPath = userPath(input);
+      if (!existsSync4(inputPath)) fail(`no such file: ${inputPath}`);
+      const oIdx = rest.indexOf("-o");
+      const outBase = PACKAGED ? join6(USER_CWD, "out") : join6(ROOT2, "out");
+      const outPath = oIdx >= 0 && rest[oIdx + 1] ? userPath(rest[oIdx + 1]) : join6(outBase, `${basename(input).replace(/\.[^.]+$/, "")}.html`);
+      await mkdir4(dirname7(outPath), { recursive: true });
+      process.exit(
+        await (PACKAGED ? run(process.execPath, [PLAYER, inputPath, outPath]) : run("npx", ["tsx", PLAYER, inputPath, outPath]))
+      );
+    }
     case "logo": {
       const positional = [];
       const flags = {};

package/dist/browserEntry.js

@@ -6,6 +6,22 @@
   var DEFAULT_MOTIONPATH_DURATION = 1;
 
   // ../core/src/path.ts
+  function pathBBox(d) {
+    const nums = d.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi);
+    if (!nums || nums.length < 2) return [0, 0, 1, 1];
+    let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      const x = parseFloat(nums[i]);
+      const y = parseFloat(nums[i + 1]);
+      if (x < minx) minx = x;
+      if (x > maxx) maxx = x;
+      if (y < miny) miny = y;
+      if (y > maxy) maxy = y;
+    }
+    const w = maxx - minx;
+    const h = maxy - miny;
+    return [minx, miny, w > 0 ? w : 1, h > 0 ? h : 1];
+  }
   function locate(segCount, u) {
     if (segCount <= 0) return { i: 0, t: 0 };
     const clamped = Math.max(0, Math.min(1, u));
@@ -134,6 +150,14 @@
         }
       }
     }
+    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);
+    }
     const segments = /* @__PURE__ */ new Map();
     const motionPaths = /* @__PURE__ */ new Map();
     const current = new Map(initialValues);
@@ -294,6 +318,7 @@
     const inferredEnd = ir.timeline ? walk(ir.timeline, 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.")));
     return {
       ir,
       duration: ir.duration ?? inferredEnd,
@@ -303,22 +328,43 @@
       nodeById,
       nodeOrder,
       labelTimes,
-      beatTimes
+      beatTimes,
+      hasCamera
     };
   }
 
   // ../core/src/validate.ts
-  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor"];
+  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
   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"],
-    text: [...COMMON_PROPS, "content", "contentDecimals", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
+    text: [...COMMON_PROPS, "content", "contentDecimals", "contentThousands", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
     image: [...COMMON_PROPS, "src", "width", "height"],
     path: [...COMMON_PROPS, "d", "fill", "stroke", "strokeWidth", "progress", "originX", "originY"],
     group: COMMON_PROPS
   };
 
+  // ../core/src/camera.ts
+  function cameraMatrix(cam, size) {
+    const W = size.width;
+    const H = size.height;
+    const x = cam.x ?? W / 2;
+    const y = cam.y ?? H / 2;
+    const zoom = cam.zoom ?? 1;
+    const r = (cam.rotation ?? 0) * Math.PI / 180;
+    const a = Math.cos(r) * zoom;
+    const b = Math.sin(r) * zoom;
+    const c = b === 0 ? 0 : -b;
+    const d = Math.cos(r) * zoom;
+    return [a, b, c, d, W / 2 - a * x - c * y, H / 2 - b * x - d * y];
+  }
+
+  // ../core/src/gradient.ts
+  function isGradient(p) {
+    return typeof p === "object" && p !== null && (p.kind === "linear" || p.kind === "radial" || p.kind === "conic");
+  }
+
   // ../core/src/presets.ts
   var SET = 1 / 120;
 
@@ -552,6 +598,17 @@
   };
   var TEXT_ALIGN = { 0: "left", 0.5: "center", 1: "right" };
   var TEXT_BASELINE = { 0: "top", 0.5: "middle", 1: "bottom" };
+  function formatNumber(value, decimals, thousands) {
+    const fixed = value.toFixed(decimals);
+    if (!thousands) return fixed;
+    const neg = fixed.startsWith("-");
+    const body = neg ? fixed.slice(1) : fixed;
+    const dot = body.indexOf(".");
+    const intPart = dot === -1 ? body : body.slice(0, dot);
+    const frac = dot === -1 ? "" : body.slice(dot);
+    const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return (neg ? "-" : "") + grouped + frac;
+  }
   function behaviorEnvelope(b, t) {
     const from = b.from ?? Number.NEGATIVE_INFINITY;
     const until = b.until ?? Number.POSITIVE_INFINITY;
@@ -673,8 +730,10 @@
           const height = num(id, "height", node.props.height);
           const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
           const strokeWidth = num(id, "strokeWidth", node.props.strokeWidth ?? 1);
-          const fill = opt(id, "fill", node.props.fill);
-          const stroke = opt(id, "stroke", node.props.stroke);
+          const fillP = node.props.fill;
+          const strokeP = node.props.stroke;
+          const fill = isGradient(fillP) ? fillP : opt(id, "fill", fillP);
+          const stroke = isGradient(strokeP) ? strokeP : opt(id, "stroke", strokeP);
           ops.push({
             type: node.type,
             id,
@@ -712,17 +771,22 @@
         case "path": {
           const ox = num(id, "originX", node.props.originX ?? 0);
           const oy = num(id, "originY", node.props.originY ?? 0);
-          const fill = opt(id, "fill", node.props.fill);
-          const stroke = opt(id, "stroke", node.props.stroke);
+          const fillP = node.props.fill;
+          const strokeP = node.props.stroke;
+          const fill = isGradient(fillP) ? fillP : opt(id, "fill", fillP);
+          const stroke = isGradient(strokeP) ? strokeP : opt(id, "stroke", strokeP);
+          const dStr = str(id, "d", node.props.d);
+          const needsBox = isGradient(fill) || isGradient(stroke);
           ops.push({
             type: "path",
             id,
             transform: ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]),
             opacity,
-            d: str(id, "d", node.props.d),
+            d: dStr,
             progress: Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1))),
             ...fill !== void 0 && { fill },
             ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) },
+            ...needsBox && { bbox: pathBBox(dStr) },
             ...clipSpread
           });
           return;
@@ -739,7 +803,7 @@
             id,
             transform: matrix,
             opacity,
-            content: typeof raw === "number" ? raw.toFixed(decimals) : raw,
+            content: typeof raw === "number" ? formatNumber(raw, decimals, node.props.contentThousands === true) : raw,
             fontFamily: str(id, "fontFamily", node.props.fontFamily),
             fontSize: num(id, "fontSize", node.props.fontSize),
             fontWeight: num(id, "fontWeight", node.props.fontWeight ?? 400),
@@ -753,11 +817,48 @@
         }
       }
     };
-    for (const node of compiled2.ir.nodes) walk(node, IDENTITY, 1, []);
+    const cameraRoot = compiled2.hasCamera ? cameraMatrix(
+      {
+        x: num("camera", "x", compiled2.ir.size.width / 2),
+        y: num("camera", "y", compiled2.ir.size.height / 2),
+        zoom: num("camera", "zoom", 1),
+        rotation: num("camera", "rotation", 0)
+      },
+      compiled2.ir.size
+    ) : IDENTITY;
+    for (const node of compiled2.ir.nodes) {
+      const root = compiled2.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
+      walk(node, root, 1, []);
+    }
     return ops;
   }
 
   // ../renderer-canvas/src/index.ts
+  function resolvePaint(ctx2, paint, box) {
+    if (typeof paint === "string") return paint;
+    const { x, y, w, h } = box;
+    let g;
+    if (paint.kind === "linear") {
+      const a = (paint.angle ?? 0) * Math.PI / 180;
+      const dx = Math.cos(a);
+      const dy = Math.sin(a);
+      const cx = x + w / 2;
+      const cy = y + h / 2;
+      const half = Math.abs(dx) * (w / 2) + Math.abs(dy) * (h / 2);
+      g = ctx2.createLinearGradient(cx - dx * half, cy - dy * half, cx + dx * half, cy + dy * half);
+    } else if (paint.kind === "radial") {
+      const cx = x + (paint.cx ?? 0.5) * w;
+      const cy = y + (paint.cy ?? 0.5) * h;
+      const r = Math.max((paint.r ?? 0.5) * Math.max(w, h), 1e-4);
+      g = ctx2.createRadialGradient(cx, cy, 0, cx, cy, r);
+    } else {
+      const cx = x + (paint.cx ?? 0.5) * w;
+      const cy = y + (paint.cy ?? 0.5) * h;
+      g = ctx2.createConicGradient((paint.angle ?? 0) * Math.PI / 180, cx, cy);
+    }
+    for (const s of paint.stops) g.addColorStop(Math.max(0, Math.min(1, s.offset)), s.color);
+    return g;
+  }
   function renderFrame(ctx2, compiled2, t, images2) {
     const { size, background } = compiled2.ir;
     ctx2.setTransform(1, 0, 0, 1, 0, 0);
@@ -790,6 +891,7 @@
       ctx2.globalAlpha = Math.max(0, Math.min(1, op.opacity));
       switch (op.type) {
         case "rect": {
+          const box = { x: op.offsetX, y: op.offsetY, w: op.width, h: op.height };
           ctx2.beginPath();
           if (op.radius && op.radius > 0) {
             ctx2.roundRect(op.offsetX, op.offsetY, op.width, op.height, op.radius);
@@ -797,17 +899,18 @@
             ctx2.rect(op.offsetX, op.offsetY, op.width, op.height);
           }
           if (op.fill) {
-            ctx2.fillStyle = op.fill;
+            ctx2.fillStyle = resolvePaint(ctx2, op.fill, box);
             ctx2.fill();
           }
           if (op.stroke) {
-            ctx2.strokeStyle = op.stroke;
+            ctx2.strokeStyle = resolvePaint(ctx2, op.stroke, box);
             ctx2.lineWidth = op.strokeWidth ?? 1;
             ctx2.stroke();
           }
           break;
         }
         case "ellipse": {
+          const box = { x: op.offsetX, y: op.offsetY, w: op.width, h: op.height };
           ctx2.beginPath();
           ctx2.ellipse(
             op.offsetX + op.width / 2,
@@ -819,11 +922,11 @@
             Math.PI * 2
           );
           if (op.fill) {
-            ctx2.fillStyle = op.fill;
+            ctx2.fillStyle = resolvePaint(ctx2, op.fill, box);
             ctx2.fill();
           }
           if (op.stroke) {
-            ctx2.strokeStyle = op.stroke;
+            ctx2.strokeStyle = resolvePaint(ctx2, op.stroke, box);
             ctx2.lineWidth = op.strokeWidth ?? 1;
             ctx2.stroke();
           }
@@ -860,12 +963,13 @@
         }
         case "path": {
           const p = new Path2D(op.d);
+          const box = op.bbox ? { x: op.bbox[0], y: op.bbox[1], w: op.bbox[2], h: op.bbox[3] } : { x: 0, y: 0, w: 1, h: 1 };
           if (op.fill) {
-            ctx2.fillStyle = op.fill;
+            ctx2.fillStyle = resolvePaint(ctx2, op.fill, box);
             ctx2.fill(p);
           }
           if (op.stroke && (op.strokeWidth ?? 1) > 0) {
-            ctx2.strokeStyle = op.stroke;
+            ctx2.strokeStyle = resolvePaint(ctx2, op.stroke, box);
             ctx2.lineWidth = op.strokeWidth ?? 1;
             ctx2.lineJoin = "round";
             ctx2.lineCap = "round";

package/dist/cli.js

@@ -140,6 +140,14 @@ function compileScene(ir) {
       }
     }
   }
+  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);
+  }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
   const current = new Map(initialValues);
@@ -300,6 +308,7 @@ function compileScene(ir) {
   const inferredEnd = ir.timeline ? walk(ir.timeline, 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.")));
   return {
     ir,
     duration: ir.duration ?? inferredEnd,
@@ -309,17 +318,19 @@ function compileScene(ir) {
     nodeById,
     nodeOrder,
     labelTimes,
-    beatTimes
+    beatTimes,
+    hasCamera
   };
 }
 
 // ../core/src/validate.ts
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor"];
+var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
+var CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
 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"],
-  text: [...COMMON_PROPS, "content", "contentDecimals", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
+  text: [...COMMON_PROPS, "content", "contentDecimals", "contentThousands", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
   image: [...COMMON_PROPS, "src", "width", "height"],
   path: [...COMMON_PROPS, "d", "fill", "stroke", "strokeWidth", "progress", "originX", "originY"],
   group: COMMON_PROPS
@@ -336,12 +347,34 @@ ${problems.map((p) => `  - ${p}`).join("\n")}`);
 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 (node.type === "group") {
         const clip = node.props.clip;
         if (clip) {
@@ -358,6 +391,14 @@ function validateScene(ir) {
   };
   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(
@@ -425,12 +466,15 @@ function validateScene(ir) {
         break;
       case "motionPath": {
         const node = nodeById.get(tl.target);
-        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}"`);
+        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) {
@@ -475,6 +519,18 @@ function validateScene(ir) {
   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 (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}`);
+      } else if (typeof value !== "number") {
+        problems.push(`camera.${key2} must be a number`);
+      }
+    }
+  }
   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)) {