reframe-video 0.1.0 → 0.1.2

package/dist/browserEntry.js

@@ -3,9 +3,88 @@
   // ../core/src/ir.ts
   var DEFAULT_TO_DURATION = 0.5;
   var DEFAULT_TWEEN_DURATION = 0.5;
+  var DEFAULT_MOTIONPATH_DURATION = 1;
+
+  // ../core/src/path.ts
+  function locate(segCount, u) {
+    if (segCount <= 0) return { i: 0, t: 0 };
+    const clamped = Math.max(0, Math.min(1, u));
+    const scaled = clamped * segCount;
+    let i = Math.floor(scaled);
+    if (i >= segCount) i = segCount - 1;
+    return { i, t: scaled - i };
+  }
+  function controls(points, closed, i) {
+    const n = points.length;
+    const at = (k) => {
+      if (closed) return points[(k % n + n) % n];
+      return points[Math.max(0, Math.min(n - 1, k))];
+    };
+    return [at(i - 1), at(i), at(i + 1), at(i + 2)];
+  }
+  function segCountOf(points, closed) {
+    const n = points.length;
+    if (n < 2) return 0;
+    return closed ? n : n - 1;
+  }
+  function pathPoint(points, closed, u) {
+    const n = points.length;
+    if (n === 0) return [0, 0];
+    if (n === 1) return [points[0][0], points[0][1]];
+    const segs = segCountOf(points, closed);
+    const { i, t } = locate(segs, u);
+    const [p0, p1, p2, p3] = controls(points, closed, i);
+    const t2 = t * t;
+    const t3 = t2 * t;
+    const f = (a, b, c, d) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3);
+    return [f(p0[0], p1[0], p2[0], p3[0]), f(p0[1], p1[1], p2[1], p3[1])];
+  }
+  function pathTangentAngle(points, closed, u) {
+    const n = points.length;
+    if (n < 2) return 0;
+    const segs = segCountOf(points, closed);
+    const { i, t } = locate(segs, u);
+    const [p0, p1, p2, p3] = controls(points, closed, i);
+    const t2 = t * t;
+    const d = (a, b, c, e) => 0.5 * (-a + c + 2 * (2 * a - 5 * b + 4 * c - e) * t + 3 * (-a + 3 * b - 3 * c + e) * t2);
+    const dx = d(p0[0], p1[0], p2[0], p3[0]);
+    const dy = d(p0[1], p1[1], p2[1], p3[1]);
+    if (dx === 0 && dy === 0) return 0;
+    return Math.atan2(dy, dx) * 180 / Math.PI;
+  }
 
   // ../core/src/compile.ts
   var key = (target, prop) => `${target}.${prop}`;
+  function scaleTimeline(tl, k) {
+    switch (tl.kind) {
+      case "seq":
+      case "par":
+        return { ...tl, children: tl.children.map((c) => scaleTimeline(c, k)) };
+      case "stagger":
+        return { ...tl, interval: tl.interval * k, children: tl.children.map((c) => scaleTimeline(c, k)) };
+      case "wait":
+        return { ...tl, duration: tl.duration * k };
+      case "tween":
+        return { ...tl, duration: (tl.duration ?? DEFAULT_TWEEN_DURATION) * k };
+      case "motionPath":
+        return { ...tl, duration: (tl.duration ?? DEFAULT_MOTIONPATH_DURATION) * k };
+      case "to":
+        return {
+          ...tl,
+          duration: (tl.duration ?? DEFAULT_TO_DURATION) * k,
+          ...tl.stagger !== void 0 && { stagger: tl.stagger * k }
+        };
+      case "beat":
+        return {
+          ...tl,
+          children: tl.children.map((c) => scaleTimeline(c, k)),
+          ...tl.gap !== void 0 && { gap: tl.gap * k }
+        };
+    }
+  }
+  function orderBeats(children) {
+    return children.map((c, i) => ({ c, i, key: c.kind === "beat" && c.order !== void 0 ? c.order : i })).sort((a, b) => a.key - b.key || a.i - b.i).map((x) => x.c);
+  }
   function compileScene(ir) {
     const nodeById = /* @__PURE__ */ new Map();
     const nodeOrder = [];
@@ -34,6 +113,7 @@
       }
     }
     const segments = /* @__PURE__ */ new Map();
