reframe-video 0.5.0 → 0.6.1

package/dist/index.js

@@ -6,6 +6,22 @@ var DEFAULT_MOTIONPATH_DURATION = 1;
 var DEFAULT_FPS = 30;
 
 // ../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 @@ 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);
@@ -294,6 +318,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,
@@ -303,17 +328,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
@@ -330,12 +357,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) {
@@ -352,6 +401,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(
@@ -419,12 +476,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) {
@@ -469,6 +529,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)) {
@@ -863,6 +935,58 @@ function formatComposeReport(report) {
   return lines.join("\n");
 }
 
+// ../core/src/camera.ts
+var CAMERA_ID = "camera";
+var CAMERA_PROPS2 = ["x", "y", "zoom", "rotation"];
+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];
+}
+function cameraTo(props, opts = {}) {
+  return tween(CAMERA_ID, props, opts);
+}
+
+// ../core/src/gradient.ts
+function isGradient(p) {
+  return typeof p === "object" && p !== null && (p.kind === "linear" || p.kind === "radial" || p.kind === "conic");
+}
+function toStops(stops) {
+  if (stops.length > 0 && typeof stops[0] === "object") return stops;
+  const cs = stops;
+  const n3 = cs.length;
+  return cs.map((color, i) => ({ offset: n3 <= 1 ? 0 : i / (n3 - 1), color }));
+}
+function linearGradient(stops, opts = {}) {
+  return { kind: "linear", ...opts.angle !== void 0 && { angle: opts.angle }, stops: toStops(stops) };
+}
+function radialGradient(stops, opts = {}) {
+  return {
+    kind: "radial",
+    ...opts.cx !== void 0 && { cx: opts.cx },
+    ...opts.cy !== void 0 && { cy: opts.cy },
+    ...opts.r !== void 0 && { r: opts.r },
+    stops: toStops(stops)
+  };
+}
+function conicGradient(stops, opts = {}) {
+  return {
+    kind: "conic",
+    ...opts.angle !== void 0 && { angle: opts.angle },
+    ...opts.cx !== void 0 && { cx: opts.cx },
+    ...opts.cy !== void 0 && { cy: opts.cy },
+    stops: toStops(stops)
+  };
+}
+
 // ../core/src/presets.ts
 var PRESET_NAMES = [
   "draw-bloom",
@@ -2701,6 +2825,17 @@ var ANCHOR_FACTORS = {
 };
 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;
@@ -2854,8 +2989,10 @@ function evaluate(compiled, t) {
         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,
@@ -2893,17 +3030,22 @@ function evaluate(compiled, t) {
       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;
@@ -2920,7 +3062,7 @@ function evaluate(compiled, t) {
           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),
@@ -2934,7 +3076,19 @@ function evaluate(compiled, t) {
       }
     }
   };
-  for (const node of compiled.ir.nodes) walk(node, IDENTITY, 1, []);
+  const cameraRoot = compiled.hasCamera ? cameraMatrix(
+    {
+      x: num("camera", "x", compiled.ir.size.width / 2),
+      y: num("camera", "y", compiled.ir.size.height / 2),
+      zoom: num("camera", "zoom", 1),
+      rotation: num("camera", "rotation", 0)
+    },
+    compiled.ir.size
+  ) : IDENTITY;
+  for (const node of compiled.ir.nodes) {
+    const root = compiled.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
+    walk(node, root, 1, []);
+  }
   return ops;
 }
 
