npm - @mevdragon/vidfarm-devcli - Versions diffs - 0.13.0 → 0.15.0 - Mend

@mevdragon/vidfarm-devcli 0.13.0 → 0.15.0

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 (427) hide show

package/.agents/skills/hyperframes-animation/examples/messaging-multi-phrase.html ADDED Viewed

@@ -0,0 +1,352 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene — HyperFrames Messaging Multi-Phrase</title>
+    <!--
+      Blueprint: messaging-multi-phrase (HyperFrames preview)
+      HyperFrames-native version of the scene-9-multi-phrase concept.
+      Choreography (3 phrases, ~7.5 seconds total, content-driven duration):
+        Phrase 1 [0.00 – 3.86 s]
+          "With an AI assistant " (21 chars × 0.083 s = 1.75 s)
+        + "you can trust"          (13 chars × 0.083 s = 1.08 s, accent pink)
+        + hold 1.00 s
+        → total 1.75 + 1.08 + 1.00 ≈ 3.83 s (computed by JS)
+        Phrase 2 [3.86 – 5.27 s]
+          "Instant " (8 chars × 0.083 s = 0.67 s)
+        + "insights" (8 chars × 0.083 s = 0.67 s, accent pink)
+        + hold 1.00 s
+        → total 0.67 + 0.67 + 1.00 ≈ 2.33 s, but starts at 3.86 → endTime ≈ 6.18 s
+        Phrase 3 [6.18 – 9.45 s]
+          "Endless "      (8 chars × 0.083 = 0.67 s)
+        + "possibilities" (13 chars × 0.083 = 1.08 s, accent pink)
+        + hold 2.00 s     (longer — closing beat)
+        → total 0.67 + 1.08 + 2.00 ≈ 3.75 s, but starts at 6.18 → endTime ≈ 9.93 s
+        Continuous: cursor blink (square wave via `tl.time() % 1.0`)
+          color, cursor blink. No per-phrase tweens.
+        - No conditional DOM — phrase container exists from t=0 with empty text;
+          onUpdate overwrites textContent in-place at each frame.
+        - TIMELINE is a plain const computed once at script load (no useMemo).
+        - Frames become seconds: charSpeed 2.5 frames → 0.083 s; hold 30 frames → 1.0 s.
+        - Cursor blink: `(t % BLINK_CYCLE) < BLINK_CYCLE / 2 ? 1 : 0` inside the same
+          onUpdate, not a separate component with `useCurrentFrame`.
+        - textContent !== visible guard skips redundant DOM writes during hold windows.
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --text-primary: #ffffff;
+        --text-accent: #32fff6;
+        --text-accent-2: #a3ff7a;
+        --bg: linear-gradient(
+          135deg,
+          #3a3a3a 0%,
+          #17211f 30%,
+          #0b2328 48%,
+          #1f3518 70%,
+          #343434 100%
+        );
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family:
+          "Inter",
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          sans-serif;
+        color: var(--text-primary);
+        -webkit-font-smoothing: antialiased;
+        text-rendering: geometricPrecision;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      /* ============================================================
+         PHRASE STAGE — one shared line with three inline children:
+           .phrase-main   primary-color portion
+           .phrase-accent accent-color portion
+           .phrase-cursor block cursor (color overridden per-frame)
+         `white-space: pre` keeps the trailing space in textMain so the
+         accent doesn't merge with the lead-in.
+         ============================================================ */
+      .phrase-stage {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 150px;
+        font-weight: 800;
+        line-height: 1;
+        letter-spacing: 0;
+        white-space: pre;
+        text-align: center;
+        text-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
+      }
+      .phrase-main {
+        color: var(--text-primary);
+      }
+      .phrase-accent {
+        color: var(--text-accent);
+        text-shadow: 0 0 12px rgba(50, 255, 246, 0.28);
+      }
+      .phrase-cursor {
+        display: inline-block;
+        flex: 0 0 auto;
+        width: 8px;
+        height: 162px; /* ≈ 1.08 × fontSize */
+        background: var(--text-primary);
+        margin-left: 12px;
+        vertical-align: middle;
+        transform: translateY(10px); /* baseline alignment */
+        will-change: opacity, background-color;
+        box-shadow: 0 0 12px rgba(50, 255, 246, 0.36);
+      }
+      /* ============================================================
+         BACKGROUND TINT — subtle radial glow so pure black doesn't
+         feel sterile. Drops to ~rgb(8,8,12) at corners.
+         ============================================================ */
+      .bg-tint {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 42% 48%, rgba(24, 217, 232, 0.32), transparent 42%),
+          radial-gradient(ellipse at 58% 52%, rgba(123, 234, 90, 0.26), transparent 44%),
+          radial-gradient(ellipse at 50% 50%, rgba(8, 16, 18, 0.42), transparent 70%);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="multi-phrase-scene"
+        class="stage clip"
+        data-start="0"
+        data-duration="7.5"
+        data-track-index="1"
+      >
+        <div class="bg-tint"></div>
+        <div class="phrase-stage">
+          <span class="phrase-main"></span><span class="phrase-accent"></span
+          ><span class="phrase-cursor"></span>
+        </div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      /* ============================================================
+         SCRIPT — content + per-phrase timing config.
+         Change SCRIPT and the timeline reshapes itself.
+         ============================================================ */
+      const SCRIPT = [
+        {
+          textMain: "Build video with ",
+          textAccent: "HTML",
+          charSpeed: 0.083, // seconds per character (= 2.5 frames @ 30 fps)
+          hold: 1.0,
+        },
+        {
+          textMain: "Seek ",
+          textAccent: "any frame",
+          charSpeed: 0.083,
+          hold: 1.0,
+        },
+        {
+          textMain: "Render to ",
+          textAccent: "MP4",
+          charSpeed: 0.083,
+          hold: 2.0, // longer closing beat
+        },
+      ];
+      /* ============================================================
+         TIMELINE — flat reduce, computed once.
+         Each entry gains absolute startTime + endTime in seconds.
+         ============================================================ */
+      let acc = 0;
+      const TIMELINE = SCRIPT.map((item) => {
+        const totalChars = item.textMain.length + item.textAccent.length;
+        const typingDuration = totalChars * item.charSpeed;
+        const totalDuration = typingDuration + item.hold;
+        const start = acc;
+        const end = start + totalDuration;
+        acc = end;
+        return Object.assign({}, item, {
+          startTime: start,
+          endTime: end,
+          typingDuration,
+        });
+      });
+      const TOTAL = TIMELINE[TIMELINE.length - 1].endTime;
+      // TOTAL ≈ 9.93s with the SCRIPT above. The composition root caps at 7.5s
+      // (data-duration), which is the actual render window — phrases 1+2 fit
+      // comfortably; phrase 3 holds long enough that any time after ~6.18s is
+      // already on the closing line. Adjust SCRIPT durations to fit your budget.
+      /* ============================================================
+         COLORS & BLINK
+         ============================================================ */
+      const MAIN_COLOR = "#FFFFFF";
+      const ACCENT_COLOR = "#32FFF6";
+      const BLINK_CYCLE = 1.0; // seconds — 0.5s on, 0.5s off (matches 30-frame square wave)
+      const mainEl = document.querySelector(".phrase-main");
+      const accentEl = document.querySelector(".phrase-accent");
+      const cursorEl = document.querySelector(".phrase-cursor");
+      /* ============================================================
+         MASTER ENGINE — single onUpdate writes text + cursor every frame.
+         ============================================================ */
+      // Cache the most-recently-active phrase index for seek-safe scans.
+      let lastIdx = 0;
+      function findPhrase(t) {
+        // Hot path: same phrase still active
+        if (t >= TIMELINE[lastIdx].startTime && t < TIMELINE[lastIdx].endTime) {
+          return TIMELINE[lastIdx];
+        }
+        // Cold path: linear scan (handles forward + backward seeks)
+        for (let i = 0; i < TIMELINE.length; i++) {
+          if (t >= TIMELINE[i].startTime && t < TIMELINE[i].endTime) {
+            lastIdx = i;
+            return TIMELINE[i];
+          }
+        }
+        return null;
+      }
+      function renderAt(t) {
+        // ----- Cursor blink (square wave, runs always) -----
+        cursorEl.style.opacity = t % BLINK_CYCLE < BLINK_CYCLE / 2 ? "1" : "0";
+        // ----- Find current phrase -----
+        const phrase = findPhrase(t);
+        if (!phrase) {
+          if (mainEl.textContent !== "") mainEl.textContent = "";
+          if (accentEl.textContent !== "") accentEl.textContent = "";
+          cursorEl.style.background = MAIN_COLOR;
+          return;
+        }
+        // ----- Compute visible characters -----
+        const activeT = t - phrase.startTime;
+        const charIdx = Math.floor(activeT / phrase.charSpeed);
+        const mainLen = phrase.textMain.length;
+        const visMain = phrase.textMain.slice(0, Math.min(charIdx, mainLen));
+        const accentLen = Math.max(0, charIdx - mainLen);
+        const visAccent = phrase.textAccent.slice(0, accentLen);
+        // ----- DOM writes (guarded) -----
+        if (mainEl.textContent !== visMain) mainEl.textContent = visMain;
+        if (accentEl.textContent !== visAccent) accentEl.textContent = visAccent;
+        // ----- Cursor color follows active segment -----
+        const inAccent = visMain.length === mainLen && visAccent.length > 0;
+        cursorEl.style.background = inAccent ? ACCENT_COLOR : MAIN_COLOR;
+      }
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: 7.5, // matches data-duration; clips the timeline
+          ease: "none",
+          onUpdate: () => renderAt(tl.time()),
+        },
+        0,
+      );
+      const pauseTimeline = tl.pause.bind(tl);
+      tl.pause = (time, suppressEvents) => {
+        const result = pauseTimeline(time, suppressEvents);
+        if (typeof time === "number") renderAt(time);
+        return result;
+      };
+      function wrapSeekOwner(owner) {
+        if (!owner || owner.__multiPhraseSeekWrapped) return;
+        let currentSeek = owner.seek;
+        Object.defineProperty(owner, "seek", {
+          configurable: true,
+          get: () => currentSeek,
+          set: (value) => {
+            if (typeof value !== "function") {
+              currentSeek = value;
+              return;
+            }
+            currentSeek = function (time) {
+              const result = value.apply(this, arguments);
+              if (typeof time === "number") renderAt(time);
+              return result;
+            };
+          },
+        });
+        owner.seek = currentSeek;
+        owner.__multiPhraseSeekWrapped = true;
+      }
+      function installWindowSeekHook(key) {
+        if (window[key]) {
+          wrapSeekOwner(window[key]);
+          return;
+        }
+        let pendingOwner;
+        Object.defineProperty(window, key, {
+          configurable: true,
+          get: () => pendingOwner,
+          set: (value) => {
+            pendingOwner = value;
+            wrapSeekOwner(value);
+          },
+        });
+      }
+      installWindowSeekHook("__player");
+      installWindowSeekHook("__hf");
+      renderAt(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>