+    const motionPaths = /* @__PURE__ */ new Map();
     const current = new Map(initialValues);
     const pushSegment = (seg) => {
       const k = key(seg.target, seg.prop);
@@ -50,6 +130,50 @@
       throw new Error(`cannot animate "${prop}" of "${target}": no base value to start from`);
     };
     const labelTimes = /* @__PURE__ */ new Map();
+    const beatTimes = /* @__PURE__ */ new Map();
+    const durationOf = (tl, start) => {
+      switch (tl.kind) {
+        case "seq": {
+          let t = start;
+          for (const child of orderBeats(tl.children)) t = durationOf(child, t);
+          return t;
+        }
+        case "par": {
+          let end = start;
+          for (const child of tl.children) end = Math.max(end, durationOf(child, start));
+          return end;
+        }
+        case "stagger": {
+          let end = start;
+          tl.children.forEach((child, i) => {
+            end = Math.max(end, durationOf(child, start + i * tl.interval));
+          });
+          return end;
+        }
+        case "wait":
+          return start + tl.duration;
+        case "tween":
+          return start + (tl.duration ?? DEFAULT_TWEEN_DURATION);
+        case "motionPath":
+          return start + (tl.duration ?? DEFAULT_MOTIONPATH_DURATION);
+        case "to": {
+          const override = ir.states?.[tl.state] ?? {};
+          const duration = tl.duration ?? DEFAULT_TO_DURATION;
+          const si = tl.stagger ?? 0;
+          const targets = nodeOrder.filter(
+            (id) => id in override && (tl.filter === void 0 || tl.filter.includes(id))
+          );
+          return start + duration + Math.max(0, targets.length - 1) * si;
+        }
+        case "beat": {
+          const grouping = { kind: tl.parallel ? "par" : "seq", children: tl.children };
+          const natural = durationOf(grouping, 0);
+          const k = tl.scale ?? (tl.duration !== void 0 ? tl.duration / Math.max(1e-9, natural) : 1);
+          const beatStart = tl.at ?? start + (tl.gap ?? 0);
+          return beatStart + k * natural;
+        }
+      }
+    };
     const walk = (tl, start) => {
       const end = walkInner(tl, start);
       if ("label" in tl && tl.label !== void 0) labelTimes.set(tl.label, { t0: start, t1: end });
@@ -59,9 +183,19 @@
       switch (tl.kind) {
         case "seq": {
           let t = start;
-          for (const child of tl.children) t = walk(child, t);
+          for (const child of orderBeats(tl.children)) t = walk(child, t);
           return t;
         }
+        case "beat": {
+          const grouping = { kind: tl.parallel ? "par" : "seq", children: tl.children };
+          const k = tl.scale ?? (tl.duration !== void 0 ? tl.duration / Math.max(1e-9, durationOf(grouping, 0)) : 1);
+          const inner = k === 1 ? grouping : scaleTimeline(grouping, k);
+          const beatStart = tl.at ?? start + (tl.gap ?? 0);
+          const end = walk(inner, beatStart);
+          beatTimes.set(tl.name, { t0: beatStart, t1: end });
+          labelTimes.set(tl.name, { t0: beatStart, t1: end });
+          return end;
+        }
         case "par": {
           let end = start;
           for (const child of tl.children) end = Math.max(end, walk(child, start));
@@ -91,6 +225,23 @@
           }
           return start + duration;
         }
+        case "motionPath": {
+          const duration = tl.duration ?? DEFAULT_MOTIONPATH_DURATION;
+          const points = tl.points;
+          const closed = tl.closed ?? false;
+          const autoRotate = tl.autoRotate ?? false;
+          const rotateOffset = tl.rotateOffset ?? 0;
+          let list = motionPaths.get(tl.target);
+          if (!list) motionPaths.set(tl.target, list = []);
+          list.push({ t0: start, t1: start + duration, points, closed, autoRotate, rotateOffset, ...tl.ease !== void 0 && { ease: tl.ease } });
+          if (points.length > 0) {
+            const [ex, ey] = pathPoint(points, closed, 1);
+            current.set(key(tl.target, "x"), ex);
+            current.set(key(tl.target, "y"), ey);
+            if (autoRotate) current.set(key(tl.target, "rotation"), pathTangentAngle(points, closed, 1) + rotateOffset);
+          }
+          return start + duration;
+        }
         case "to": {
           const override = ir.states?.[tl.state] ?? {};
           const duration = tl.duration ?? DEFAULT_TO_DURATION;
@@ -119,14 +270,17 @@
     };
     const inferredEnd = ir.timeline ? walk(ir.timeline, 0) : 0;
     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);
     return {
       ir,
       duration: ir.duration ?? inferredEnd,
       segments,
+      motionPaths,
       initialValues,
       nodeById,
       nodeOrder,
-      labelTimes
+      labelTimes,
+      beatTimes
     };
   }
 
