npm - @officexapp/vidfarm-devcli - Versions diffs - 0.21.10 - Mend

@officexapp/vidfarm-devcli 0.21.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (516) hide show

package/.agents/skills/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html ADDED Viewed

@@ -0,0 +1,306 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>asset-fusion · circle-highlight TEMPLATE (drop-in)</title>
+    <!-- ============================================================
+         DROP-IN circle-highlight (editorial amber annotation style). To reuse:
+           1) set CFG below (asset path, EVEN stage dims, BOX from the locate protocol, LABEL)
+           2) render with even width/height (ODD width => ffmpeg encode fails!)
+         BOX comes from grounding/PROTOCOL.md (locate.mjs loop) — NEVER eyeball coords.
+         Everything (wash pool, double ring, connector, callout, brackets) is
+         computed from BOX. Set MODE='full' (ring+label+brackets) or 'circle'
+         (ring only). Gotchas are flagged inline.
+         ============================================================ -->
+    <style>
+      :root {
+        --ink: #0a0c10;
+        --amber: #f2c078;
+        --paper: #f5efe6;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        overflow: hidden;
+        background: var(--ink);
+      }
+      #stage {
+        position: relative;
+        overflow: hidden;
+        background: #fff;
+        font-family:
+          "Inter",
+          -apple-system,
+          system-ui,
+          sans-serif;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+      }
+      #shot {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        z-index: 0;
+      }
+      #wash {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+      }
+      #ann {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        pointer-events: none;
+        overflow: visible;
+      }
+      #ring-a,
+      #ring-b,
+      #conn {
+        stroke: var(--amber);
+        fill: none;
+        stroke-linecap: round;
+      }
+      #ring-a {
+        stroke-width: 8;
+        filter: drop-shadow(0 0 12px rgba(242, 192, 120, 0.5));
+      }
+      #ring-b {
+        stroke-width: 5;
+        opacity: 0.85;
+      }
+      #conn {
+        stroke-width: 5;
+      }
+      #callout {
+        position: absolute;
+        z-index: 4;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 15px 28px;
+        background: var(--ink);
+        border: 2px solid var(--amber);
+        border-radius: 999px;
+        box-shadow: 0 14px 40px rgba(8, 9, 12, 0.6);
+        transform-origin: left center;
+      }
+      #callout .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--amber);
+      }
+      #callout .label {
+        font-size: 33px;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        color: var(--paper);
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      .tick {
+        position: absolute;
+        z-index: 5;
+        width: 56px;
+        height: 56px;
+        border: 3px solid var(--paper);
+        opacity: 0.55;
+      }
+      .tick.tl {
+        top: 44px;
+        left: 44px;
+        border-right: none;
+        border-bottom: none;
+      }
+      .tick.tr {
+        top: 44px;
+        right: 44px;
+        border-left: none;
+        border-bottom: none;
+      }
+      .tick.bl {
+        bottom: 44px;
+        left: 44px;
+        border-right: none;
+        border-top: none;
+      }
+      .tick.br {
+        bottom: 44px;
+        right: 44px;
+        border-left: none;
+        border-top: none;
+      }
+      #scan {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        pointer-events: none;
+        mix-blend-mode: overlay;
+        background: repeating-linear-gradient(
+          to bottom,
+          rgba(245, 239, 230, 0.05) 0 1px,
+          transparent 1px 4px
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ⚠ data-width/height + the #stage width/height MUST be set STATICALLY here
+         (the renderer's StaticGuard reads them at compile time, BEFORE JS runs — JS
+         setAttribute is too late and the render falls back to portrait 1080×1920).
+         Keep these EQUAL to CFG.W/CFG.H below, and EVEN. -->
+    <div
+      id="stage"
+      style="width: 1998px; height: 1368px"
+      data-composition-id="circle-highlight"
+      data-start="0"
+      data-duration="6"
+      data-fps="30"
+      data-width="1998"
+      data-height="1368"
+    >
+      <div class="scene clip" data-start="0" data-duration="6" data-track-index="0">
+        <img id="shot" alt="asset" />
+        <div id="wash"></div>
+        <svg id="ann">
+          <ellipse id="ring-a" />
+          <ellipse id="ring-b" />
+          <path id="conn" />
+        </svg>
+        <div id="callout"><span class="dot"></span><span class="label"></span></div>
+        <div id="scan"></div>
+        <span class="tick tl"></span><span class="tick tr"></span><span class="tick bl"></span
+        ><span class="tick br"></span>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // ====== CONFIG — set these (BOX from the locate protocol) ======
+      const CFG = {
+        asset: "assets/shot.png",
+        W: 1998,
+        H: 1368, // EVEN dims (odd width => encode fails)
+        box: [0.244, 0.277, 0.607, 0.425], // [x0,y0,x1,y1] normalized, from locate.mjs
+        label: "HyperFrames",
+        mode: "full", // 'full' = ring+connector+label+brackets+scan ; 'circle' = ring only
+      };
+      // =====================================================
+      const S = document.getElementById("stage"); // dims are STATIC in the HTML above (must equal CFG.W/H)
+      document.getElementById("shot").src = CFG.asset;
+      const ann = document.getElementById("ann");
+      ann.setAttribute("viewBox", `0 0 ${CFG.W} ${CFG.H}`);
+      ann.setAttribute("width", CFG.W);
+      ann.setAttribute("height", CFG.H);
+      // geometry from BOX
+      const [x0, y0, x1, y1] = CFG.box;
+      const cx = ((x0 + x1) / 2) * CFG.W,
+        cy = ((y0 + y1) / 2) * CFG.H;
+      const bw = (x1 - x0) * CFG.W,
+        bh = (y1 - y0) * CFG.H;
+      const rxA = bw / 2 + 40,
+        ryA = bh / 2 + 42;
+      // wash: a lit radial pool centered on the box, dark elsewhere
+      const px = (((x0 + x1) / 2) * 100).toFixed(1),
+        py = (((y0 + y1) / 2) * 100).toFixed(1);
+      const ex = (((x1 - x0) / 2) * 1.15 * 100).toFixed(1),
+        ey = (((y1 - y0) / 2) * 1.4 * 100).toFixed(1);
+      document.getElementById("wash").style.background =
+        `radial-gradient(ellipse ${ex}% ${ey}% at ${px}% ${py}%, rgba(8,9,12,0) 0%, rgba(8,9,12,.1) 42%, rgba(8,9,12,.66) 70%, rgba(8,9,12,.9) 100%)`;
+      const ra = document.getElementById("ring-a"),
+        rb = document.getElementById("ring-b");
+      ra.setAttribute("cx", cx);
+      ra.setAttribute("cy", cy);
+      ra.setAttribute("rx", rxA);
+      ra.setAttribute("ry", ryA);
+      ra.setAttribute("transform", `rotate(-4 ${cx} ${cy})`);
+      rb.setAttribute("cx", cx);
+      rb.setAttribute("cy", cy);
+      rb.setAttribute("rx", rxA - 20);
+      rb.setAttribute("ry", ryA - 16);
+      rb.setAttribute("transform", `rotate(3 ${cx} ${cy})`);
+      // callout: above-right of the box (flip left if box is on the right edge)
+      const right = cx < CFG.W * 0.62;
+      const co = document.getElementById("callout");
+      co.querySelector(".label").textContent = CFG.label;
+      const coX = right ? Math.min(cx + rxA + 10, CFG.W - 360) : Math.max(cx - rxA - 360, 30);
+      const coY = Math.max(cy - ryA - 60, 40);
+      co.style.left = coX + "px";
+      co.style.top = coY + "px";
+      const conn = document.getElementById("conn");
+      const ex0 = cx + (right ? rxA * 0.75 : -rxA * 0.75),
+        ey0 = cy - ryA * 0.7;
+      conn.setAttribute(
+        "d",
+        `M ${ex0} ${ey0} C ${(ex0 + coX) / 2} ${ey0 - 50}, ${coX - 20} ${coY + 70}, ${coX + 2} ${coY + 26}`,
+      );
+      // ====== seek-safe timeline ======
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // GOTCHA: getTotalLength can read 0 before layout -> dash fails -> a solid
+      // line shows at t=0. Fall back to a constant AND gate with autoAlpha:0.
+      const lenA = ra.getTotalLength() || 1900,
+        lenB = rb.getTotalLength() || 1750,
+        lenC = conn.getTotalLength() || 220;
+      const full = CFG.mode === "full";
+      gsap.set("#wash", { autoAlpha: 0 });
+      gsap.set(ra, { strokeDasharray: lenA, strokeDashoffset: lenA, autoAlpha: 0 });
+      gsap.set(rb, { strokeDasharray: lenB, strokeDashoffset: lenB, autoAlpha: 0 });
+      gsap.set(conn, { strokeDasharray: lenC, strokeDashoffset: lenC, autoAlpha: 0 });
+      gsap.set("#callout", { autoAlpha: 0, scale: 0.6 });
+      gsap.set("#scan", { autoAlpha: 0 });
+      gsap.set(".tick", { autoAlpha: 0 });
+      if (!full) {
+        document.getElementById("conn").remove();
+        document.getElementById("callout").remove();
+        document.getElementById("scan").remove();
+        document.querySelectorAll(".tick").forEach((t) => t.remove());
+      }
+      tl.to("#wash", { autoAlpha: 1, duration: 0.9, ease: "power2.out" }, 0.6);
+      if (full) {
+        tl.to("#scan", { autoAlpha: 1, duration: 0.8 }, 0.7);
+        tl.to(".tick", { autoAlpha: 0.55, duration: 0.5, stagger: 0.06 }, 0.8);
+      }
+      tl.to(ra, { autoAlpha: 1, duration: 0.08 }, 1.3);
+      tl.to(ra, { strokeDashoffset: 0, duration: 0.6, ease: "power2.inOut" }, 1.3);
+      tl.to(rb, { autoAlpha: 1, duration: 0.08 }, 1.68);
+      tl.to(rb, { strokeDashoffset: 0, duration: 0.5, ease: "power2.inOut" }, 1.68);
+      if (full) {
+        tl.to(conn, { autoAlpha: 1, duration: 0.05 }, 2.55);
+        tl.to(conn, { strokeDashoffset: 0, duration: 0.35, ease: "power3.out" }, 2.6);
+        tl.to("#callout", { autoAlpha: 1, scale: 1, duration: 0.45, ease: "back.out(2.4)" }, 2.95);
+      }
+      window.__timelines["circle-highlight"] = tl;
+      tl.seek(0);
+      if (!window.__HYPERFRAMES_HOST__) {
+        const fit = () => {
+          const s = Math.min(innerWidth / CFG.W, innerHeight / CFG.H) * 0.96;
+          S.style.transform = `scale(${s})`;
+          S.style.transformOrigin = "center center";
+          S.style.position = "absolute";
+          S.style.left = "50%";
+          S.style.top = "50%";
+          S.style.marginLeft = -(CFG.W / 2) + "px";
+          S.style.marginTop = -(CFG.H / 2) + "px";
+        };
+        addEventListener("resize", fit);
+        fit();
+        tl.eventCallback("onComplete", () => setTimeout(() => tl.restart(), 1000));
+        tl.play();
+      }
+    </script>
+  </body>
+</html>