reframe-video 0.6.15 → 0.6.16

package/dist/bin.js

@@ -162,6 +162,8 @@ function compileScene(ir) {
     initialValues.set(key("camera", "zoom"), cam.zoom ?? 1);
     initialValues.set(key("camera", "rotation"), cam.rotation ?? 0);
     if (cam.perspective !== void 0) initialValues.set(key("camera", "perspective"), cam.perspective);
+    if (cam.focus !== void 0) initialValues.set(key("camera", "focus"), cam.focus);
+    if (cam.aperture !== void 0) initialValues.set(key("camera", "aperture"), cam.aperture);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -548,6 +550,8 @@ function validateScene(ir) {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {
         problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
+      } else if (key2 === "aperture" && value < 0) {
+        problems.push(`camera.aperture must be >= 0 (blur px per unit depth) \u2014 0 disables depth of field`);
       }
     }
   }
@@ -629,7 +633,7 @@ var init_validate = __esm({
     ]);
     IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
     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"];
+    CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective", "focus", "aperture"];
     PROPS_BY_TYPE = {
       rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
       ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],

package/dist/browserEntry.js

@@ -159,6 +159,8 @@
       initialValues.set(key("camera", "zoom"), cam.zoom ?? 1);
       initialValues.set(key("camera", "rotation"), cam.rotation ?? 0);
       if (cam.perspective !== void 0) initialValues.set(key("camera", "perspective"), cam.perspective);
+      if (cam.focus !== void 0) initialValues.set(key("camera", "focus"), cam.focus);
+      if (cam.aperture !== void 0) initialValues.set(key("camera", "aperture"), cam.aperture);
     }
     const segments = /* @__PURE__ */ new Map();
     const motionPaths = /* @__PURE__ */ new Map();
@@ -740,6 +742,14 @@
     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 aperture = persp ? num("camera", "aperture", 0) : 0;
+    const focus = persp ? num("camera", "focus", 0) : 0;
+    const dofFx = (fx, depth, project) => {
+      if (!project || aperture <= 0) return fx;
+      const extra = aperture * Math.abs(depth - focus);
+      if (extra <= 0) return fx;
+      return { ...fx, blur: z0((fx.blur ?? 0) + extra) };
+    };
     const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
       const id = node.id;
       const clipSpread = clips.length > 0 ? { clips } : void 0;
@@ -762,7 +772,8 @@
           y2: y1 + (num(id, "y2", node.props.y2) - y1) * progress,
           stroke: str(id, "stroke", node.props.stroke),
           strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1),
-          ...fx,
+          // a line carries no z of its own — DOF uses the inherited subtree depth
+          ...dofFx(fx, zAcc, project),
           ...clipSpread
         });
         return;
@@ -799,6 +810,7 @@
         const tilted = rotX !== 0 || rotY !== 0 ? tiltSkew(m, rotX, rotY, hw, hh, dPersp) : m;
         return projectDepth(tilted, depth, vx, vy, dPersp);
       };
+      const leafFx = dofFx(fx, depth, project);
       switch (node.type) {
         case "group": {
           const clipTf = projDraw(matrix, 0, 0);
@@ -839,7 +851,7 @@
             ...fill !== void 0 && { fill },
             ...stroke !== void 0 && { stroke, strokeWidth },
             ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) },
-            ...fx,
+            ...leafFx,
             ...clipSpread
           });
           return;
@@ -859,7 +871,7 @@
             offsetX: -width * ax,
             offsetY: -height * ay,
             ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
-            ...fx,
+            ...leafFx,
             ...clipSpread
           });
           return;
@@ -886,7 +898,7 @@
             offsetY: -height * ay,
             frame,
             ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
-            ...fx,
+            ...leafFx,
             ...clipSpread
           });
           return;
@@ -911,7 +923,7 @@
             ...fill !== void 0 && { fill },
             ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) },
             ...needsBox && { bbox: pathBBox(dStr) },
-            ...fx,
+            ...leafFx,
             ...clipSpread
           });
           return;
@@ -938,7 +950,7 @@
             letterSpacing: num(id, "letterSpacing", node.props.letterSpacing ?? 0),
             align: TEXT_ALIGN[ax] ?? "left",
             baseline: TEXT_BASELINE[ay] ?? "top",
-            ...fx,
+            ...leafFx,
             ...clipSpread
           });
           return;

package/dist/cli.js

