reframe-video 0.6.9 → 0.6.11

package/dist/bin.js

@@ -160,6 +160,7 @@ function compileScene(ir) {
     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);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -322,6 +323,7 @@ function compileScene(ir) {
   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"));
   return {
     ir,
     duration: ir.duration ?? inferredEnd,
@@ -332,7 +334,8 @@ function compileScene(ir) {
     nodeOrder,
     labelTimes,
     beatTimes,
-    hasCamera
+    hasCamera,
+    hasPerspective
   };
 }
 var key;
@@ -542,6 +545,8 @@ function validateScene(ir) {
         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`);
+      } else if (key2 === "perspective" && value <= 0) {
+        problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
       }
     }
   }
@@ -622,8 +627,8 @@ var init_validate = __esm({
       "difference"
     ]);
     IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
-    COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
-    CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
+    COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
+    CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective"];
     PROPS_BY_TYPE = {
       rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
       ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -1384,6 +1389,7 @@ var init_interpolate = __esm({
 });
 
 // ../core/src/evaluate.ts
+var DEG;
 var init_evaluate = __esm({
   "../core/src/evaluate.ts"() {
     "use strict";
@@ -1392,6 +1398,7 @@ var init_evaluate = __esm({
     init_gradient();
     init_interpolate();
     init_path();
+    DEG = Math.PI / 180;
   }
 });
 

package/dist/browserEntry.js

@@ -157,6 +157,7 @@
       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);
     }
     const segments = /* @__PURE__ */ new Map();
     const motionPaths = /* @__PURE__ */ new Map();
@@ -319,6 +320,7 @@
     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"));
     return {
       ir,
       duration: ir.duration ?? inferredEnd,
@@ -329,13 +331,14 @@
       nodeOrder,
       labelTimes,
       beatTimes,
-      hasCamera
+      hasCamera,
+      hasPerspective
     };
   }
 
   // ../core/src/validate.ts
   var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY", "blend"];
-  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
+  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
   var PROPS_BY_TYPE = {
     rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
     ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -570,6 +573,26 @@
       m[1] * n[4] + m[3] * n[5] + m[5]
     ];
   }
+  var DEG = Math.PI / 180;
+  var z0 = (x) => x === 0 ? 0 : x;
+  function projectDepth(m, z, vx, vy, d) {
+    if (z === 0) return m;
+    const p = d + z > 0 ? d / (d + z) : 1e-6;
+    return [
+      z0(m[0] * p),
+      z0(m[1] * p),
+      z0(m[2] * p),
+      z0(m[3] * p),
+      z0(vx + (m[4] - vx) * p),
+      z0(vy + (m[5] - vy) * p)
+    ];
+  }
+  function tiltSkew(m, rotXdeg, rotYdeg, hw, hh, d) {
+    const ky = Math.sin(rotYdeg * DEG) * hw / d;
+    const kx = Math.sin(rotXdeg * DEG) * hh / d;
+    if (ky === 0 && kx === 0) return m;
+    return multiply(m, [1, kx, ky, 1, 0, 0]);
+  }
   function localMatrix(x, y, rotationDeg, scale, scaleX = 1, scaleY = 1, skewXDeg = 0, skewYDeg = 0) {
     const r = rotationDeg * Math.PI / 180;
     if (scaleX === 1 && scaleY === 1 && skewXDeg === 0 && skewYDeg === 0) {
@@ -693,7 +716,11 @@
       if (p.blend !== void 0 && p.blend !== "normal") fx.blend = p.blend;
       return fx;
     };
-    const walk = (node, parent, parentOpacity, clips) => {
+    const persp = compiled2.hasPerspective;
+    const dPersp = persp ? num("camera", "perspective", 0) : 0;
+    const vx = persp ? compiled2.ir.size.width / 2 : 0;
+    const vy = persp ? compiled2.ir.size.height / 2 : 0;
+    const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
       const id = node.id;
       const clipSpread = clips.length > 0 ? { clips } : void 0;
       const fx = effectFx(id, node.props);
@@ -706,7 +733,8 @@
         ops.push({
           type: "line",
           id,
-          transform: parent,
+          // a line carries no z/rotate of its own — it just inherits the subtree's depth
+          transform: project ? projectDepth(parent, zAcc, vx, vy, dPersp) : parent,
           opacity: opacity2,
           x1,
           y1,
@@ -721,6 +749,18 @@
       }
       const opacity = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
       if (opacity <= 0) return;
+      let effScaleX = num(id, "scaleX", node.props.scaleX ?? 1);
+      let effScaleY = num(id, "scaleY", node.props.scaleY ?? 1);
+      let depth = zAcc;
+      let rotX = 0;
+      let rotY = 0;
+      if (project) {
+        rotX = num(id, "rotateX", node.props.rotateX ?? 0);
+        rotY = num(id, "rotateY", node.props.rotateY ?? 0);
+        depth = zAcc + num(id, "z", node.props.z ?? 0);
+        if (rotY !== 0) effScaleX *= Math.abs(Math.cos(rotY * DEG));
+        if (rotX !== 0) effScaleY *= Math.abs(Math.cos(rotX * DEG));
+      }
       const matrix = multiply(
         parent,
         localMatrix(
@@ -728,24 +768,33 @@
           num(id, "y", node.props.y),
           num(id, "rotation", node.props.rotation ?? 0),
           num(id, "scale", node.props.scale ?? 1),
-          num(id, "scaleX", node.props.scaleX ?? 1),
-          num(id, "scaleY", node.props.scaleY ?? 1),
+          effScaleX,
+          effScaleY,
           num(id, "skewX", node.props.skewX ?? 0),
           num(id, "skewY", node.props.skewY ?? 0)
         )
       );
+      const projDraw = (m, hw, hh) => {
+        if (!project) return m;
+        const tilted = rotX !== 0 || rotY !== 0 ? tiltSkew(m, rotX, rotY, hw, hh, dPersp) : m;
+        return projectDepth(tilted, depth, vx, vy, dPersp);
+      };
       switch (node.type) {
         case "group": {
-          const childClips = node.props.clip ? [...clips, { transform: matrix, shape: node.props.clip }] : clips;
+          const clipTf = projDraw(matrix, 0, 0);
+          const childClips = node.props.clip ? [...clips, { transform: clipTf, shape: node.props.clip }] : clips;
+          const hasFx = fx.blur !== void 0 || fx.shadowColor !== void 0 || fx.blend !== void 0;
+          if (hasFx) ops.push({ type: "group-fx-push", id, transform: matrix, opacity, ...fx, ...clipSpread });
           if (node.props.matte && node.children.length >= 2) {
             ops.push({ type: "matte-push", id, transform: matrix, opacity, mode: node.props.matte, ...clipSpread });
-            walk(node.children[0], matrix, opacity, childClips);
+            walk(node.children[0], matrix, opacity, childClips, depth, project);
             ops.push({ type: "matte-sep", id, transform: matrix, opacity });
-            for (let i = 1; i < node.children.length; i++) walk(node.children[i], matrix, opacity, childClips);
+            for (let i = 1; i < node.children.length; i++) walk(node.children[i], matrix, opacity, childClips, depth, project);
             ops.push({ type: "matte-pop", id, transform: matrix, opacity });
-            return;
+          } else {
+            for (const child of node.children) walk(child, matrix, opacity, childClips, depth, project);
           }
-          for (const child of node.children) walk(child, matrix, opacity, childClips);
+          if (hasFx) ops.push({ type: "group-fx-pop", id, transform: matrix, opacity });
           return;
         }
         case "rect":
@@ -761,7 +810,7 @@
           ops.push({
             type: node.type,
             id,
-            transform: matrix,
+            transform: projDraw(matrix, width / 2, height / 2),
             opacity,
             width,
             height,
@@ -782,7 +831,7 @@
           ops.push({
             type: "image",
             id,
-            transform: matrix,
+            transform: projDraw(matrix, width / 2, height / 2),
             opacity,
             src: str(id, "src", node.props.src),
             width,
@@ -808,7 +857,7 @@
           ops.push({
             type: "video",
             id,
-            transform: matrix,
+            transform: projDraw(matrix, width / 2, height / 2),
             opacity,
             src: str(id, "src", node.props.src),
             width,
@@ -834,7 +883,8 @@
           ops.push({
             type: "path",
             id,
-            transform: ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]),
+            // origin-shift in local space, then project (no per-op extent → cos + VP only)
+            transform: projDraw(ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]), 0, 0),
             opacity,
             d: dStr,
             progress: Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1))),
@@ -856,7 +906,7 @@
           ops.push({
             type: "text",
             id,
-            transform: matrix,
+            transform: projDraw(matrix, 0, 0),
             opacity,
             content: typeof raw === "number" ? formatNumber(raw, decimals, node.props.contentThousands === true) : raw,
             fontFamily: str(id, "fontFamily", node.props.fontFamily),
@@ -884,7 +934,8 @@
     ) : IDENTITY;
     for (const node of compiled2.ir.nodes) {
       const root = compiled2.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
-      walk(node, root, 1, []);
+      const project = persp && !(node.props.fixed && compiled2.hasCamera);
+      walk(node, root, 1, [], 0, project);
     }
     return ops;
   }
@@ -930,6 +981,7 @@
     const target = () => {
       const f = stack[stack.length - 1];
       if (!f) return ctx2;
+      if (f.kind === "fx") return f.ctx;
       return f.phase === "content" && f.contentCtx ? f.contentCtx : f.matteCtx;
     };
     const newCtx = () => {
@@ -939,29 +991,54 @@
       return c.getContext("2d");
     };
     const composite = (f) => {
-      if (!f.contentCtx) return;
-      if (f.mode === "luma") lumaToAlpha(f.matteCtx);
-      f.contentCtx.save();
-      f.contentCtx.setTransform(1, 0, 0, 1, 0, 0);
-      f.contentCtx.globalCompositeOperation = "destination-in";
-      f.contentCtx.drawImage(f.matteCtx.canvas, 0, 0);
-      f.contentCtx.restore();
+      if (f.kind === "matte") {
+        if (!f.contentCtx) return;
+        if (f.mode === "luma") lumaToAlpha(f.matteCtx);
+        f.contentCtx.save();
+        f.contentCtx.setTransform(1, 0, 0, 1, 0, 0);
+        f.contentCtx.globalCompositeOperation = "destination-in";
+        f.contentCtx.drawImage(f.matteCtx.canvas, 0, 0);
+        f.contentCtx.restore();
+        f.parent.save();
+        f.parent.setTransform(1, 0, 0, 1, 0, 0);
+        f.parent.globalAlpha = 1;
+        f.parent.globalCompositeOperation = "source-over";
+        f.parent.filter = "none";
+        f.parent.drawImage(f.contentCtx.canvas, 0, 0);
+        f.parent.restore();
+        return;
+      }
       f.parent.save();
       f.parent.setTransform(1, 0, 0, 1, 0, 0);
       f.parent.globalAlpha = 1;
-      f.parent.globalCompositeOperation = "source-over";
-      f.parent.filter = "none";
-      f.parent.drawImage(f.contentCtx.canvas, 0, 0);
+      f.parent.globalCompositeOperation = f.blend ? mapBlend(f.blend) : "source-over";
+      f.parent.filter = f.blur ? `blur(${f.blur}px)` : "none";
+      if (f.shadowColor) {
+        f.parent.shadowColor = f.shadowColor;
+        f.parent.shadowBlur = f.shadowBlur ?? 0;
+        f.parent.shadowOffsetX = f.shadowX ?? 0;
+        f.parent.shadowOffsetY = f.shadowY ?? 0;
+      }
+      f.parent.drawImage(f.ctx.canvas, 0, 0);
       f.parent.restore();
     };
     for (const op of ops) {
+      if (op.type === "group-fx-push") {
+        stack.push({ kind: "fx", parent: target(), ctx: newCtx(), blur: op.blur, shadowColor: op.shadowColor, shadowBlur: op.shadowBlur, shadowX: op.shadowX, shadowY: op.shadowY, blend: op.blend });
+        continue;
+      }
+      if (op.type === "group-fx-pop") {
+        const f = stack.pop();
+        if (f) composite(f);
+        continue;
+      }
       if (op.type === "matte-push") {
-        stack.push({ mode: op.mode, parent: target(), matteCtx: newCtx(), phase: "matte" });
+        stack.push({ kind: "matte", mode: op.mode, parent: target(), matteCtx: newCtx(), phase: "matte" });
         continue;
       }
       if (op.type === "matte-sep") {
         const f = stack[stack.length - 1];
-        if (f) {
+        if (f && f.kind === "matte") {
           f.contentCtx = newCtx();
           f.phase = "content";
         }

package/dist/cli.js

@@ -147,6 +147,7 @@ function compileScene(ir) {
     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);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -309,6 +310,7 @@ function compileScene(ir) {
   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"));
   return {
     ir,
     duration: ir.duration ?? inferredEnd,
@@ -319,7 +321,8 @@ function compileScene(ir) {
     nodeOrder,
     labelTimes,
     beatTimes,
-    hasCamera
+    hasCamera,
+    hasPerspective
   };
 }
 
@@ -339,8 +342,8 @@ var BLEND_MODES = /* @__PURE__ */ new Set([
   "difference"
 ]);
 var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
-var CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
+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"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -556,6 +559,8 @@ function validateScene(ir) {
         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`);
+      } else if (key2 === "perspective" && value <= 0) {
+        problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
       }
     }
   }