@@ -3015,6 +3169,8 @@ function sketchToTimeline(sketch, nodeIds) {
   return par(...steps);
 }
 export {
+  CAMERA_ID,
+  CAMERA_PROPS2 as CAMERA_PROPS,
   CHARACTER_PRESET_NAMES,
   DEFAULT_CROSSFADE,
   DEFAULT_FPS,
@@ -3029,12 +3185,15 @@ export {
   SFX_DURATION,
   SceneValidationError,
   beat,
+  cameraMatrix,
+  cameraTo,
   characterPreset,
   collectImageSrcs,
   compileComposition,
   compileScene,
   composeScene,
   composition,
+  conicGradient,
   cursor,
   cursorClick,
   cursorDouble,
@@ -3054,8 +3213,10 @@ export {
   ikReach,
   image,
   isColor,
+  isGradient,
   lerpValue,
   line,
+  linearGradient,
   motionOp,
   motionOpLabel,
   motionPath,
@@ -3068,6 +3229,7 @@ export {
   pathPoint,
   pathTangentAngle,
   poseTo,
+  radialGradient,
   rect,
   resolveAudioPlan,
   resolveCompositionAudioPlan,

package/dist/labels.js

@@ -134,6 +134,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);
@@ -294,6 +302,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,
@@ -303,17 +312,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
@@ -330,12 +341,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) {
@@ -352,6 +385,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(
@@ -419,12 +460,15 @@ function validateScene(ir) {
         break;
       case "motionPath": {
         const node = nodeById.get(tl.target);
-        if (!node) {
-          problems.push(
-            `${path3}: motionPath targets unknown node "${tl.target}" \u2014 known ids: ${[...nodeById.keys()].join(", ")}`
-          );
-        } else if (node.type === "line") {
-          problems.push(`${path3}: motionPath cannot target a line (no x/y) \u2014 "${tl.target}"`);
+        const isSceneCamera = tl.target === "camera" && !node;
+        if (!isSceneCamera) {
+          if (!node) {
+            problems.push(
+              `${path3}: motionPath targets unknown node "${tl.target}" \u2014 known ids: ${[...nodeById.keys()].join(", ")}`
+            );
+          } else if (node.type === "line") {
+            problems.push(`${path3}: motionPath cannot target a line (no x/y) \u2014 "${tl.target}"`);
+          }
         }
         if (tl.points.length < 1) problems.push(`${path3}: motionPath "${tl.target}" needs at least 1 point`);
         if (tl.duration !== void 0 && tl.duration <= 0) {
@@ -469,6 +513,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)) {

package/dist/player.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env tsx
+
+// ../render-cli/src/player.ts
+import { build } from "esbuild";
+import { mkdir, writeFile, readFile } from "node:fs/promises";
+import { basename, dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+var PACKAGED = true;
+var HERE = dirname(fileURLToPath(import.meta.url));
+var CORE = PACKAGED ? resolve(HERE, "index.js") : resolve(HERE, "..", "..", "core", "src", "index.ts");
+var RENDERER = PACKAGED ? resolve(HERE, "renderer-canvas.js") : resolve(HERE, "..", "..", "renderer-canvas", "src", "index.ts");
+var FONTS = PACKAGED ? resolve(HERE, "..", "assets", "fonts") : resolve(HERE, "..", "..", "..", "assets", "fonts");
+async function fontFace(weight) {
+  try {
+    const b64 = (await readFile(resolve(FONTS, `inter-${weight}.woff2`))).toString("base64");
+    return `@font-face{font-family:Inter;font-style:normal;font-weight:${weight};font-display:block;src:url(data:font/woff2;base64,${b64}) format('woff2')}`;
+  } catch {
+    return "";
+  }
+}
+async function main() {
+  const [scenePath, outPath] = process.argv.slice(2);
+  if (!scenePath || !outPath) {
+    console.error("usage: player <scene.ts|.json> <out.html>");
+    process.exit(2);
+  }
+  const entry = `
+import { compileScene } from "@reframe/core";
+import { renderFrame } from "@reframe/renderer-canvas";
+import sceneIR from ${JSON.stringify(scenePath)};
+const compiled = compileScene(sceneIR);
+const canvas = document.getElementById("c");
+const ctx = canvas.getContext("2d");
+canvas.width = sceneIR.size.width;
+canvas.height = sceneIR.size.height;
+const dur = compiled.duration || 1;
+function frame(now){ renderFrame(ctx, compiled, (now / 1000) % dur); requestAnimationFrame(frame); }
+const ff = document.fonts;
+if (ff && ff.ready) ff.ready.then(() => requestAnimationFrame(frame));
+else requestAnimationFrame(frame);
+`;
+  let bundle;
+  try {
+    bundle = await build({
+      stdin: { contents: entry, resolveDir: dirname(scenePath), loader: "ts" },
+      bundle: true,
+      format: "iife",
+      platform: "browser",
+      target: "es2022",
+      write: false,
+      logLevel: "silent",
+      alias: { "@reframe/core": CORE, "@reframe/renderer-canvas": RENDERER, "reframe-video": CORE }
+    });
+  } catch (err) {
+    console.error(`failed to bundle ${scenePath}:
+${err instanceof Error ? err.message : String(err)}`);
+    process.exit(1);
+  }
+  const js = bundle.outputFiles[0].text;
+  const faces = (await Promise.all([400, 700, 800].map(fontFace))).join("");
+  const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${basename(scenePath)} \xB7 reframe</title>
+<style>${faces}
+html,body{margin:0;height:100%;background:#06070b;display:grid;place-items:center;font-family:Inter,system-ui}
+canvas{max-width:94vw;max-height:94vh;border-radius:16px;box-shadow:0 24px 90px rgba(0,0,0,.55)}</style></head>
+<body><canvas id="c"></canvas><script>${js}</script></body></html>`;
+  await mkdir(dirname(outPath), { recursive: true });
+  await writeFile(outPath, html);
+  console.log(outPath);
+}
+void main();

package/dist/renderer-canvas.js

@@ -1,5 +1,30 @@
 // ../renderer-canvas/src/index.ts
 import { evaluate } from "@reframe/core";
+function resolvePaint(ctx, 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 = ctx.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 = ctx.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 = ctx.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(ctx, compiled, t, images) {
   const { size, background } = compiled.ir;
   ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -32,6 +57,7 @@ function drawDisplayList(ctx, ops, images) {
     ctx.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 };
         ctx.beginPath();
         if (op.radius && op.radius > 0) {
           ctx.roundRect(op.offsetX, op.offsetY, op.width, op.height, op.radius);
@@ -39,17 +65,18 @@ function drawDisplayList(ctx, ops, images) {
           ctx.rect(op.offsetX, op.offsetY, op.width, op.height);
         }
         if (op.fill) {
-          ctx.fillStyle = op.fill;
+          ctx.fillStyle = resolvePaint(ctx, op.fill, box);
           ctx.fill();
         }
         if (op.stroke) {
-          ctx.strokeStyle = op.stroke;
+          ctx.strokeStyle = resolvePaint(ctx, op.stroke, box);
           ctx.lineWidth = op.strokeWidth ?? 1;
           ctx.stroke();
         }
         break;
       }
       case "ellipse": {
+        const box = { x: op.offsetX, y: op.offsetY, w: op.width, h: op.height };
         ctx.beginPath();
         ctx.ellipse(
           op.offsetX + op.width / 2,
@@ -61,11 +88,11 @@ function drawDisplayList(ctx, ops, images) {
           Math.PI * 2
         );
         if (op.fill) {
-          ctx.fillStyle = op.fill;
+          ctx.fillStyle = resolvePaint(ctx, op.fill, box);
           ctx.fill();
         }
         if (op.stroke) {
-          ctx.strokeStyle = op.stroke;
+          ctx.strokeStyle = resolvePaint(ctx, op.stroke, box);
           ctx.lineWidth = op.strokeWidth ?? 1;
           ctx.stroke();
         }
@@ -102,12 +129,13 @@ function drawDisplayList(ctx, ops, images) {
       }
       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) {
-          ctx.fillStyle = op.fill;
+          ctx.fillStyle = resolvePaint(ctx, op.fill, box);
           ctx.fill(p);
         }
         if (op.stroke && (op.strokeWidth ?? 1) > 0) {
-          ctx.strokeStyle = op.stroke;
+          ctx.strokeStyle = resolvePaint(ctx, op.stroke, box);
           ctx.lineWidth = op.strokeWidth ?? 1;
           ctx.lineJoin = "round";
           ctx.lineCap = "round";

package/dist/trace-cli.js

@@ -6,12 +6,12 @@ import { resolve as resolve2 } from "node:path";
 import { pathToFileURL } from "node:url";
 
 // ../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