reframe-video 0.6.1 → 0.6.3

package/dist/bin.js

@@ -377,6 +377,9 @@ function validateScene(ir) {
       const props = node.props;
       checkPaint(`node "${node.id}" fill`, props.fill);
       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) {
@@ -591,16 +594,30 @@ function validateComposition(comp) {
   }
   if (problems.length > 0) throw new SceneValidationError(problems);
 }
-var 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";
-    COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
+    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 = {
       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"],
+      line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
       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"],
@@ -928,6 +945,13 @@ var init_gradient = __esm({
   }
 });
 
+// ../core/src/effects.ts
+var init_effects = __esm({
+  "../core/src/effects.ts"() {
+    "use strict";
+  }
+});
+
 // ../core/src/presets.ts
 function makeRng(seed) {
   let a = seed >>> 0 || 2654435769;
@@ -1385,6 +1409,7 @@ var init_src = __esm({
     init_path();
     init_camera();
     init_gradient();
+    init_effects();
     init_presets();
     init_devicePreset();
     init_cursor();

package/dist/browserEntry.js

@@ -334,11 +334,12 @@
   }
 
   // ../core/src/validate.ts
-  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
+  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"],
     ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
-    line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress"],
+    line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
     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"],
@@ -679,9 +680,22 @@
       const v = valueAt(target, prop, base ?? "");
       return v === "" && base === void 0 ? void 0 : String(v);
     };
+    const effectFx = (id, p) => {
+      const fx = {};
+      if (p.blur !== void 0) fx.blur = num(id, "blur", p.blur);
+      if (p.shadowColor !== void 0) {
+        fx.shadowColor = str(id, "shadowColor", p.shadowColor);
+        fx.shadowBlur = num(id, "shadowBlur", p.shadowBlur ?? 0);
+        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) => {
       const id = node.id;
       const clipSpread = clips.length > 0 ? { clips } : void 0;
+      const fx = effectFx(id, node.props);
       if (node.type === "line") {
         const opacity2 = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
         if (opacity2 <= 0) return;
@@ -699,6 +713,7 @@
           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,
           ...clipSpread
         });
         return;
@@ -746,6 +761,7 @@
             ...fill !== void 0 && { fill },
             ...stroke !== void 0 && { stroke, strokeWidth },
             ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) },
+            ...fx,
             ...clipSpread
           });
           return;
@@ -764,6 +780,7 @@
             height,
             offsetX: -width * ax,
             offsetY: -height * ay,
+            ...fx,
             ...clipSpread
           });
           return;
@@ -787,6 +804,7 @@
             ...fill !== void 0 && { fill },
             ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) },
             ...needsBox && { bbox: pathBBox(dStr) },
+            ...fx,
             ...clipSpread
           });
           return;
@@ -811,6 +829,7 @@
             letterSpacing: num(id, "letterSpacing", node.props.letterSpacing ?? 0),
             align: TEXT_ALIGN[ax] ?? "left",
             baseline: TEXT_BASELINE[ay] ?? "top",
+            ...fx,
             ...clipSpread
           });
           return;
@@ -889,6 +908,14 @@
       }
       ctx2.setTransform(...op.transform);
       ctx2.globalAlpha = Math.max(0, Math.min(1, op.opacity));