@@ -137,9 +291,14 @@
     ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
     line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress"],
     text: [...COMMON_PROPS, "content", "contentDecimals", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
+    image: [...COMMON_PROPS, "src", "width", "height"],
+    path: [...COMMON_PROPS, "d", "fill", "stroke", "strokeWidth", "progress", "originX", "originY"],
     group: COMMON_PROPS
   };
 
+  // ../core/src/presets.ts
+  var SET = 1 / 120;
+
   // ../core/src/behaviors.ts
   function sampleBehavior(b, t) {
     switch (b.name) {
@@ -170,6 +329,19 @@
   }
 
   // ../core/src/interpolate.ts
+  var BACK_C1 = 1.70158;
+  var BACK_C2 = BACK_C1 * 1.525;
+  var BACK_C3 = BACK_C1 + 1;
+  var ELASTIC_C4 = 2 * Math.PI / 3;
+  var ELASTIC_C5 = 2 * Math.PI / 4.5;
+  function easeOutBounce(u) {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (u < 1 / d1) return n1 * u * u;
+    if (u < 2 / d1) return n1 * (u -= 1.5 / d1) * u + 0.75;
+    if (u < 2.5 / d1) return n1 * (u -= 2.25 / d1) * u + 0.9375;
+    return n1 * (u -= 2.625 / d1) * u + 0.984375;
+  }
   var EASE_TABLE = {
     linear: (u) => u,
     easeInQuad: (u) => u * u,
@@ -183,7 +355,20 @@
     easeInOutQuart: (u) => u < 0.5 ? 8 * u ** 4 : 1 - (-2 * u + 2) ** 4 / 2,
     easeInExpo: (u) => u === 0 ? 0 : 2 ** (10 * u - 10),
     easeOutExpo: (u) => u === 1 ? 1 : 1 - 2 ** (-10 * u),
-    easeInOutExpo: (u) => u === 0 ? 0 : u === 1 ? 1 : u < 0.5 ? 2 ** (20 * u - 10) / 2 : (2 - 2 ** (-20 * u + 10)) / 2
+    easeInOutExpo: (u) => u === 0 ? 0 : u === 1 ? 1 : u < 0.5 ? 2 ** (20 * u - 10) / 2 : (2 - 2 ** (-20 * u + 10)) / 2,
+    // --- expressive eases (GSAP's signature feel) — standard Penner equations ---
+    // back: overshoots past the target then settles (pop / snap)
+    easeInBack: (u) => BACK_C3 * u ** 3 - BACK_C1 * u * u,
+    easeOutBack: (u) => 1 + BACK_C3 * (u - 1) ** 3 + BACK_C1 * (u - 1) ** 2,
+    easeInOutBack: (u) => u < 0.5 ? (2 * u) ** 2 * ((BACK_C2 + 1) * 2 * u - BACK_C2) / 2 : ((2 * u - 2) ** 2 * ((BACK_C2 + 1) * (2 * u - 2) + BACK_C2) + 2) / 2,
+    // elastic: rings around the target before settling (playful spring)
+    easeInElastic: (u) => u === 0 ? 0 : u === 1 ? 1 : -(2 ** (10 * u - 10)) * Math.sin((u * 10 - 10.75) * ELASTIC_C4),
+    easeOutElastic: (u) => u === 0 ? 0 : u === 1 ? 1 : 2 ** (-10 * u) * Math.sin((u * 10 - 0.75) * ELASTIC_C4) + 1,
+    easeInOutElastic: (u) => u === 0 ? 0 : u === 1 ? 1 : u < 0.5 ? -(2 ** (20 * u - 10) * Math.sin((20 * u - 11.125) * ELASTIC_C5)) / 2 : 2 ** (-20 * u + 10) * Math.sin((20 * u - 11.125) * ELASTIC_C5) / 2 + 1,
+    // bounce: drops and bounces to rest (lands without overshoot)
+    easeInBounce: (u) => 1 - easeOutBounce(1 - u),
+    easeOutBounce,
+    easeInOutBounce: (u) => u < 0.5 ? (1 - easeOutBounce(1 - 2 * u)) / 2 : (1 + easeOutBounce(2 * u - 1)) / 2
   };
   var EASE_NAMES = Object.keys(EASE_TABLE);
   function resolveEase(ease) {
@@ -298,6 +483,7 @@
     const ops = [];
     const valueAt = (target, prop, fallback) => {
       let value = compiled2.initialValues.get(`${target}.${prop}`) ?? fallback;
+      let segStart = Number.NEGATIVE_INFINITY;
       const segs = compiled2.segments.get(`${target}.${prop}`);
       if (segs) {
         let active;
@@ -306,6 +492,7 @@
           else break;
         }
         if (active) {
+          segStart = active.t0;
           if (t >= active.t1) {
             value = active.to;
           } else {
@@ -314,6 +501,23 @@
           }
         }
       }
+      if (prop === "x" || prop === "y" || prop === "rotation") {
+        const drivers = compiled2.motionPaths.get(target);
+        if (drivers) {
+          let active;
+          for (const d of drivers) {
+            if (d.t0 <= t) active = d;
+            else break;
+          }
+          if (active && active.t0 >= segStart && (prop !== "rotation" || active.autoRotate) && active.points.length > 0) {
+            const span = active.t1 - active.t0;
+            const u = span <= 0 ? 1 : resolveEase(active.ease)(Math.max(0, Math.min(1, (t - active.t0) / span)));
+            if (prop === "x") value = pathPoint(active.points, active.closed, u)[0];
+            else if (prop === "y") value = pathPoint(active.points, active.closed, u)[1];
+            else value = pathTangentAngle(active.points, active.closed, u) + active.rotateOffset;
+          }
+        }
+      }
       for (const b of compiled2.ir.behaviors ?? []) {
         if (b.target === target && b.prop === prop && typeof value === "number") {
           const envelope = behaviorEnvelope(b, t);
@@ -394,6 +598,40 @@
           });
           return;
         }
+        case "image": {
+          const width = num(id, "width", node.props.width);
+          const height = num(id, "height", node.props.height);
+          const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+          ops.push({
+            type: "image",
+            id,
+            transform: matrix,
+            opacity,
+            src: str(id, "src", node.props.src),
+            width,
+            height,
+            offsetX: -width * ax,
+            offsetY: -height * ay
+          });
+          return;
+        }
+        case "path": {
+          const ox = num(id, "originX", node.props.originX ?? 0);
+          const oy = num(id, "originY", node.props.originY ?? 0);
+          const fill = opt(id, "fill", node.props.fill);
+          const stroke = opt(id, "stroke", node.props.stroke);
+          ops.push({
+            type: "path",
+            id,
+            transform: ox === 0 && oy === 0 ? matrix : multiply(matrix, [1, 0, 0, 1, -ox, -oy]),
+            opacity,
+            d: str(id, "d", node.props.d),
+            progress: Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1))),
+            ...fill !== void 0 && { fill },
+            ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) }
+          });
+          return;
+        }
         case "text": {
           const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
           const raw = valueAt(id, "content", node.props.content);
@@ -424,7 +662,7 @@
   }
 
   // ../renderer-canvas/src/index.ts