@@ -1083,6 +1088,9 @@ var EASE_TABLE = {
 };
 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();

package/dist/index.js

@@ -157,6 +157,7 @@ function compileScene(ir) {
     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);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -319,6 +320,7 @@ function compileScene(ir) {
   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"));
   return {
     ir,
     duration: ir.duration ?? inferredEnd,
@@ -329,7 +331,8 @@ function compileScene(ir) {
     nodeOrder,
     labelTimes,
     beatTimes,
-    hasCamera
+    hasCamera,
+    hasPerspective
   };
 }
 
@@ -349,8 +352,8 @@ var BLEND_MODES = /* @__PURE__ */ new Set([
   "difference"
 ]);
 var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
-var CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
+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"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -566,6 +569,8 @@ function validateScene(ir) {
         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`);
+      } else if (key2 === "perspective" && value <= 0) {
+        problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
       }
     }
   }
@@ -969,7 +974,7 @@ function formatComposeReport(report) {
 
 // ../core/src/camera.ts
 var CAMERA_ID = "camera";
-var CAMERA_PROPS2 = ["x", "y", "zoom", "rotation"];
+var CAMERA_PROPS2 = ["x", "y", "zoom", "rotation", "perspective"];
 function cameraMatrix(cam, size) {
   const W = size.width;
   const H = size.height;
@@ -2978,6 +2983,26 @@ function multiply(m, n3) {
     m[1] * n3[4] + m[3] * n3[5] + m[5]
   ];
 }
+var DEG = Math.PI / 180;
+var z0 = (x) => x === 0 ? 0 : x;
+function projectDepth(m, z, vx, vy, d) {
+  if (z === 0) return m;
+  const p = d + z > 0 ? d / (d + z) : 1e-6;
+  return [
+    z0(m[0] * p),
+    z0(m[1] * p),
+    z0(m[2] * p),
+    z0(m[3] * p),
+    z0(vx + (m[4] - vx) * p),
+    z0(vy + (m[5] - vy) * p)
+  ];
+}
+function tiltSkew(m, rotXdeg, rotYdeg, hw, hh, d) {
+  const ky = Math.sin(rotYdeg * DEG) * hw / d;
+  const kx = Math.sin(rotXdeg * DEG) * hh / d;
+  if (ky === 0 && kx === 0) return m;
+  return multiply(m, [1, kx, ky, 1, 0, 0]);
+}
 function localMatrix(x, y, rotationDeg, scale, scaleX = 1, scaleY = 1, skewXDeg = 0, skewYDeg = 0) {
   const r = rotationDeg * Math.PI / 180;
   if (scaleX === 1 && scaleY === 1 && skewXDeg === 0 && skewYDeg === 0) {
@@ -3133,7 +3158,11 @@ function evaluate(compiled, t) {
     if (p.blend !== void 0 && p.blend !== "normal") fx.blend = p.blend;
     return fx;
   };
-  const walk = (node, parent, parentOpacity, clips) => {
+  const persp = compiled.hasPerspective;
+  const dPersp = persp ? num("camera", "perspective", 0) : 0;
+  const vx = persp ? compiled.ir.size.width / 2 : 0;
+  const vy = persp ? compiled.ir.size.height / 2 : 0;
+  const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
     const id = node.id;
     const clipSpread = clips.length > 0 ? { clips } : void 0;
     const fx = effectFx(id, node.props);
@@ -3146,7 +3175,8 @@ function evaluate(compiled, t) {
       ops.push({
         type: "line",
         id,
-        transform: parent,
+        // a line carries no z/rotate of its own — it just inherits the subtree's depth
+        transform: project ? projectDepth(parent, zAcc, vx, vy, dPersp) : parent,
         opacity: opacity2,
         x1,
         y1,
@@ -3161,6 +3191,18 @@ function evaluate(compiled, t) {
     }
     const opacity = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
     if (opacity <= 0) return;
+    let effScaleX = num(id, "scaleX", node.props.scaleX ?? 1);
+    let effScaleY = num(id, "scaleY", node.props.scaleY ?? 1);
+    let depth = zAcc;
+    let rotX = 0;
+    let rotY = 0;
+    if (project) {
+      rotX = num(id, "rotateX", node.props.rotateX ?? 0);
+      rotY = num(id, "rotateY", node.props.rotateY ?? 0);
+      depth = zAcc + num(id, "z", node.props.z ?? 0);
+      if (rotY !== 0) effScaleX *= Math.abs(Math.cos(rotY * DEG));
+      if (rotX !== 0) effScaleY *= Math.abs(Math.cos(rotX * DEG));
+    }
     const matrix = multiply(
       parent,
       localMatrix(
@@ -3168,24 +3210,33 @@ function evaluate(compiled, t) {
         num(id, "y", node.props.y),
         num(id, "rotation", node.props.rotation ?? 0),
         num(id, "scale", node.props.scale ?? 1),
-        num(id, "scaleX", node.props.scaleX ?? 1),
-        num(id, "scaleY", node.props.scaleY ?? 1),
+        effScaleX,
+        effScaleY,
         num(id, "skewX", node.props.skewX ?? 0),
         num(id, "skewY", node.props.skewY ?? 0)
       )
     );
+    const projDraw = (m, hw, hh) => {
+      if (!project) return m;
+      const tilted = rotX !== 0 || rotY !== 0 ? tiltSkew(m, rotX, rotY, hw, hh, dPersp) : m;
+      return projectDepth(tilted, depth, vx, vy, dPersp);
+    };
     switch (node.type) {
       case "group": {
-        const childClips = node.props.clip ? [...clips, { transform: matrix, shape: node.props.clip }] : clips;
+        const clipTf = projDraw(matrix, 0, 0);
+        const childClips = node.props.clip ? [...clips, { transform: clipTf, shape: node.props.clip }] : clips;
+        const hasFx = fx.blur !== void 0 || fx.shadowColor !== void 0 || fx.blend !== void 0;
+        if (hasFx) ops.push({ type: "group-fx-push", id, transform: matrix, opacity, ...fx, ...clipSpread });
         if (node.props.matte && node.children.length >= 2) {
           ops.push({ type: "matte-push", id, transform: matrix, opacity, mode: node.props.matte, ...clipSpread });
-          walk(node.children[0], matrix, opacity, childClips);
+          walk(node.children[0], matrix, opacity, childClips, depth, project);
           ops.push({ type: "matte-sep", id, transform: matrix, opacity });
-          for (let i = 1; i < node.children.length; i++) walk(node.children[i], matrix, opacity, childClips);
+          for (let i = 1; i < node.children.length; i++) walk(node.children[i], matrix, opacity, childClips, depth, project);
           ops.push({ type: "matte-pop", id, transform: matrix, opacity });
-          return;
+        } else {
+          for (const child of node.children) walk(child, matrix, opacity, childClips, depth, project);
         }
-        for (const child of node.children) walk(child, matrix, opacity, childClips);
+        if (hasFx) ops.push({ type: "group-fx-pop", id, transform: matrix, opacity });
         return;
       }
       case "rect":
@@ -3201,7 +3252,7 @@ function evaluate(compiled, t) {
         ops.push({
           type: node.type,
           id,
-          transform: matrix,
+          transform: projDraw(matrix, width / 2, height / 2),
           opacity,
           width,
           height,
@@ -3222,7 +3273,7 @@ function evaluate(compiled, t) {
         ops.push({
           type: "image",
           id,
-          transform: matrix,
+          transform: projDraw(matrix, width / 2, height / 2),
           opacity,
           src: str(id, "src", node.props.src),
           width,
@@ -3248,7 +3299,7 @@ function evaluate(compiled, t) {
         ops.push({
           type: "video",
           id,
-          transform: matrix,
+          transform: projDraw(matrix, width / 2, height / 2),
           opacity,
           src: str(id, "src", node.props.src),
           width,
@@ -3274,7 +3325,8 @@ function evaluate(compiled, t) {
         ops.push({
           type: "path",
           id,
-          transform: ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]),
+          // origin-shift in local space, then project (no per-op extent → cos + VP only)
+          transform: projDraw(ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]), 0, 0),
           opacity,
           d: dStr,
           progress: Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1))),
@@ -3296,7 +3348,7 @@ function evaluate(compiled, t) {
         ops.push({
           type: "text",
           id,
-          transform: matrix,
+          transform: projDraw(matrix, 0, 0),
           opacity,
           content: typeof raw === "number" ? formatNumber(raw, decimals, node.props.contentThousands === true) : raw,
           fontFamily: str(id, "fontFamily", node.props.fontFamily),
@@ -3324,7 +3376,8 @@ function evaluate(compiled, t) {
   ) : IDENTITY;
   for (const node of compiled.ir.nodes) {
     const root = compiled.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
-    walk(node, root, 1, []);
+    const project = persp && !(node.props.fixed && compiled.hasCamera);
+    walk(node, root, 1, [], 0, project);
   }
   return ops;
 }

package/dist/labels.js

@@ -141,6 +141,7 @@ function compileScene(ir) {
     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);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -303,6 +304,7 @@ function compileScene(ir) {
   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"));
   return {
     ir,
     duration: ir.duration ?? inferredEnd,
@@ -313,7 +315,8 @@ function compileScene(ir) {
     nodeOrder,
     labelTimes,
     beatTimes,
-    hasCamera
+    hasCamera,
+    hasPerspective
   };
 }
 
@@ -333,8 +336,8 @@ var BLEND_MODES = /* @__PURE__ */ new Set([
   "difference"
 ]);
 var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
-var CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
+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"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -550,6 +553,8 @@ function validateScene(ir) {
         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`);
