reframe-video 0.6.16 → 0.6.17

package/dist/bin.js

@@ -327,6 +327,7 @@ function compileScene(ir) {
   for (const list of motionPaths.values()) list.sort((a, b) => a.t0 - b.t0);
   const hasCamera = !cameraIsNode && (ir.camera !== void 0 || motionPaths.has("camera") || [...segments.keys()].some((k) => k.startsWith("camera.")));
   const hasPerspective = !cameraIsNode && (ir.camera?.perspective !== void 0 || segments.has("camera.perspective"));
+  const zSort = !cameraIsNode && ir.camera?.zSort === true && hasPerspective;
   return {
     ir,
     duration: ir.duration ?? (inferredEnd > 0 ? inferredEnd : DEFAULT_STILL_DURATION),
@@ -338,7 +339,8 @@ function compileScene(ir) {
     labelTimes,
     beatTimes,
     hasCamera,
-    hasPerspective
+    hasPerspective,
+    zSort
   };
 }
 var key;
@@ -544,8 +546,10 @@ function validateScene(ir) {
       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(", ")}`);
+      if (key2 === "zSort") {
+        if (typeof value !== "boolean") problems.push(`camera.zSort must be a boolean`);
+      } else if (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}, zSort`);
       } else if (typeof value !== "number") {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {

package/dist/browserEntry.js

@@ -324,6 +324,7 @@
     for (const list of motionPaths.values()) list.sort((a, b) => a.t0 - b.t0);
     const hasCamera = !cameraIsNode && (ir.camera !== void 0 || motionPaths.has("camera") || [...segments.keys()].some((k) => k.startsWith("camera.")));
     const hasPerspective = !cameraIsNode && (ir.camera?.perspective !== void 0 || segments.has("camera.perspective"));
+    const zSort = !cameraIsNode && ir.camera?.zSort === true && hasPerspective;
     return {
       ir,
       duration: ir.duration ?? (inferredEnd > 0 ? inferredEnd : DEFAULT_STILL_DURATION),
@@ -335,7 +336,8 @@
       labelTimes,
       beatTimes,
       hasCamera,
-      hasPerspective
+      hasPerspective,
+      zSort
     };
   }
 
@@ -750,6 +752,9 @@
       if (extra <= 0) return fx;
       return { ...fx, blur: z0((fx.blur ?? 0) + extra) };
     };
+    const zSort = compiled2.zSort;
+    const depthOf = (node, zAcc) => zAcc + num(node.id, "z", node.props.z ?? 0);
+    const depthOrder = (children, zAcc) => [...children].sort((a, b) => depthOf(b, zAcc) - depthOf(a, zAcc));
     const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
       const id = node.id;
       const clipSpread = clips.length > 0 ? { clips } : void 0;
@@ -824,7 +829,8 @@
             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 });
           } else {
-            for (const child of node.children) walk(child, matrix, opacity, childClips, depth, project);
+            const kids = zSort && project ? depthOrder(node.children, depth) : node.children;
+            for (const child of kids) walk(child, matrix, opacity, childClips, depth, project);
           }
           if (hasFx) ops.push({ type: "group-fx-pop", id, transform: matrix, opacity });
           return;
@@ -966,7 +972,12 @@
       },
       compiled2.ir.size
     ) : IDENTITY;