-  function renderFrame(ctx2, compiled2, t) {
+  function renderFrame(ctx2, compiled2, t, images2) {
     const { size, background } = compiled2.ir;
     ctx2.setTransform(1, 0, 0, 1, 0, 0);
     ctx2.clearRect(0, 0, size.width, size.height);
@@ -432,9 +670,9 @@
       ctx2.fillStyle = background;
       ctx2.fillRect(0, 0, size.width, size.height);
     }
-    drawDisplayList(ctx2, evaluate(compiled2, t));
+    drawDisplayList(ctx2, evaluate(compiled2, t), images2);
   }
-  function drawDisplayList(ctx2, ops) {
+  function drawDisplayList(ctx2, ops, images2) {
     for (const op of ops) {
       ctx2.save();
       ctx2.setTransform(...op.transform);
@@ -490,6 +728,48 @@
           ctx2.stroke();
           break;
         }
+        case "image": {
+          const img = images2?.get(op.src);
+          if (img) {
+            ctx2.drawImage(img, op.offsetX, op.offsetY, op.width, op.height);
+          } else {
+            ctx2.fillStyle = "#2A2A30";
+            ctx2.fillRect(op.offsetX, op.offsetY, op.width, op.height);
+            ctx2.strokeStyle = "#FF00FF";
+            ctx2.lineWidth = 2;
+            ctx2.strokeRect(op.offsetX, op.offsetY, op.width, op.height);
+            ctx2.beginPath();
+            ctx2.moveTo(op.offsetX, op.offsetY);
+            ctx2.lineTo(op.offsetX + op.width, op.offsetY + op.height);
+            ctx2.moveTo(op.offsetX + op.width, op.offsetY);
+            ctx2.lineTo(op.offsetX, op.offsetY + op.height);
+            ctx2.stroke();
+          }
+          break;
+        }
+        case "path": {
+          const p = new Path2D(op.d);
+          if (op.fill) {
+            ctx2.fillStyle = op.fill;
+            ctx2.fill(p);
+          }
+          if (op.stroke && (op.strokeWidth ?? 1) > 0) {
+            ctx2.strokeStyle = op.stroke;
+            ctx2.lineWidth = op.strokeWidth ?? 1;
+            ctx2.lineJoin = "round";
+            ctx2.lineCap = "round";
+            if (op.progress < 1) {
+              const len = pathLength(op.d);
+              if (len > 0) {
+                ctx2.setLineDash([len, len]);
+                ctx2.lineDashOffset = len * (1 - op.progress);
+              }
+            }
+            ctx2.stroke(p);
+            ctx2.setLineDash([]);
+          }
+          break;
+        }
         case "text": {
           ctx2.font = `${op.fontWeight} ${op.fontSize}px ${quoteFamily(op.fontFamily)}`;
           if (op.letterSpacing) ctx2.letterSpacing = `${op.letterSpacing}px`;
@@ -507,13 +787,28 @@
   function quoteFamily(family) {
     return family.includes(" ") && !family.includes('"') ? `"${family}"` : family;
   }
+  var pathLengthCache = /* @__PURE__ */ new Map();
+  function pathLength(d) {
+    const hit = pathLengthCache.get(d);
+    if (hit !== void 0) return hit;
+    let len = 0;
+    if (typeof document !== "undefined") {
+      const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      el.setAttribute("d", d);
+      len = el.getTotalLength();
+    }
+    pathLengthCache.set(d, len);
+    return len;
+  }
 
   // ../render-cli/src/browserEntry.ts
   var compiled = null;
   var ctx = null;
   var canvas = null;
+  var images = /* @__PURE__ */ new Map();
   window.__reframe = {
-    init(ir) {
+    // fully decode every image before the first frame — renderFrame is sync
+    async init(ir, assets = {}) {
       compiled = compileScene(ir);
       canvas = document.createElement("canvas");
       canvas.width = ir.size.width;
@@ -521,11 +816,19 @@
       document.body.appendChild(canvas);
       ctx = canvas.getContext("2d", { willReadFrequently: true });
       if (!ctx) throw new Error("could not create 2d context");
+      await Promise.all(
+        Object.entries(assets).map(async ([src, dataUrl]) => {
+          const img = new Image();
+          img.src = dataUrl;
+          await img.decode();
+          images.set(src, img);
+        })
+      );
       return { duration: compiled.duration, fps: ir.fps ?? 30 };
     },
     renderFrame(t) {
       if (!compiled || !ctx || !canvas) throw new Error("init() not called");
-      renderFrame(ctx, compiled, t);
+      renderFrame(ctx, compiled, t, images);
       return canvas.toDataURL("image/png");
     }
   };