+      } else if (key2 === "perspective" && value <= 0) {
+        problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
       }
     }
   }
@@ -630,6 +635,9 @@ var EASE_TABLE = {
 };
 var EASE_NAMES = Object.keys(EASE_TABLE);
 
+// ../core/src/evaluate.ts
+var DEG = Math.PI / 180;
+
 // ../render-cli/src/loadScene.ts
 import { build } from "esbuild";
 import { readFile } from "node:fs/promises";

package/dist/renderer-canvas.js

@@ -40,6 +40,7 @@ function drawDisplayList(ctx, ops, images, videos) {
   const target = () => {
     const f = stack[stack.length - 1];
     if (!f) return ctx;
+    if (f.kind === "fx") return f.ctx;
     return f.phase === "content" && f.contentCtx ? f.contentCtx : f.matteCtx;
   };
   const newCtx = () => {
@@ -49,29 +50,54 @@ function drawDisplayList(ctx, ops, images, videos) {
     return c.getContext("2d");
   };
   const composite = (f) => {
-    if (!f.contentCtx) return;
-    if (f.mode === "luma") lumaToAlpha(f.matteCtx);
-    f.contentCtx.save();
-    f.contentCtx.setTransform(1, 0, 0, 1, 0, 0);
-    f.contentCtx.globalCompositeOperation = "destination-in";
-    f.contentCtx.drawImage(f.matteCtx.canvas, 0, 0);
-    f.contentCtx.restore();
+    if (f.kind === "matte") {
+      if (!f.contentCtx) return;
+      if (f.mode === "luma") lumaToAlpha(f.matteCtx);
+      f.contentCtx.save();
+      f.contentCtx.setTransform(1, 0, 0, 1, 0, 0);
+      f.contentCtx.globalCompositeOperation = "destination-in";
+      f.contentCtx.drawImage(f.matteCtx.canvas, 0, 0);
+      f.contentCtx.restore();
+      f.parent.save();
+      f.parent.setTransform(1, 0, 0, 1, 0, 0);
+      f.parent.globalAlpha = 1;
+      f.parent.globalCompositeOperation = "source-over";
+      f.parent.filter = "none";
+      f.parent.drawImage(f.contentCtx.canvas, 0, 0);
+      f.parent.restore();
+      return;
+    }
     f.parent.save();
     f.parent.setTransform(1, 0, 0, 1, 0, 0);
     f.parent.globalAlpha = 1;
-    f.parent.globalCompositeOperation = "source-over";
-    f.parent.filter = "none";
-    f.parent.drawImage(f.contentCtx.canvas, 0, 0);
+    f.parent.globalCompositeOperation = f.blend ? mapBlend(f.blend) : "source-over";
+    f.parent.filter = f.blur ? `blur(${f.blur}px)` : "none";
+    if (f.shadowColor) {
+      f.parent.shadowColor = f.shadowColor;
+      f.parent.shadowBlur = f.shadowBlur ?? 0;
+      f.parent.shadowOffsetX = f.shadowX ?? 0;
+      f.parent.shadowOffsetY = f.shadowY ?? 0;
+    }
+    f.parent.drawImage(f.ctx.canvas, 0, 0);
     f.parent.restore();
   };
   for (const op of ops) {
+    if (op.type === "group-fx-push") {
+      stack.push({ kind: "fx", parent: target(), ctx: newCtx(), blur: op.blur, shadowColor: op.shadowColor, shadowBlur: op.shadowBlur, shadowX: op.shadowX, shadowY: op.shadowY, blend: op.blend });
+      continue;
+    }
+    if (op.type === "group-fx-pop") {
+      const f = stack.pop();
+      if (f) composite(f);
+      continue;
+    }
     if (op.type === "matte-push") {
-      stack.push({ mode: op.mode, parent: target(), matteCtx: newCtx(), phase: "matte" });
+      stack.push({ kind: "matte", mode: op.mode, parent: target(), matteCtx: newCtx(), phase: "matte" });
       continue;
     }
     if (op.type === "matte-sep") {
       const f = stack[stack.length - 1];
-      if (f) {
+      if (f && f.kind === "matte") {
         f.contentCtx = newCtx();
         f.phase = "content";
       }

package/dist/trace-cli.js

@@ -7,7 +7,7 @@ import { pathToFileURL } from "node:url";
 
 // ../core/src/validate.ts
 var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY", "blend"];
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
+var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -80,6 +80,9 @@ var EASE_TABLE = {
 };
 var EASE_NAMES = Object.keys(EASE_TABLE);
 
+// ../core/src/evaluate.ts
+var DEG = Math.PI / 180;
+
 // ../core/src/motion.ts
 var EASE_BY_CLASS = {
   accelerating: "easeInCubic",

package/dist/types/camera.d.ts

@@ -16,8 +16,8 @@ import type { CameraIR, Ease, Size, TimelineIR } from "./ir.js";
 import type { Mat2D } from "./evaluate.js";
 /** Reserved timeline/behavior target id for the camera. */
 export declare const CAMERA_ID = "camera";
-/** The animatable camera props (look-at point + zoom + rotation). */
-export declare const CAMERA_PROPS: readonly ["x", "y", "zoom", "rotation"];
+/** The animatable camera props (look-at point + zoom + rotation + perspective). */
+export declare const CAMERA_PROPS: readonly ["x", "y", "zoom", "rotation", "perspective"];
 /**
  * The camera's affine matrix: `T(W/2,H/2) · R(rotation) · S(zoom) · T(-x,-y)`,
  * i.e. center the focal point, then zoom/rotate about the frame centre. Defaults

package/dist/types/compile.d.ts

@@ -51,5 +51,7 @@ export interface CompiledScene {
     beatTimes: Map<string, LabelSpan>;
     /** True iff the scene declares or animates a `camera` (gates the camera matrix). */
     hasCamera: boolean;
+    /** True iff the scene sets/animates `camera.perspective` (gates depth projection). */
+    hasPerspective: boolean;
 }
 export declare function compileScene(ir: SceneIR): CompiledScene;

package/dist/types/evaluate.d.ts

@@ -110,6 +110,10 @@ export type DisplayOp = (OpBase & {
     type: "matte-sep";
 }) | (OpBase & {
     type: "matte-pop";
+}) | (OpBase & {
+    type: "group-fx-push";
+}) | (OpBase & {
+    type: "group-fx-pop";
 });
 export type DisplayList = DisplayOp[];
 /**

package/dist/types/ir.d.ts

@@ -30,6 +30,20 @@ export interface BaseProps {
     /** Shear angles in degrees (default 0) — a 2.5D lean. No true perspective. */
     skewX?: number;
     skewY?: number;
+    /**
+     * Projected depth + 3D tilt. ONLY take effect when the scene sets
+     * `camera.perspective` (the activation switch); otherwise inert (absent ⇒
+     * byte-identical). `z` places the node in front of (`-z`) or behind (`+z`) the
+     * focal plane — the renderer scales it about the vanishing point (parallax,
+     * dolly, depth convergence; exact in 2D affine). `rotateX`/`rotateY` (degrees)
+     * tilt the node about its horizontal/vertical axis for card-flips and leaning
+     * planes — an affine APPROXIMATION (cos foreshorten + keystone skew), not a
+     * pixel-true trapezoid (a single rotated quad under perspective is non-affine,
+     * which Canvas 2D can't draw; that needs WebGL). See `camera.perspective`.
+     */
+    z?: number;
+    rotateX?: number;
+    rotateY?: number;
     anchor?: Anchor;
     /**
      * Pin a TOP-LEVEL node to the screen so the scene `camera` does not move it —
@@ -40,7 +54,8 @@ export interface BaseProps {
      * Paint effects (animatable scalars, in screen pixels — not transformed by the
      * node's rotation/scale or the camera, so a shadow keeps a consistent light
      * direction). `shadowColor` enables a drop shadow / outer glow (`glow`/`dropShadow`
-     * helpers). No-op on a `group` (use a child; group/composite blur is a later add).
+     * helpers). On a `group` these apply to the WHOLE subtree as one composite (the
+     * renderer renders it offscreen, then draws it back with the effect once).
      */
     blur?: number;
     shadowColor?: string;
@@ -48,7 +63,8 @@ export interface BaseProps {
     shadowX?: number;
     shadowY?: number;
     /** How this node composites with what's already drawn (default "normal"). `screen`/
-     *  `add` brighten (additive light/glow), `multiply` tints/deepens. No-op on a group. */
+     *  `add` brighten (additive light/glow), `multiply` tints/deepens. On a `group` the
+     *  whole subtree composites as one layer (offscreen) — true group blend. */
     blend?: BlendMode;
 }
 /** Compositing modes (Canvas `globalCompositeOperation`; `add` maps to `lighter`). */
@@ -417,6 +433,15 @@ export interface CameraIR {
     y?: number;
     zoom?: number;
     rotation?: number;
+    /**
+     * Focal distance in px — the perspective activation switch. Absent ⇒ no
+     * projection (nodes' `z`/`rotateX`/`rotateY` are inert, scene byte-identical).
+     * When set, nodes project about the vanishing point (the camera look-at, or
+     * screen centre): depth factor `p = perspective / (perspective + z)`. Smaller =
+     * stronger perspective; larger = flatter. Keyframable (animate it for a dolly /
+     * focal pull). A node BEHIND the camera (`perspective + z <= 0`) is culled.
+     */
+    perspective?: number;
 }
 export interface SceneIR {
     version: 1;

package/guides/edsl-guide.md

@@ -152,6 +152,44 @@ scene({
 
 See `examples/scenes/camera-demo.ts`.
 
+## Depth & perspective (projected 2.5D)
+
+Add `camera.perspective` (a focal distance in px) to switch on depth. Then any node's
+`z` (depth) and `rotateX`/`rotateY` (3D tilt) take effect: nodes project about the frame
+centre by `p = perspective / (perspective + z)` — further back = smaller and pulled toward
+the optical centre. It's a pure step in `evaluate()` projected onto the normal 2D matrix, so
+renders stay deterministic and the Canvas renderer is unchanged.
+
+```ts
+scene({
+  camera: { x: W/2, y: H/2, perspective: 900 },   // focal distance — the switch (absent = no depth)
+  nodes: [
+    rect({ id: "near", x: 700, y: 540, width: 220, height: 300, anchor: "center", fill: "#6EA8FF", z: 0 }),
+    rect({ id: "far",  x: 960, y: 540, width: 220, height: 300, anchor: "center", fill: "#8C7BFF", z: 500 }), // smaller, nearer centre
+    rect({ id: "hero", x: 960, y: 800, width: 300, height: 200, anchor: "center", fill: "#FF5C7A", rotateY: 0 }),
+  ],
+  timeline: seq(
+    cameraTo({ x: W/2 + 200 }, { duration: 2, ease: "easeInOutCubic" }),   // PAN → parallax (near slides more than far)
+    tween("hero", { rotateY: 360 }, { duration: 1.4, ease: "easeInOutCubic" }), // CARD FLIP (rotateY)
+    cameraTo({ perspective: 2400 }, { duration: 1.6 }),                    // DOLLY (animate the focal length)
+  ),
+})
+```
+
+- **Parallax** falls out for free — pan the camera and near (`z` small) layers shift more
+  than far ones. **Dolly** = keyframe `camera.perspective`. **Perspective text** = give each
+  `splitText` glyph an increasing `z` so the word recedes.
+- A node needs a base value to tween (`rotateY: 0` on the card before tweening it to 360).
+- A tilted **group** foreshortens its whole subtree (cos folds into children). Clips project
+  by the group's depth. A `fixed` HUD ignores depth (perspective is part of the camera).
+- **Limits (honest):** `rotateX`/`rotateY` are an affine approximation (cos-foreshorten +
+  keystone skew) — a single rotated quad is really a trapezoid Canvas 2D can't draw, so it
+  reads as a flip/tilt, not a pixel-true 3D face (that needs WebGL). Depth positioning
+  (parallax, convergence, dolly) IS exact. `z` does NOT reorder drawing — paint stays array
+  order, so order your nodes back-to-front yourself. No GPU 3D, no z-buffer.
+
+See `examples/scenes/perspective-cards.ts`.
+
 ## Gradients (fill / stroke)
 
 `fill` and `stroke` on **rect / ellipse / path** accept a gradient as well as a
@@ -193,8 +231,8 @@ rect({ id: "card", /* … */, blur: 18 }); tween("card", { blur: 0 }, { duration
   something to animate from).
 - Sugar: `glow(color, blur)` (offset 0) and `dropShadow(color, blur, x, y)` return
   a partial you spread into props (`...glow("#FFD24B", 28)`); still animatable.
-- No-op on a `group` (apply to a child; group/composite blur is a later add). See
-  `examples/scenes/shadow-demo.ts`.
+- On a `group` these apply to the whole subtree as one composite (focus pull / one
+  silhouette shadow) — see "Group effects" below. `examples/scenes/shadow-demo.ts`.
 
 ### Blend modes (compositing)
 
@@ -210,8 +248,8 @@ rect({ id: "neon", fill: linearGradient([...]), shadowColor: "#7A4DFF", blend: "
 - Modes: `normal` (default), `multiply`, `screen`, `overlay`, `lighten`, `darken`,
   `add` (additive light), `color-dodge`, `soft-light`, `hard-light`, `difference`.
 - **Discrete**, not interpolated — set per node (a static string). Default `normal`.
-- Per-shape. A whole-group blend (composite the subtree, then blend) is a later add;
-  on a `group` the prop is a no-op. See `examples/scenes/blend-demo.ts`.
+- Per-shape, or on a `group` to blend the whole composited subtree against the bg as one
+  layer (see "Group effects" below). See `examples/scenes/blend-demo.ts`.
 
 ## Character rig (skeleton, poses, IK)
 
@@ -370,6 +408,28 @@ group({ id: "reveal", x: W/2, y: H/2, anchor: "center", matte: "alpha" }, [
   combined via `destination-in`). Deterministic same-machine. See
   `examples/scenes/matte-demo.ts`.
 
+## Group effects (blur / shadow / blend on a whole group)
+
+The paint effects (`blur`, `shadowColor`/`shadowBlur`/`shadowX`/`shadowY`, `blend`) also
+work on a **group** — there they apply to the whole subtree as ONE composite layer, not per
+child. The classic uses: a depth-of-field **focus pull** on a multi-node lockup, a single
+**silhouette drop shadow** under a multi-shape mark, and a group that **blends against the
+background** as one layer (so its own overlaps composite together).
+
+```ts
+// the whole lockup sharpens as one image (animate the GROUP's blur)
+group({ id: "lockup", x: 0, y: 0, blur: 20 }, [ card, dot, label ])
+// timeline: tween("lockup", { blur: 0 }, { duration: 1.1, ease: "easeInOutCubic" })
+
+group({ id: "mark", x: 0, y: 0, ...dropShadow("#000", 40, 0, 26) }, [ shapeA, shapeB, dot ]) // one shadow
+group({ id: "burst", x, y, blend: "screen" }, [ disc1, disc2, disc3 ])                        // one screen layer
+```
+
+- Group `blur` is **animatable** (`tween(group, { blur })`); shadow scalars too.
+- Same **offscreen compositing** as mattes (the subtree renders to a buffer, drawn back once
+  with the effect). It wraps a matte group and nests. The effects are screen-pixel space.
+  See `examples/scenes/group-fx-demo.ts`.
+
 ## Cursor (UI demos)
 
 A vector mouse pointer that glides across the scene and clicks things — for app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reframe-video",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "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",

package/preview/src/main.ts

@@ -576,6 +576,8 @@ function opCorners(op: DisplayOp): [number, number][] {
     case "matte-push":
     case "matte-sep":
     case "matte-pop":
+    case "group-fx-push":
+    case "group-fx-pop":
       return []; // boundary markers have no geometry
   }
 }