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

@mevdragon/vidfarm-devcli 0.14.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 (418) hide show

package/.agents/skills/hyperframes-animation/examples/concept-demo-decode-pan.html ADDED Viewed

@@ -0,0 +1,520 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 7 — HyperFrames Decrypt Pan Track</title>
+    <!--
+      HyperFrames composition.tsx.
+      Choreography (4 phases, 7 seconds total):
+        0.0 – 0.7s   Shot 1 static text fades in + rises ("HyperFrames renders")
+        0.7 – 1.6s   Hacker-flip decodes the accent word ("video")
+        2.8 – 3.5s   Horizontal pan to Shot 2 with parallax exit + scale-in
+        3.7 – 6.1s   Cursor-tracked typing: "HTML, CSS and JS become MP4"
+          (NOT @the source/layout-utils, NOT a charWidthRatio constant)
+        - Bar width pre-allocated from the full text — never tweened
+        - Camera follows cursor by tweening the strip's `x`, with a piecewise
+          Math.min(initialOffset, trackingOffset) for the two-phase camera
+        - Hacker-flip glyph flicker via deterministic int hash, not Math.random
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --bg: linear-gradient(
+          135deg,
+          #3a3a3a 0%,
+          #17211f 30%,
+          #0b2328 48%,
+          #1f3518 70%,
+          #343434 100%
+        );
+        --text-dark: #f8fafc;
+        --text-highlight: #18d9e8;
+        --text-highlight-2: #7bea5a;
+        --search-bg: rgba(14, 24, 23, 0.82);
+        --cursor: #7bea5a;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-dark);
+      }
+      .viewport {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+      .strip {
+        display: flex;
+        height: 100%;
+        will-change: transform;
+      }
+      .shot {
+        width: 1920px;
+        height: 100%;
+        position: relative;
+        flex-shrink: 0;
+      }
+      /* ============================================================
+         SHOT 1 — "HyperFrames renders video"
+         ============================================================ */
+      .shot1-content {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0; /* GSAP fromTo fades in */
+      }
+      .shot1-row {
+        display: flex;
+        align-items: baseline;
+        gap: 0.4em;
+        font-size: 130px;
+      }
+      .shot1-static {
+        font-weight: 500;
+        color: var(--text-dark);
+        text-shadow: 0 0 36px rgba(24, 217, 232, 0.18);
+      }
+      .shot1-accent {
+        font-weight: 700;
+        display: flex;
+        perspective: 800px; /* required for the per-glyph rotateX */
+      }
+      .flip-glyph {
+        position: relative;
+        display: inline-block;
+        min-width: 0;
+      }
+      .flip-glyph.space {
+        min-width: 0.4em;
+      }
+      .flip-glyph .ghost {
+        opacity: 0;
+      }
+      .flip-glyph .anim {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        color: var(--text-highlight);
+        background: linear-gradient(135deg, var(--text-highlight) 0%, var(--text-highlight-2) 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        filter: drop-shadow(0 0 24px rgba(24, 217, 232, 0.32))
+          drop-shadow(0 0 36px rgba(123, 234, 90, 0.22));
+        opacity: 0;
+        transform: perspective(600px) rotateX(90deg);
+        transform-origin: bottom;
+        backface-visibility: hidden;
+      }
+      /* ============================================================
+         SHOT 2 — Search bar with cursor-tracked typing
+         ============================================================ */
+      .shot2-bar {
+        position: absolute;
+        top: 50%;
+        /* left set by JS once we know the bar's world coordinate */
+        height: 240px;
+        background: var(--search-bg);
+        border: 1px solid rgba(123, 234, 90, 0.22);
+        box-shadow:
+          0 0 60px rgba(24, 217, 232, 0.2),
+          0 0 96px rgba(123, 234, 90, 0.14),
+          inset 0 0 32px rgba(24, 217, 232, 0.08);
+        border-radius: 999px;
+        display: flex;
+        align-items: center;
+        padding-left: 120px;
+        padding-right: 180px;
+        opacity: 0; /* GSAP fromTo fades in */
+        transform-origin: left center;
+      }
+      .search-text {
+        font-size: 120px;
+        font-weight: 400;
+        color: var(--text-dark);
+        text-shadow: 0 0 24px rgba(248, 250, 252, 0.16);
+        white-space: pre;
+        line-height: 1;
+      }
+      .search-cursor {
+        font-size: 120px;
+        color: var(--cursor);
+        text-shadow: 0 0 26px rgba(123, 234, 90, 0.42);
+        margin-left: 4px;
+        font-weight: 300;
+        line-height: 1;
+      }
+      /* Hidden probe used by measureNodeWidth */
+      .measure-probe {
+        position: absolute;
+        left: -99999px;
+        top: -99999px;
+        visibility: hidden;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="viewport" data-layout-allow-overflow>
+        <div class="strip" data-layout-allow-overflow>
+          <!-- =====================================================
+               SHOT 1 — "HyperFrames renders video"
+               ===================================================== -->
+          <div
+            id="shot-decode"
+            class="shot shot1 clip"
+            data-start="0"
+            data-duration="3.5"
+            data-track-index="1"
+          >
+            <div class="shot1-content">
+              <div class="shot1-row">
+                <span class="shot1-static">HyperFrames renders</span>
+                <span class="shot1-accent" aria-label="video">
+                  <!-- .flip-glyph spans generated by JS -->
+                </span>
+              </div>
+            </div>
+          </div>
+          <!-- =====================================================
+               SHOT 2 — Search bar typing
+               ===================================================== -->
+          <div
+            id="shot-typing"
+            class="shot shot2 clip"
+            data-start="2.5"
+            data-duration="4.5"
+            data-track-index="2"
+          >
+            <div class="shot2-bar">
+              <span class="search-text"></span><span class="search-cursor">_</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      /* ================================================================
+         CONSTANTS — all baked at setup time.
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const COMPOSITION_DURATION = 7;
+      const FPS_HASH = 60; // synthetic clock for the flicker hash
+      const TIMING = {
+        // Phase 1: shot1 text fades in + rises
+        shot1EntryStart: 0.0,
+        shot1EntryDur: 0.67,
+        // Phase 2: hacker-flip "video"
+        flipStart: 0.7,
+        flipStagger: 0.066, // ~2 frames at 30fps per glyph
+        flipDuration: 0.55,
+        // Phase 3: horizontal pan
+        panStart: 2.83,
+        panDuration: 0.67,
+        // Phase 4: cursor-tracked typing
+        typingStart: 3.67, // panStart + panDuration + 0.17 buffer
+        charRate: 0.083, // seconds per character (~2.5 frames at 30fps)
+      };
+      const FULL_TEXT = "HTML, CSS and JS become MP4";
+      const FONT_SIZE = 120;
+      const PADDING_LEFT = 120;
+      const PADDING_RIGHT = 180;
+      const CURSOR_VIS_W = FONT_SIZE * 0.6; // visual cursor width approximation
+      const CURSOR_TARGET = W * 0.7; // screen X where cursor locks
+      const BAR_LEFT_MARGIN = 80; // initial left margin in Phase 4
+      const PARALLAX_DIST = 400; // px Shot 1 moves extra during pan
+      /* ================================================================
+         BUILD DOM — flip glyphs (Shot 1) generated synchronously.
+         The accent text is "video" → 5 glyphs.
+         ================================================================ */
+      const accentEl = document.querySelector(".shot1-accent");
+      const ACCENT_WORD = "video";
+      ACCENT_WORD.split("").forEach((char, index) => {
+        const span = document.createElement("span");
+        span.className = "flip-glyph" + (char === " " ? " space" : "");
+        span.dataset.char = char;
+        span.dataset.index = String(index);
+        // Each glyph needs its own font-size to match the surrounding row.
+        span.style.fontSize = "130px";
+        const ghost = document.createElement("span");
+        ghost.className = "ghost";
+        ghost.textContent = char === " " ? " " : char;
+        const anim = document.createElement("span");
+        anim.className = "anim";
+        anim.textContent = char === " " ? " " : char;
+        span.append(ghost, anim);
+        accentEl.appendChild(span);
+      });
+      /* ================================================================
+         TEXT MEASUREMENT — uses a hidden DOM probe so we capture
+         real letter-spacing, kerning, and font-feature widths.
+         Must run AFTER document.fonts.ready.
+         ================================================================ */
+      function measureNodeWidth(text, font) {
+        const probe = document.createElement("span");
+        probe.className = "measure-probe";
+        probe.style.font = font;
+        probe.style.whiteSpace = "pre";
+        probe.textContent = text;
+        document.body.appendChild(probe);
+        const width = probe.getBoundingClientRect().width;
+        probe.remove();
+        return width;
+      }
+      /* ================================================================
+         TIMELINE BUILD — fires after fonts are ready so measurements
+         use the real rendered metrics, not fallback fonts.
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // Register early so HF can find it; tweens are added below.
+      window.__timelines["main"] = tl;
+      document.fonts.ready.then(() => {
+        const searchFont = `400 ${FONT_SIZE}px Inter, system-ui, sans-serif`;
+        const fullTextWidth = measureNodeWidth(FULL_TEXT, searchFont);
+        const barWidth = PADDING_LEFT + fullTextWidth + CURSOR_VIS_W + PADDING_RIGHT;
+        // Pre-allocate the bar's final width — no width tweens ever.
+        const barEl = document.querySelector(".shot2-bar");
+        barEl.style.width = barWidth + "px";
+        // Initial bar position in Shot 2's local space.
+        // We position it at LEFT_MARGIN from the shot's left edge.
+        barEl.style.left = BAR_LEFT_MARGIN + "px";
+        barEl.style.transform = "translateY(-50%)"; // vertical center
+        // ============================================================
+        // PHASE 1: Shot 1 text fade in + rise
+        // ============================================================
+        tl.fromTo(
+          ".shot1-content",
+          { opacity: 0, y: 30 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: TIMING.shot1EntryDur,
+            ease: "power2.out",
+          },
+          TIMING.shot1EntryStart,
+        );
+        // ============================================================
+        // PHASE 2: Hacker-flip "video"
+        // ============================================================
+        const CHAR_POOL = "abcdefghijklmnopqrstuvwxyz";
+        const FLICKER = 3;
+        const REVEAL_AT = 0.6;
+        // Deterministic 32-bit mix — replaces Math.random / seeded RNG.
+        function pseudoHash(i, t) {
+          return ((i * 374761393 + t * 668265263) >>> 0) % CHAR_POOL.length;
+        }
+        document.querySelectorAll(".flip-glyph").forEach((glyph) => {
+          const index = Number(glyph.dataset.index);
+          const real = glyph.dataset.char === " " ? " " : glyph.dataset.char;
+          const anim = glyph.querySelector(".anim");
+          const start = TIMING.flipStart + index * TIMING.flipStagger;
+          tl.fromTo(
+            anim,
+            { rotationX: 90, opacity: 0, "--p": 0 },
+            {
+              rotationX: 0,
+              opacity: 1,
+              "--p": 1,
+              duration: TIMING.flipDuration,
+              ease: "back.out(1.6)", // spring(stiffness:150, damping:14)
+              onUpdate: function () {
+                const p = Number(gsap.getProperty(anim, "--p"));
+                if (p >= REVEAL_AT) {
+                  if (anim.textContent !== real) anim.textContent = real;
+                } else {
+                  const localFrame = Math.floor((tl.time() - start) * FPS_HASH);
+                  const bucket = Math.max(0, Math.floor(localFrame / FLICKER));
+                  anim.textContent = CHAR_POOL[pseudoHash(index, bucket)];
+                }
+              },
+            },
+            start,
+          );
+        });
+        // ============================================================
+        // PHASE 3: Horizontal pan + parallax exit + Shot 2 entry
+        // All three tweens at the same timeline position run in parallel.
+        // ============================================================
+        // (a) Camera pan — strip slides one full viewport left.
+        tl.to(
+          ".strip",
+          {
+            x: -W,
+            duration: TIMING.panDuration,
+            ease: "power3.inOut", // cinematic slow-in-slow-out
+          },
+          TIMING.panStart,
+        );
+        // (b) Shot 1 parallax exit — content moves EXTRA -PARALLAX_DIST.
+        tl.to(
+          ".shot1-content",
+          {
+            x: -PARALLAX_DIST,
+            duration: TIMING.panDuration,
+            ease: "power3.inOut",
+          },
+          TIMING.panStart,
+        );
+        // Shot 1 fades out partway through the pan so the eye lands on Shot 2.
+        tl.to(
+          ".shot1-content",
+          {
+            opacity: 0,
+            duration: TIMING.panDuration * 0.4,
+            ease: "power2.out",
+          },
+          TIMING.panStart,
+        );
+        // (c) Shot 2 bar entry — fade + scale with mild overshoot ("landing").
+        tl.fromTo(
+          ".shot2-bar",
+          { opacity: 0, scale: 0.8 },
+          {
+            opacity: 1,
+            scale: 1,
+            duration: TIMING.panDuration,
+            ease: "back.out(1.2)",
+          },
+          TIMING.panStart,
+        );
+        // ============================================================
+        // PHASE 4: Cursor-tracked typing.
+        //
+        // The strip is now at x = -W (Shot 2 fully on screen). For the
+        // cursor-track effect we'll *further* shift the strip by a piecewise
+        // amount: hold initial offset while the empty bar's cursor is left
+        // of CURSOR_TARGET, then follow once typing pushes it past.
+        // ============================================================
+        const searchTextEl = document.querySelector(".search-text");
+        const stripEl = document.querySelector(".strip");
+        const CURSOR_WIDTH_HALF = CURSOR_VIS_W / 2;
+        const STRIP_BASE_X = -W; // strip's x at the end of Phase 3
+        // Initial Phase-4 offset = 0 (no additional shift on top of -W).
+        // i.e. bar already sits at BAR_LEFT_MARGIN inside Shot 2.
+        const INITIAL_OFFSET = 0;
+        // Typing driver — a clock that runs from 0 to FULL_TEXT.length.
+        const typingProxy = { progress: 0 };
+        const typingDur = FULL_TEXT.length * TIMING.charRate;
+        const typingEnd = TIMING.typingStart + typingDur;
+        const postTypingHold = Math.max(0, COMPOSITION_DURATION - typingEnd);
+        tl.to(
+          typingProxy,
+          {
+            progress: FULL_TEXT.length,
+            duration: typingDur,
+            ease: "none",
+            onUpdate: function () {
+              const charsTyped = Math.min(FULL_TEXT.length, Math.floor(typingProxy.progress));
+              const visibleText = FULL_TEXT.slice(0, charsTyped);
+              if (searchTextEl.textContent !== visibleText) {
+                searchTextEl.textContent = visibleText;
+              }
+              // Measure current visible width to compute cursor screen position.
+              // Cheap because Inter's metrics are cached after the first call.
+              const visibleW =
+                visibleText.length === 0 ? 0 : measureNodeWidth(visibleText, searchFont);
+              // Cursor X in *Shot 2's* coordinate system:
+              //   shot left edge → bar left edge (BAR_LEFT_MARGIN)
+              //                  → cursor within bar (PADDING_LEFT + visibleW + CURSOR_WIDTH_HALF)
+              const cursorXInShot2 = BAR_LEFT_MARGIN + PADDING_LEFT + visibleW + CURSOR_WIDTH_HALF;
+              // For the cursor to land at CURSOR_TARGET on the *screen*, the
+              // strip must be shifted by:
+              //   stripX = CURSOR_TARGET - cursorXInShot2 - W   (the -W accounts
+              //   for Shot 2 being the SECOND shot in the strip)
+              const trackingStripX = CURSOR_TARGET - cursorXInShot2 - W;
+              // Piecewise: hold STRIP_BASE_X + INITIAL_OFFSET until tracking
+              // would pan FURTHER LEFT than the base, then follow.
+              const finalStripX = Math.min(STRIP_BASE_X + INITIAL_OFFSET, trackingStripX);
+              gsap.set(stripEl, { x: finalStripX });
+            },
+          },
+          TIMING.typingStart,
+        );
+        if (postTypingHold > 0) {
+          tl.to(
+            ".search-cursor",
+            {
+              opacity: 0.22,
+              duration: postTypingHold / 2,
+              repeat: 1,
+              yoyo: true,
+              ease: "none",
+            },
+            typingEnd,
+          );
+        }
+      });
+    </script>
+  </body>
+</html>