reframe-video 0.6.2 → 0.6.3

package/dist/bin.js

@@ -379,6 +379,7 @@ function validateScene(ir) {
       checkPaint(`node "${node.id}" stroke`, props.stroke);
       if (typeof props.blur === "number" && props.blur < 0) problems.push(`node "${node.id}": blur must be >= 0`);
       if (typeof props.shadowBlur === "number" && props.shadowBlur < 0) problems.push(`node "${node.id}": shadowBlur must be >= 0`);
+      if (typeof props.blend === "string" && !BLEND_MODES.has(props.blend)) problems.push(`node "${node.id}": unknown blend "${props.blend}" \u2014 use ${[...BLEND_MODES].join(", ")}`);
       if (node.type === "group") {
         const clip = node.props.clip;
         if (clip) {
@@ -593,11 +594,24 @@ function validateComposition(comp) {
   }
   if (problems.length > 0) throw new SceneValidationError(problems);
 }
-var FX_PROPS, COMMON_PROPS, CAMERA_PROPS, PROPS_BY_TYPE, SceneValidationError, TRANSITIONS;
+var FX_PROPS, BLEND_MODES, COMMON_PROPS, CAMERA_PROPS, PROPS_BY_TYPE, SceneValidationError, TRANSITIONS;
 var init_validate = __esm({
   "../core/src/validate.ts"() {
     "use strict";
-    FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY"];
+    FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY", "blend"];
+    BLEND_MODES = /* @__PURE__ */ new Set([
+      "normal",
+      "multiply",
+      "screen",
+      "overlay",
+      "lighten",
+      "darken",
+      "add",
+      "color-dodge",
+      "soft-light",
+      "hard-light",
+      "difference"
+    ]);
     COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
     CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
     PROPS_BY_TYPE = {

package/dist/browserEntry.js

@@ -334,7 +334,7 @@
   }
 
   // ../core/src/validate.ts
-  var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY"];
+  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 PROPS_BY_TYPE = {
     rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
@@ -689,6 +689,7 @@
         fx.shadowX = num(id, "shadowX", p.shadowX ?? 0);
         fx.shadowY = num(id, "shadowY", p.shadowY ?? 0);
       }
+      if (p.blend !== void 0 && p.blend !== "normal") fx.blend = p.blend;
       return fx;
     };
     const walk = (node, parent, parentOpacity, clips) => {
@@ -914,6 +915,7 @@
         ctx2.shadowOffsetX = op.shadowX ?? 0;
         ctx2.shadowOffsetY = op.shadowY ?? 0;
       }
+      if (op.blend) ctx2.globalCompositeOperation = mapBlend(op.blend);
       switch (op.type) {
         case "rect": {
           const box = { x: op.offsetX, y: op.offsetY, w: op.width, h: op.height };
@@ -1024,6 +1026,9 @@
       ctx2.restore();
     }
   }
+  function mapBlend(blend) {
+    return blend === "add" ? "lighter" : blend;
+  }
   function quoteFamily(family) {
     return family.includes(" ") && !family.includes('"') ? `"${family}"` : family;
   }

package/dist/cli.js

@@ -324,7 +324,20 @@ function compileScene(ir) {
 }
 
 // ../core/src/validate.ts
-var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY"];
+var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY", "blend"];
+var BLEND_MODES = /* @__PURE__ */ new Set([
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "lighten",
+  "darken",
+  "add",
+  "color-dodge",
+  "soft-light",
+  "hard-light",
+  "difference"
+]);
 var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
 var CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
 var PROPS_BY_TYPE = {
@@ -378,6 +391,7 @@ function validateScene(ir) {
       checkPaint(`node "${node.id}" stroke`, props.stroke);
       if (typeof props.blur === "number" && props.blur < 0) problems.push(`node "${node.id}": blur must be >= 0`);
       if (typeof props.shadowBlur === "number" && props.shadowBlur < 0) problems.push(`node "${node.id}": shadowBlur must be >= 0`);
+      if (typeof props.blend === "string" && !BLEND_MODES.has(props.blend)) problems.push(`node "${node.id}": unknown blend "${props.blend}" \u2014 use ${[...BLEND_MODES].join(", ")}`);
       if (node.type === "group") {
         const clip = node.props.clip;
         if (clip) {

package/dist/index.js

@@ -334,7 +334,20 @@ function compileScene(ir) {
 }
 
 // ../core/src/validate.ts
-var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY"];
+var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY", "blend"];
+var BLEND_MODES = /* @__PURE__ */ new Set([
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "lighten",
+  "darken",
+  "add",
+  "color-dodge",
+  "soft-light",
+  "hard-light",
+  "difference"
+]);
 var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
 var CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
 var PROPS_BY_TYPE = {
@@ -388,6 +401,7 @@ function validateScene(ir) {
       checkPaint(`node "${node.id}" stroke`, props.stroke);
       if (typeof props.blur === "number" && props.blur < 0) problems.push(`node "${node.id}": blur must be >= 0`);
       if (typeof props.shadowBlur === "number" && props.shadowBlur < 0) problems.push(`node "${node.id}": shadowBlur must be >= 0`);
+      if (typeof props.blend === "string" && !BLEND_MODES.has(props.blend)) problems.push(`node "${node.id}": unknown blend "${props.blend}" \u2014 use ${[...BLEND_MODES].join(", ")}`);
       if (node.type === "group") {
         const clip = node.props.clip;
         if (clip) {
@@ -2958,6 +2972,7 @@ function evaluate(compiled, t) {
       fx.shadowX = num(id, "shadowX", p.shadowX ?? 0);
       fx.shadowY = num(id, "shadowY", p.shadowY ?? 0);
     }
+    if (p.blend !== void 0 && p.blend !== "normal") fx.blend = p.blend;
     return fx;
   };
   const walk = (node, parent, parentOpacity, clips) => {

package/dist/labels.js

@@ -318,7 +318,20 @@ function compileScene(ir) {
 }
 
 // ../core/src/validate.ts
-var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY"];
+var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY", "blend"];
+var BLEND_MODES = /* @__PURE__ */ new Set([
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "lighten",
+  "darken",
+  "add",
+  "color-dodge",
+  "soft-light",
+  "hard-light",
+  "difference"
+]);
 var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed", ...FX_PROPS];
 var CAMERA_PROPS = ["x", "y", "zoom", "rotation"];
 var PROPS_BY_TYPE = {
@@ -372,6 +385,7 @@ function validateScene(ir) {
       checkPaint(`node "${node.id}" stroke`, props.stroke);
       if (typeof props.blur === "number" && props.blur < 0) problems.push(`node "${node.id}": blur must be >= 0`);
       if (typeof props.shadowBlur === "number" && props.shadowBlur < 0) problems.push(`node "${node.id}": shadowBlur must be >= 0`);
+      if (typeof props.blend === "string" && !BLEND_MODES.has(props.blend)) problems.push(`node "${node.id}": unknown blend "${props.blend}" \u2014 use ${[...BLEND_MODES].join(", ")}`);
       if (node.type === "group") {
         const clip = node.props.clip;
         if (clip) {

package/dist/renderer-canvas.js

@@ -62,6 +62,7 @@ function drawDisplayList(ctx, ops, images) {
       ctx.shadowOffsetX = op.shadowX ?? 0;
       ctx.shadowOffsetY = op.shadowY ?? 0;
     }
+    if (op.blend) ctx.globalCompositeOperation = mapBlend(op.blend);
     switch (op.type) {
       case "rect": {
         const box = { x: op.offsetX, y: op.offsetY, w: op.width, h: op.height };
@@ -172,6 +173,9 @@ function drawDisplayList(ctx, ops, images) {
     ctx.restore();
   }
 }
+function mapBlend(blend) {
+  return blend === "add" ? "lighter" : blend;
+}
 function quoteFamily(family) {
   return family.includes(" ") && !family.includes('"') ? `"${family}"` : family;
 }

package/dist/trace-cli.js

@@ -6,7 +6,7 @@ import { resolve as resolve2 } from "node:path";
 import { pathToFileURL } from "node:url";
 
 // ../core/src/validate.ts
-var FX_PROPS = ["blur", "shadowColor", "shadowBlur", "shadowX", "shadowY"];
+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 PROPS_BY_TYPE = {
   rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],

package/dist/types/evaluate.d.ts

@@ -4,7 +4,7 @@
  * always. Renderers only draw; they never compute animation.
  */
 import type { CompiledScene } from "./compile.js";
-import type { ClipShape, Paint, PropValue } from "./ir.js";
+import type { BlendMode, ClipShape, Paint, PropValue } from "./ir.js";
 /** Canvas-style 2D affine matrix [a, b, c, d, e, f]. */
 export type Mat2D = [number, number, number, number, number, number];
 /** A clip from an ancestor group: its shape in the group's coordinate space,
@@ -30,6 +30,8 @@ interface OpBase {
     shadowBlur?: number;
     shadowX?: number;
     shadowY?: number;
+    /** Compositing mode (discrete; present only when authored and not "normal"). */
+    blend?: BlendMode;
 }
 export type DisplayOp = (OpBase & {
     type: "rect";

package/dist/types/ir.d.ts

@@ -47,7 +47,12 @@ export interface BaseProps {
     shadowBlur?: number;
     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. */
+    blend?: BlendMode;
 }
+/** Compositing modes (Canvas `globalCompositeOperation`; `add` maps to `lighter`). */
+export type BlendMode = "normal" | "multiply" | "screen" | "overlay" | "lighten" | "darken" | "add" | "color-dodge" | "soft-light" | "hard-light" | "difference";
 /**
  * A paint is a solid color string OR a gradient. Coordinates are normalized to the
  * node's bounding box (0..1, SVG `objectBoundingBox` style) so a gradient is just an

package/guides/edsl-guide.md

@@ -194,6 +194,23 @@ rect({ id: "card", /* … */, blur: 18 }); tween("card", { blur: 0 }, { duration
 - No-op on a `group` (apply to a child; group/composite blur is a later add). See
   `examples/scenes/shadow-demo.ts`.
 
+### Blend modes (compositing)
+
+`blend` selects how a shape composites with what's already drawn beneath it — the
+primitive that makes light read.
+
+```ts
+ellipse({ id: "glow", fill: radialGradient(["#FF2D6A", "#FF2D6A00"]), blend: "screen" }) // additive light: brightens where blobs overlap
+rect({ id: "tint", fill: "#1E5BFF", blend: "multiply" })                                 // tint/deepen the layer beneath
+rect({ id: "neon", fill: linearGradient([...]), shadowColor: "#7A4DFF", blend: "screen" }) // compose with glow
+```
+
+- 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`.
+
 ## Character rig (skeleton, poses, IK)
 
 A first-class, declarative character rig that **compiles to plain IR** (nested

package/package.json

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