+      if (op.blur) ctx2.filter = `blur(${op.blur}px)`;
+      if (op.shadowColor) {
+        ctx2.shadowColor = op.shadowColor;
+        ctx2.shadowBlur = op.shadowBlur ?? 0;
+        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 };
@@ -999,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,12 +324,26 @@ function compileScene(ir) {
 }
 
 // ../core/src/validate.ts
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
+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 = {
   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"],
+  line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
   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"],
@@ -375,6 +389,9 @@ function validateScene(ir) {
       const props = node.props;
       checkPaint(`node "${node.id}" fill`, props.fill);
       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,12 +334,26 @@ function compileScene(ir) {
 }
 
 // ../core/src/validate.ts
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
+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 = {
   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"],
+  line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
   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"],
@@ -385,6 +399,9 @@ function validateScene(ir) {
       const props = node.props;
       checkPaint(`node "${node.id}" fill`, props.fill);
       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) {
@@ -987,6 +1004,14 @@ function conicGradient(stops, opts = {}) {
   };
 }
 
+// ../core/src/effects.ts
+function glow(color, blur = 24) {
+  return { shadowColor: color, shadowBlur: blur, shadowX: 0, shadowY: 0 };
+}
+function dropShadow(color, blur = 24, x = 0, y = 12) {
+  return { shadowColor: color, shadowBlur: blur, shadowX: x, shadowY: y };
+}
+
 // ../core/src/presets.ts
 var PRESET_NAMES = [
   "draw-bloom",
@@ -1526,11 +1551,11 @@ function ikReach(upper, lower, dx, dy, flip = false) {
 function humanoid(opts = {}) {
   const line2 = opts.color ?? DEFAULT_LINE;
   const fill = opts.fill ?? DEFAULT_FILL;
-  const glow = opts.glow;
+  const glow2 = opts.glow;
   const blob = (jid, a, b, cy) => {
     const d = ovalPath(a, b, 0, cy);
     const nodes = [];
-    if (glow) nodes.push(path({ id: `${jid}-glow`, d, x: 0, y: 0, fill: "none", stroke: glow, strokeWidth: GLOW_W, opacity: 0.18 }));
+    if (glow2) nodes.push(path({ id: `${jid}-glow`, d, x: 0, y: 0, fill: "none", stroke: glow2, strokeWidth: GLOW_W, opacity: 0.18 }));
     nodes.push(path({ id: `${jid}-shape`, d, x: 0, y: 0, fill, stroke: line2, strokeWidth: LINE_W }));
     return nodes;
   };
@@ -2938,9 +2963,22 @@ function evaluate(compiled, t) {
     const v = valueAt(target, prop, base ?? "");
     return v === "" && base === void 0 ? void 0 : String(v);
   };
+  const effectFx = (id, p) => {
+    const fx = {};
+    if (p.blur !== void 0) fx.blur = num(id, "blur", p.blur);
+    if (p.shadowColor !== void 0) {
+      fx.shadowColor = str(id, "shadowColor", p.shadowColor);
+      fx.shadowBlur = num(id, "shadowBlur", p.shadowBlur ?? 0);
+      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) => {
     const id = node.id;
     const clipSpread = clips.length > 0 ? { clips } : void 0;
+    const fx = effectFx(id, node.props);
     if (node.type === "line") {
       const opacity2 = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
       if (opacity2 <= 0) return;
@@ -2958,6 +2996,7 @@ 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,
         ...clipSpread
       });
       return;
@@ -3005,6 +3044,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,
           ...clipSpread
         });
         return;
@@ -3023,6 +3063,7 @@ function evaluate(compiled, t) {
           height,
           offsetX: -width * ax,
           offsetY: -height * ay,
+          ...fx,
           ...clipSpread
         });
         return;
@@ -3046,6 +3087,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,
           ...clipSpread
         });
         return;
@@ -3070,6 +3112,7 @@ function evaluate(compiled, t) {
           letterSpacing: num(id, "letterSpacing", node.props.letterSpacing ?? 0),
           align: TEXT_ALIGN[ax] ?? "left",
           baseline: TEXT_BASELINE[ay] ?? "top",
+          ...fx,
           ...clipSpread
         });
         return;
@@ -3204,10 +3247,12 @@ export {
   deviceScreen,
   deviceScreenCenter,
   deviceScreenPoint,
+  dropShadow,
   ellipse,
   evaluate,
   figure,
   formatComposeReport,
+  glow,
   group,
   humanoid,
   ikReach,

package/dist/labels.js

@@ -318,12 +318,26 @@ function compileScene(ir) {
 }
 
 // ../core/src/validate.ts
-var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor", "fixed"];
+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 = {
   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"],
+  line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
   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"],
@@ -369,6 +383,9 @@ function validateScene(ir) {
       const props = node.props;
       checkPaint(`node "${node.id}" fill`, props.fill);
       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

@@ -55,6 +55,14 @@ function drawDisplayList(ctx, ops, images) {
     }
     ctx.setTransform(...op.transform);
     ctx.globalAlpha = Math.max(0, Math.min(1, op.opacity));
+    if (op.blur) ctx.filter = `blur(${op.blur}px)`;
+    if (op.shadowColor) {
+      ctx.shadowColor = op.shadowColor;
+      ctx.shadowBlur = op.shadowBlur ?? 0;
+      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 };
@@ -165,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,11 +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", "fixed"];
+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"],
   ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
-  line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress"],
+  line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress", ...FX_PROPS],
   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"],

package/dist/types/effects.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Drop-shadow / outer-glow sugar. These return a partial-props object you spread
+ * into a shape node; the underlying `shadow*` props stay animatable (e.g. pulse a
+ * glow with `oscillate(id, "shadowBlur", …)`). Units are screen pixels.
+ */
+import type { BaseProps } from "./ir.js";
+type ShadowProps = Pick<BaseProps, "shadowColor" | "shadowBlur" | "shadowX" | "shadowY">;
+/** An outer glow — a shadow with no offset. `rect({ …, ...glow("#FFD24B", 28) })`. */
+export declare function glow(color: string, blur?: number): ShadowProps;
+/** A drop shadow (offset downward by default). `rect({ …, ...dropShadow("#0008", 40, 0, 16) })`. */
+export declare function dropShadow(color: string, blur?: number, x?: number, y?: number): ShadowProps;
+export {};

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,
@@ -24,6 +24,14 @@ interface OpBase {
     opacity: number;
     /** Clip regions from ancestor groups (intersected by the renderer). */
     clips?: ClipRegion[];
+    /** Paint effects (screen-pixel space). Present only when authored. */
+    blur?: number;
+    shadowColor?: string;
+    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/index.d.ts

@@ -7,6 +7,7 @@ export { compileScene, type CompiledScene, type PropertySegment, type LabelSpan,
 export { pathPoint, pathTangentAngle, type Pt } from "./path.js";
 export { cameraTo, cameraMatrix, CAMERA_ID, CAMERA_PROPS } from "./camera.js";
 export { linearGradient, radialGradient, conicGradient, isGradient } from "./gradient.js";
+export { glow, dropShadow } from "./effects.js";
 export { motionPreset, PRESET_NAMES, type PresetName, type PresetRig, type PresetOpts } from "./presets.js";
 export { devicePreset, deviceScreen, deviceScreenCenter, deviceBounds, deviceScreenPoint, DEVICE_PRESET_NAMES, type DevicePresetName, type DevicePresetOpts } from "./devicePreset.js";
 export { cursor, cursorTo, cursorPath, cursorClick, cursorDouble, type CursorStyle, type CursorOpts, type CursorToOpts, type CursorPathOpts, type CursorClickOpts } from "./cursor.js";

package/dist/types/ir.d.ts

@@ -36,7 +36,23 @@ export interface BaseProps {
      * for HUD / titles / watermark layers. No-op when the scene has no camera.
      */
     fixed?: boolean;
+    /**
+     * 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).
+     */
+    blur?: number;
+    shadowColor?: string;
+    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
@@ -93,6 +109,12 @@ export interface LineProps {
     progress?: number;
     /** Pin to the screen so the scene `camera` does not move it (top-level only). */
     fixed?: boolean;
+    /** Paint effects (px, screen-space) — see BaseProps. */
+    blur?: number;
+    shadowColor?: string;
+    shadowBlur?: number;
+    shadowX?: number;
+    shadowY?: number;
 }
 export interface TextProps extends BaseProps {
     /** Numbers interpolate (count-up) and render via toFixed(contentDecimals). */

package/guides/edsl-guide.md

@@ -172,6 +172,45 @@ ellipse({ id: "ring", /* … */ fill: "none", stroke: linearGradient(["#3AA0FF",
   gradient sweeps/stretches with it. Color-string fills still tween as today.
 - text fill and line stroke are color-only for now. See `examples/scenes/gradient-demo.ts`.
 
+## Shadow, glow & blur
+
+Drawable nodes (rect / ellipse / path / text / image / line) take animatable paint
+effects, in **screen pixels** (not transformed by the node or camera, so a shadow
+keeps a consistent light direction):
+
+```ts
+rect({ id: "card", /* … */, ...dropShadow("#000000", 64, 0, 34) })   // drop shadow
+ellipse({ id: "orb", /* … */, fill: radialGradient([...]), shadowColor: "#FFC24B", shadowBlur: 22 })
+oscillate("orb", "shadowBlur", { amplitude: 16, frequency: 0.9 })    // PULSING glow
+rect({ id: "card", /* … */, blur: 18 }); tween("card", { blur: 0 }, { duration: 1 }) // focus pull
+```
+
+- Props: `blur` (gaussian blur of the shape), `shadowColor` (turns the shadow/glow
+  on), `shadowBlur`, `shadowX`, `shadowY`. All **animatable** — `tween`/`oscillate`
+  them for pulsing glows, focus pulls, etc. (set a base value first so there's
+  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`.
+
+### 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.1",
+  "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",