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/takeover-ticker-displace.html ADDED Viewed

@@ -0,0 +1,347 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 5 — HyperFrames Displace Reveal</title>
+    <!--
+      HyperFrames composition.tsx.
+      Choreography (4 phases, 7.5 seconds total):
+        0.00 – 0.67s   Typewriter reveals "HyperFrames turns" (3 → 17 chars)
+        1.67 – 2.22s   Ticker scrolls: HTML → motion
+        3.33 – 3.88s   Ticker scrolls: motion → video
+        4.60 – 5.45s   Logo enters from offscreen-right with rotation + scale impact
+                       Text group pushed left + fades (40-50% of hero duration)
+        6.60 – 7.50s   Logo breathes (dual-frequency sine onUpdate, multiplicative on 1.3 scale)
+          tuned to 40-50% of hero duration so the impact reads as causal
+        - Breathing uses Form 2 (onUpdate) so it multiplies onto the 1.3 final scale,
+          not overwrites it (Form 1 yoyo would undo the impact)
+        - Two breathing periods (1.0s scale, 1.33s rotation) for organic feel
+        - Logo uses a local static image asset referenced with a plain URL
+    -->
+    <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: #f8fafc;
+        --accent: #18d9e8;
+        --accent-2: #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);
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      /* Text group — typewriter + ticker side by side, displaced as a unit */
+      .text-group {
+        position: absolute;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 20px;
+      }
+      .typewriter {
+        height: 168px; /* = ITEM_HEIGHT (FONT_SIZE × 1.2) */
+        display: flex;
+        align-items: center;
+        color: var(--text);
+        font-weight: 400;
+        font-size: 140px;
+        line-height: 1;
+        white-space: pre;
+        text-shadow: 0 0 36px rgba(24, 217, 232, 0.18);
+      }
+      /* Vertical ticker */
+      .ticker-window {
+        height: 168px;
+        overflow: hidden;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .ticker-stack {
+        display: flex;
+        flex-direction: column;
+        will-change: transform;
+      }
+      .ticker-item {
+        height: 168px;
+        display: flex;
+        align-items: center;
+        color: var(--accent);
+        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 700;
+        font-size: 140px;
+        padding-left: 20px;
+        line-height: 1;
+        white-space: pre;
+      }
+      /* Hero logo — enters from offscreen right */
+      .hero {
+        position: absolute;
+        width: 440px;
+        height: 440px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 20; /* above text during overlap */
+        opacity: 0; /* fromTo will animate */
+      }
+      .hero .logo-mark {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: 52px;
+        box-shadow:
+          0 0 70px rgba(24, 217, 232, 0.28),
+          0 0 120px rgba(123, 234, 90, 0.18);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="stage clip"
+        data-start="0"
+        data-duration="7.5"
+        data-track-index="1"
+        id="displace-stage"
+      >
+        <!-- Text group: typewriter + ticker -->
+        <div class="text-group" id="text-group">
+          <div class="typewriter">
+            <span class="typewriter-text">Hyp</span>
+          </div>
+          <div class="ticker-window">
+            <div class="ticker-stack">
+              <div class="ticker-item">HTML</div>
+              <div class="ticker-item">motion</div>
+              <div class="ticker-item">video</div>
+            </div>
+          </div>
+        </div>
+        <!-- Hero logo asset -->
+        <div class="hero" id="hero-logo">
+          <!-- Inline-SVG placeholder mark — swap for your logo image -->
+          <svg class="logo-mark" viewBox="0 0 100 100" role="img" aria-label="HyperFrames">
+            <defs>
+              <linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0" stop-color="#8b7bff" />
+                <stop offset="1" stop-color="#3ddc97" />
+              </linearGradient>
+            </defs>
+            <rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
+            <text
+              x="50"
+              y="63"
+              text-anchor="middle"
+              font-family="Inter, system-ui, sans-serif"
+              font-size="40"
+              font-weight="800"
+              fill="#fff"
+            >
+              HF
+            </text>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <script>
+      /* ================================================================
+         CONSTANTS
+         ================================================================ */
+      const TOTAL_DURATION = 7.5;
+      const FONT_SIZE = 140;
+      const ITEM_HEIGHT = FONT_SIZE * 1.2; // = 168 px
+      const TIMING = {
+        // Phase 1: typewriter
+        typeStart: 0.0,
+        typeDur: 0.67,
+        typeStartLen: 3, // pre-render the first 3 chars
+        // Phase 2: ticker steps
+        ticker1At: 1.67, // HTML → motion
+        ticker2At: 3.33, // motion → video
+        stepDur: 0.55,
+        // Phase 3: reactive displacement
+        displaceAt: 4.6,
+        heroDur: 0.85, // matches spring(mass:1.5) settle
+        offscreenX: 800, // hero starts here
+        pushDist: -150, // text pushed THIS direction
+        // Phase 4: breathing
+        idleStart: 6.6, // displaceAt + heroDur + ~1.15s buffer
+      };
+      const FULL_TEXT = "HyperFrames turns";
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+      /* ----------------------------------------------------------------
+         PHASE 1: Typewriter (smooth slice)
+         ---------------------------------------------------------------- */
+      const typewriterEl = document.querySelector(".typewriter-text");
+      const typeProxy = { progress: TIMING.typeStartLen };
+      tl.to(
+        typeProxy,
+        {
+          progress: FULL_TEXT.length,
+          duration: TIMING.typeDur,
+          ease: "none",
+          onUpdate: () => {
+            const len = Math.floor(typeProxy.progress);
+            const next = FULL_TEXT.slice(0, len);
+            if (typewriterEl.textContent !== next) typewriterEl.textContent = next;
+          },
+        },
+        TIMING.typeStart,
+      );
+      /* ----------------------------------------------------------------
+         PHASE 2: Vertical ticker (2 steps: HTML → motion → video)
+         ---------------------------------------------------------------- */
+      tl.to(
+        ".ticker-stack",
+        {
+          y: `-=${ITEM_HEIGHT}`,
+          duration: TIMING.stepDur,
+          ease: "back.out(1.4)", // spring(stiffness:120, damping:14)
+        },
+        TIMING.ticker1At,
+      );
+      tl.to(
+        ".ticker-stack",
+        {
+          y: `-=${ITEM_HEIGHT}`,
+          duration: TIMING.stepDur,
+          ease: "back.out(1.4)",
+        },
+        TIMING.ticker2At,
+      );
+      /* ----------------------------------------------------------------
+         PHASE 3: Reactive displacement — three concurrent tweens.
+         ---------------------------------------------------------------- */
+      // (1) Hero enters with rotation + scale impact, lands at scale 1.3.
+      tl.fromTo(
+        ".hero",
+        { x: TIMING.offscreenX, scale: 0.5, rotation: -45, opacity: 0 },
+        {
+          x: 0,
+          scale: 1.3,
+          rotation: 0,
+          opacity: 1,
+          duration: TIMING.heroDur,
+          ease: "power2.out", // spring(stiffness:100, damping:20, mass:1.5)
+        },
+        TIMING.displaceAt,
+      );
+      // (2) Text pushed left. Completes at 50% of hero duration → immediate impact.
+      tl.to(
+        ".text-group",
+        { x: TIMING.pushDist, duration: TIMING.heroDur * 0.5, ease: "power2.out" },
+        TIMING.displaceAt,
+      );
+      // (3) Text fades. Completes at 40% → fades slightly before push lands.
+      tl.to(
+        ".text-group",
+        { opacity: 0, duration: TIMING.heroDur * 0.4, ease: "power2.out" },
+        TIMING.displaceAt,
+      );
+      /* ----------------------------------------------------------------
+         PHASE 4: Breathing — onUpdate so it MULTIPLIES onto the 1.3 scale.
+         Dual frequencies (1.0s scale, 1.33s rotation) for organic motion.
+         ---------------------------------------------------------------- */
+      const heroEl = document.querySelector(".hero");
+      const HERO_FINAL_SCALE = 1.3;
+      const HERO_FINAL_ROTATION = 0;
+      const SCALE_PERIOD = 1.0; // seconds per scale cycle
+      const ROTATE_PERIOD = 1.333; // seconds per rotation cycle — not a simple ratio of SCALE_PERIOD
+      const SCALE_AMP = 0.05;
+      const ROTATE_AMP = 3;
+      const breathDur = TOTAL_DURATION - TIMING.idleStart;
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: breathDur,
+          ease: "none",
+          onUpdate: function () {
+            const idleTime = Math.max(0, tl.time() - TIMING.idleStart);
+            const omegaS = (idleTime / SCALE_PERIOD) * Math.PI * 2;
+            const omegaR = (idleTime / ROTATE_PERIOD) * Math.PI * 2;
+            gsap.set(heroEl, {
+              scale: HERO_FINAL_SCALE * (1 + Math.sin(omegaS) * SCALE_AMP),
+              rotation: HERO_FINAL_ROTATION + Math.sin(omegaR) * ROTATE_AMP,
+            });
+          },
+        },
+        TIMING.idleStart,
+      );
+    </script>
+  </body>
+</html>