@@ -149,6 +149,8 @@ function compileScene(ir) {
     initialValues.set(key("camera", "zoom"), cam.zoom ?? 1);
     initialValues.set(key("camera", "rotation"), cam.rotation ?? 0);
     if (cam.perspective !== void 0) initialValues.set(key("camera", "perspective"), cam.perspective);
+    if (cam.focus !== void 0) initialValues.set(key("camera", "focus"), cam.focus);
+    if (cam.aperture !== void 0) initialValues.set(key("camera", "aperture"), cam.aperture);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -344,7 +346,7 @@ var BLEND_MODES = /* @__PURE__ */ new Set([
 ]);
 var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
 var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
-var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective"];
+var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective", "focus", "aperture"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -562,6 +564,8 @@ function validateScene(ir) {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {
         problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
+      } else if (key2 === "aperture" && value < 0) {
+        problems.push(`camera.aperture must be >= 0 (blur px per unit depth) \u2014 0 disables depth of field`);
       }
     }
   }

package/dist/diff.js

@@ -155,6 +155,8 @@ function compileScene(ir) {
     initialValues.set(key("camera", "zoom"), cam.zoom ?? 1);
     initialValues.set(key("camera", "rotation"), cam.rotation ?? 0);
     if (cam.perspective !== void 0) initialValues.set(key("camera", "perspective"), cam.perspective);
+    if (cam.focus !== void 0) initialValues.set(key("camera", "focus"), cam.focus);
+    if (cam.aperture !== void 0) initialValues.set(key("camera", "aperture"), cam.aperture);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -350,7 +352,7 @@ var BLEND_MODES = /* @__PURE__ */ new Set([
 ]);
 var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
 var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
-var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective"];
+var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective", "focus", "aperture"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -568,6 +570,8 @@ function validateScene(ir) {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {
         problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
+      } else if (key2 === "aperture" && value < 0) {
+        problems.push(`camera.aperture must be >= 0 (blur px per unit depth) \u2014 0 disables depth of field`);
       }
     }
   }

package/dist/index.js

@@ -159,6 +159,8 @@ function compileScene(ir) {
     initialValues.set(key("camera", "zoom"), cam.zoom ?? 1);
     initialValues.set(key("camera", "rotation"), cam.rotation ?? 0);
     if (cam.perspective !== void 0) initialValues.set(key("camera", "perspective"), cam.perspective);
+    if (cam.focus !== void 0) initialValues.set(key("camera", "focus"), cam.focus);
+    if (cam.aperture !== void 0) initialValues.set(key("camera", "aperture"), cam.aperture);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -354,7 +356,7 @@ var BLEND_MODES = /* @__PURE__ */ new Set([
 ]);
 var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
 var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
-var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective"];
+var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective", "focus", "aperture"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -572,6 +574,8 @@ function validateScene(ir) {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {
         problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
+      } else if (key2 === "aperture" && value < 0) {
+        problems.push(`camera.aperture must be >= 0 (blur px per unit depth) \u2014 0 disables depth of field`);
       }
     }
   }
@@ -3214,6 +3218,14 @@ function evaluate(compiled, t) {
   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 aperture = persp ? num("camera", "aperture", 0) : 0;
+  const focus = persp ? num("camera", "focus", 0) : 0;
+  const dofFx = (fx, depth, project) => {
+    if (!project || aperture <= 0) return fx;
+    const extra = aperture * Math.abs(depth - focus);
+    if (extra <= 0) return fx;
+    return { ...fx, blur: z0((fx.blur ?? 0) + extra) };
+  };
   const walk = (node, parent, parentOpacity, clips, zAcc, project) => {
     const id = node.id;
     const clipSpread = clips.length > 0 ? { clips } : void 0;
@@ -3236,7 +3248,8 @@ function evaluate(compiled, t) {
         y2: y1 + (num(id, "y2", node.props.y2) - y1) * progress,
         stroke: str(id, "stroke", node.props.stroke),
         strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1),
-        ...fx,
+        // a line carries no z of its own — DOF uses the inherited subtree depth
+        ...dofFx(fx, zAcc, project),
         ...clipSpread
       });
       return;
@@ -3273,6 +3286,7 @@ function evaluate(compiled, t) {
       const tilted = rotX !== 0 || rotY !== 0 ? tiltSkew(m, rotX, rotY, hw, hh, dPersp) : m;
       return projectDepth(tilted, depth, vx, vy, dPersp);
     };