-    for (const node of compiled2.ir.nodes) {
+    let roots = compiled2.ir.nodes;
+    if (zSort) {
+      const isHud = (n) => !!(n.props.fixed && compiled2.hasCamera);
+      roots = [...depthOrder(compiled2.ir.nodes.filter((n) => !isHud(n)), 0), ...compiled2.ir.nodes.filter(isHud)];
+    }
+    for (const node of roots) {
       const root = compiled2.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
       const project = persp && !(node.props.fixed && compiled2.hasCamera);
       walk(node, root, 1, [], 0, project);

package/dist/cli.js

@@ -314,6 +314,7 @@ function compileScene(ir) {
   for (const list of motionPaths.values()) list.sort((a, b) => a.t0 - b.t0);
   const hasCamera = !cameraIsNode && (ir.camera !== void 0 || motionPaths.has("camera") || [...segments.keys()].some((k) => k.startsWith("camera.")));
   const hasPerspective = !cameraIsNode && (ir.camera?.perspective !== void 0 || segments.has("camera.perspective"));
+  const zSort = !cameraIsNode && ir.camera?.zSort === true && hasPerspective;
   return {
     ir,
     duration: ir.duration ?? (inferredEnd > 0 ? inferredEnd : DEFAULT_STILL_DURATION),
@@ -325,7 +326,8 @@ function compileScene(ir) {
     labelTimes,
     beatTimes,
     hasCamera,
-    hasPerspective
+    hasPerspective,
+    zSort
   };
 }
 
@@ -558,8 +560,10 @@ function validateScene(ir) {
       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(", ")}`);
+      if (key2 === "zSort") {
+        if (typeof value !== "boolean") problems.push(`camera.zSort must be a boolean`);
+      } else if (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}, zSort`);
       } else if (typeof value !== "number") {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {

package/dist/diff.js

@@ -320,6 +320,7 @@ function compileScene(ir) {
   for (const list of motionPaths.values()) list.sort((a, b) => a.t0 - b.t0);
   const hasCamera = !cameraIsNode && (ir.camera !== void 0 || motionPaths.has("camera") || [...segments.keys()].some((k) => k.startsWith("camera.")));
   const hasPerspective = !cameraIsNode && (ir.camera?.perspective !== void 0 || segments.has("camera.perspective"));
+  const zSort = !cameraIsNode && ir.camera?.zSort === true && hasPerspective;
   return {
     ir,
     duration: ir.duration ?? (inferredEnd > 0 ? inferredEnd : DEFAULT_STILL_DURATION),
@@ -331,7 +332,8 @@ function compileScene(ir) {
     labelTimes,
     beatTimes,
     hasCamera,
-    hasPerspective
+    hasPerspective,
+    zSort
   };
 }
 
@@ -564,8 +566,10 @@ function validateScene(ir) {
       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(", ")}`);
+      if (key2 === "zSort") {
+        if (typeof value !== "boolean") problems.push(`camera.zSort must be a boolean`);
+      } else if (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}, zSort`);
       } else if (typeof value !== "number") {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {

package/dist/index.js

@@ -324,6 +324,7 @@ function compileScene(ir) {
   for (const list of motionPaths.values()) list.sort((a, b) => a.t0 - b.t0);
   const hasCamera = !cameraIsNode && (ir.camera !== void 0 || motionPaths.has("camera") || [...segments.keys()].some((k) => k.startsWith("camera.")));
   const hasPerspective = !cameraIsNode && (ir.camera?.perspective !== void 0 || segments.has("camera.perspective"));
+  const zSort = !cameraIsNode && ir.camera?.zSort === true && hasPerspective;
   return {
     ir,
     duration: ir.duration ?? (inferredEnd > 0 ? inferredEnd : DEFAULT_STILL_DURATION),
@@ -335,7 +336,8 @@ function compileScene(ir) {
     labelTimes,
     beatTimes,
     hasCamera,
-    hasPerspective
+    hasPerspective,
+    zSort
   };
 }
 
@@ -568,8 +570,10 @@ function validateScene(ir) {
       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(", ")}`);
+      if (key2 === "zSort") {
+        if (typeof value !== "boolean") problems.push(`camera.zSort must be a boolean`);
+      } else if (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}, zSort`);
       } else if (typeof value !== "number") {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {
@@ -3226,6 +3230,9 @@ function evaluate(compiled, t) {
     if (extra <= 0) return fx;
     return { ...fx, blur: z0((fx.blur ?? 0) + extra) };
   };
+  const zSort = compiled.zSort;
+  const depthOf = (node, zAcc) => zAcc + num(node.id, "z", node.props.z ?? 0);
+  const depthOrder = (children, zAcc) => [...children].sort((a, b) => depthOf(b, zAcc) - depthOf(a, zAcc));
   const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
     const id = node.id;
     const clipSpread = clips.length > 0 ? { clips } : void 0;
@@ -3300,7 +3307,8 @@ function evaluate(compiled, t) {
           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 });
         } else {
-          for (const child of node.children) walk(child, matrix, opacity, childClips, depth, project);
+          const kids = zSort && project ? depthOrder(node.children, depth) : node.children;
+          for (const child of kids) walk(child, matrix, opacity, childClips, depth, project);
         }
         if (hasFx) ops.push({ type: "group-fx-pop", id, transform: matrix, opacity });
         return;
@@ -3442,7 +3450,12 @@ function evaluate(compiled, t) {
     },
     compiled.ir.size
   ) : IDENTITY;
-  for (const node of compiled.ir.nodes) {
+  let roots = compiled.ir.nodes;
+  if (zSort) {
+    const isHud = (n3) => !!(n3.props.fixed && compiled.hasCamera);
+    roots = [...depthOrder(compiled.ir.nodes.filter((n3) => !isHud(n3)), 0), ...compiled.ir.nodes.filter(isHud)];
+  }
+  for (const node of roots) {
     const root = compiled.hasCamera && node.props.fixed ? IDENTITY : cameraRoot;
     const project = persp && !(node.props.fixed && compiled.hasCamera);
     walk(node, root, 1, [], 0, project);

package/dist/labels.js

@@ -308,6 +308,7 @@ function compileScene(ir) {
   for (const list of motionPaths.values()) list.sort((a, b) => a.t0 - b.t0);
   const hasCamera = !cameraIsNode && (ir.camera !== void 0 || motionPaths.has("camera") || [...segments.keys()].some((k) => k.startsWith("camera.")));
   const hasPerspective = !cameraIsNode && (ir.camera?.perspective !== void 0 || segments.has("camera.perspective"));
+  const zSort = !cameraIsNode && ir.camera?.zSort === true && hasPerspective;
   return {
     ir,
     duration: ir.duration ?? (inferredEnd > 0 ? inferredEnd : DEFAULT_STILL_DURATION),
@@ -319,7 +320,8 @@ function compileScene(ir) {
     labelTimes,
     beatTimes,
     hasCamera,
-    hasPerspective
+    hasPerspective,
+    zSort
   };
 }
 
@@ -552,8 +554,10 @@ function validateScene(ir) {
       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(", ")}`);
+      if (key2 === "zSort") {
+        if (typeof value !== "boolean") problems.push(`camera.zSort must be a boolean`);
+      } else if (!CAMERA_PROPS.includes(key2)) {
+        problems.push(`camera: "${key2}" is not a camera prop \u2014 valid props: ${CAMERA_PROPS.join(", ")}, zSort`);
       } else if (typeof value !== "number") {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {

package/dist/types/compile.d.ts

@@ -53,5 +53,7 @@ export interface CompiledScene {
     hasCamera: boolean;
     /** True iff the scene sets/animates `camera.perspective` (gates depth projection). */
     hasPerspective: boolean;
+    /** True iff `camera.zSort` is on (gates depth-ordered paint; needs perspective). */
+    zSort: boolean;
 }
 export declare function compileScene(ir: SceneIR): CompiledScene;

package/dist/types/ir.d.ts

@@ -472,6 +472,14 @@ export interface CameraIR {
      */
     focus?: number;
     aperture?: number;
+    /**
+     * Paint order by depth (requires `perspective`). Off by default — drawing stays
+     * array order. When `true`, siblings at each level are drawn far-to-near (larger
+     * world `z` first) so nearer nodes occlude farther ones without hand-ordering the
+     * tree. A `fixed` HUD stays on top; a track-matte group keeps its child order (the
+     * first child is the mask). Discrete flag, not animatable.
+     */
+    zSort?: boolean;
 }
 export interface SceneIR {
     version: 1;

package/guides/edsl-guide.md

@@ -221,11 +221,17 @@ scene({
   `aperture` for an iris pull. Absent/`0` ⇒ no blur. HUD/UI text should be `fixed` so it stays
   crisp (a `fixed` node opts out of DOF too). It feeds the same `blur` op, so it composes with an
   authored `blur`.
+- **Occlusion by depth** is opt-in: set `camera.zSort: true` and siblings paint far→near
+  (larger `z` first) so nearer nodes cover farther ones without hand-ordering the tree (a
+  `fixed` HUD stays on top; a track-matte group keeps its child order). Off by default — paint
+  stays array order. Gotcha: with `zSort`, a full-screen background rect at `z: 0` is the
+  NEAREST plane and paints on top — use the scene `background` color instead, or give the
+  backdrop a large `z`.
 - **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.
+  (parallax, convergence, dolly) IS exact. No GPU 3D, no z-buffer (per-pixel) — `zSort` orders
+  whole nodes, so two INTERSECTING planes can't visually cross.
 
 See `examples/scenes/perspective-cards.ts`.
 

package/package.json

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