+    const leafFx = dofFx(fx, depth, project);
     switch (node.type) {
       case "group": {
         const clipTf = projDraw(matrix, 0, 0);
@@ -3313,7 +3327,7 @@ function evaluate(compiled, t) {
           ...fill !== void 0 && { fill },
           ...stroke !== void 0 && { stroke, strokeWidth },
           ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) },
-          ...fx,
+          ...leafFx,
           ...clipSpread
         });
         return;
@@ -3333,7 +3347,7 @@ function evaluate(compiled, t) {
           offsetX: -width * ax,
           offsetY: -height * ay,
           ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
-          ...fx,
+          ...leafFx,
           ...clipSpread
         });
         return;
@@ -3360,7 +3374,7 @@ function evaluate(compiled, t) {
           offsetY: -height * ay,
           frame,
           ...node.props.fit && node.props.fit !== "fill" ? { fit: node.props.fit } : {},
-          ...fx,
+          ...leafFx,
           ...clipSpread
         });
         return;
@@ -3385,7 +3399,7 @@ function evaluate(compiled, t) {
           ...fill !== void 0 && { fill },
           ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) },
           ...needsBox && { bbox: pathBBox(dStr) },
-          ...fx,
+          ...leafFx,
           ...clipSpread
         });
         return;
@@ -3412,7 +3426,7 @@ function evaluate(compiled, t) {
           letterSpacing: num(id, "letterSpacing", node.props.letterSpacing ?? 0),
           align: TEXT_ALIGN[ax] ?? "left",
           baseline: TEXT_BASELINE[ay] ?? "top",
-          ...fx,
+          ...leafFx,
           ...clipSpread
         });
         return;

package/dist/labels.js

@@ -143,6 +143,8 @@ function compileScene(ir) {
     initialValues.set(key("camera", "zoom"), cam.zoom ?? 1);
     initialValues.set(key("camera", "rotation"), cam.rotation ?? 0);
     if (cam.perspective !== void 0) initialValues.set(key("camera", "perspective"), cam.perspective);
+    if (cam.focus !== void 0) initialValues.set(key("camera", "focus"), cam.focus);
+    if (cam.aperture !== void 0) initialValues.set(key("camera", "aperture"), cam.aperture);
   }
   const segments = /* @__PURE__ */ new Map();
   const motionPaths = /* @__PURE__ */ new Map();
@@ -338,7 +340,7 @@ var BLEND_MODES = /* @__PURE__ */ new Set([
 ]);
 var IMAGE_FITS = /* @__PURE__ */ new Set(["fill", "cover"]);
 var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "z", "rotateX", "rotateY", "anchor", "fixed", ...FX_PROPS];
-var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective"];
+var CAMERA_PROPS = ["x", "y", "zoom", "rotation", "perspective", "focus", "aperture"];
 var PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -556,6 +558,8 @@ function validateScene(ir) {
         problems.push(`camera.${key2} must be a number`);
       } else if (key2 === "perspective" && value <= 0) {
         problems.push(`camera.perspective must be > 0 (focal distance in px) \u2014 drop it to disable perspective`);
+      } else if (key2 === "aperture" && value < 0) {
+        problems.push(`camera.aperture must be >= 0 (blur px per unit depth) \u2014 0 disables depth of field`);
       }
     }
   }

package/dist/types/ir.d.ts

@@ -461,6 +461,17 @@ export interface CameraIR {
      * focal pull). A node BEHIND the camera (`perspective + z <= 0`) is culled.
      */
     perspective?: number;
+    /**
+     * Depth of field (requires `perspective`). `aperture` is the blur strength —
+     * screen-pixels of gaussian blur added per unit of depth away from the focal
+     * plane; absent / 0 ⇒ no DOF (byte-identical). `focus` is the in-focus depth
+     * (same units as a node's world `z`, default 0 = the camera plane). A drawn op
+     * at depth `d` gains `aperture · |d − focus|` blur on top of any authored blur,
+     * so far (and near) layers soften while the focal plane stays sharp. Both are
+     * keyframable — animate `focus` for a rack focus, `aperture` for an iris pull.
+     */
+    focus?: number;
+    aperture?: number;
 }
 export interface SceneIR {
     version: 1;

package/guides/edsl-guide.md

@@ -215,6 +215,12 @@ scene({
 - 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).
+- **Depth of field** (needs `perspective`): add `camera.aperture` (blur px per unit depth) and
+  `camera.focus` (the in-focus `z`, default 0). A layer at depth `d` softens by
+  `aperture·|d − focus|` while the focal plane stays sharp; keyframe `focus` for a **rack focus**,
+  `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`.
 - **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

package/package.json

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