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

@mevdragon/vidfarm-devcli 0.14.0 → 0.16.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/workflow-approve-press.html ADDED Viewed

@@ -0,0 +1,606 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene — HyperFrames Workflow Approve & Press</title>
+    <!--
+      Blueprint: workflow-approve-press
+      HyperFrames composition.tsx.
+      Same four-phase choreography, GSAP-driven, seek-safe.
+      Audio (assumed accompanying narration):
+        "This is AI that renders with you, not just for you.
+         Preview the result, render to MP4, then confirm."
+      Sub-phases (local time, 5.5s total):
+        0.17 – 0.72s   Headline "AI edits WITH you" slides down
+        0.50 – 1.10s   Center editor mockup scales in
+        0.67 – 2.17s   Step indicators stagger-enter on the left (3D-tilted)
+        2.00 – 3.33s   Step state machine: 1→complete, 2→active … 2→complete, 3→active
+        3.52 – 4.02s   Confirm MP4 button (3D-tilted right) bouncy entry after render step is active
+        4.22 – 4.72s   Button depression (linear, no overshoot)
+        4.72 – 5.22s   Render confirmed: step 3 completes, color shifts to success green + checkmark pop
+      Asset placeholders:
+        ./assets/editor-demo.mp4  — center product demo video. Replace with a
+                                    real export of the AI-editor flow. The
+                                    composition falls back to a CSS-mockup of
+                                    an editor timeline so it renders without
+                                    network or media files.
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        /* Palette — port of the the source COLORS / TYPOGRAPHY constants */
+        --text-primary: #ffffff;
+        --text-secondary: #cbd5e1;
+        --text-muted: #94a3b8;
+        --brand-purple: #a78bfa;
+        --brand-purple-glow: rgba(167, 139, 250, 0.6);
+        --brand-green: #22c55e;
+        --brand-green-glow: rgba(34, 197, 94, 0.6);
+        --panel-stroke: rgba(255, 255, 255, 0.1);
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+      /* ============================================================
+         BACKGROUND — port of <FrostedGlassBackground />
+         ============================================================ */
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 25% 30%, rgba(167, 139, 250, 0.2), transparent 55%),
+          radial-gradient(ellipse at 80% 70%, rgba(34, 197, 94, 0.12), transparent 55%),
+          linear-gradient(135deg, #1a1530 0%, #0a0815 70%);
+      }
+      /* Ambient warm glow on the right (button side) */
+      .ambient {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          ellipse at 70% 50%,
+          var(--brand-purple-glow) 0%,
+          transparent 40%
+        );
+        opacity: 0.15;
+        pointer-events: none;
+      }
+      /* Vignette */
+      .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
+        pointer-events: none;
+      }
+      /* ============================================================
+         PHASE 1 — HEADLINE
+         ============================================================ */
+      .headline-wrap {
+        position: absolute;
+        top: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        opacity: 0; /* GSAP fades in */
+        text-align: center;
+        white-space: nowrap;
+      }
+      .headline {
+        font-size: 96px;
+        font-weight: 800;
+        line-height: 1.2;
+        letter-spacing: -0.01em;
+        color: var(--text-primary);
+      }
+      .headline .accent {
+        color: var(--brand-purple);
+        text-shadow: 0 0 30px var(--brand-purple-glow);
+      }
+      /* ============================================================
+         PHASE 2 — CENTER DEMO
+         (Falls back to a CSS-mockup editor when ./assets/editor-demo.mp4
+          is missing. The mockup is purely decorative — no animation
+          inside it; the eye reads it as a paused product screenshot.)
+         ============================================================ */
+      .demo-wrap {
+        position: absolute;
+        left: 50%;
+        top: 60%;
+        opacity: 0;
+      }
+      .demo-frame {
+        width: 1000px;
+        height: 600px;
+        border-radius: 16px;
+        overflow: hidden;
+        border: 2px solid var(--panel-stroke);
+        box-shadow:
+          0 0 40px var(--brand-purple-glow),
+          0 20px 60px rgba(0, 0, 0, 0.5);
+        position: relative;
+      }
+      .demo-frame video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      /* CSS-mockup fallback for the editor demo */
+      .demo-mockup {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-rows: 56px 1fr 100px;
+        background: linear-gradient(180deg, #1f1b3a 0%, #15112a 100%);
+      }
+      .mockup-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 0 20px;
+        background: #15112a;
+        border-bottom: 1px solid var(--panel-stroke);
+      }
+      .mockup-toolbar .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .mockup-toolbar .dot.r {
+        background: #ef4444;
+      }
+      .mockup-toolbar .dot.y {
+        background: #eab308;
+      }
+      .mockup-toolbar .dot.g {
+        background: #22c55e;
+      }
+      .mockup-toolbar .title {
+        margin-left: 18px;
+        color: var(--text-secondary);
+        font-size: 16px;
+        font-weight: 500;
+      }
+      .mockup-canvas {
+        position: relative;
+        padding: 30px;
+        overflow: hidden;
+        background:
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 40px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 40px);
+      }
+      .mockup-canvas .preview-box {
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(34, 197, 94, 0.2));
+        border: 1px solid var(--panel-stroke);
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-secondary);
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+      }
+      .mockup-timeline {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding: 14px 20px;
+        background: #15112a;
+        border-top: 1px solid var(--panel-stroke);
+      }
+      .mockup-timeline .track {
+        height: 24px;
+        display: flex;
+        gap: 4px;
+      }
+      .mockup-timeline .clip {
+        height: 100%;
+        border-radius: 4px;
+      }
+      .mockup-timeline .t1 .a {
+        flex: 3;
+        background: var(--brand-purple);
+        opacity: 0.85;
+      }
+      .mockup-timeline .t1 .b {
+        flex: 2;
+        background: var(--brand-purple);
+        opacity: 0.55;
+      }
+      .mockup-timeline .t1 .c {
+        flex: 4;
+        background: var(--brand-purple);
+        opacity: 0.85;
+      }
+      .mockup-timeline .t2 .a {
+        flex: 5;
+        background: var(--brand-green);
+        opacity: 0.75;
+      }
+      .mockup-timeline .t2 .b {
+        flex: 2;
+        background: var(--brand-green);
+        opacity: 0.45;
+      }
+      .mockup-timeline .t2 .c {
+        flex: 2;
+        background: var(--brand-green);
+        opacity: 0.75;
+      }
+      /* ============================================================
+         PHASE 3 — LEFT FLANK: STEP INDICATORS (3D-TILTED)
+         ============================================================ */
+      .steps-flank {
+        position: absolute;
+        left: 100px;
+        top: 55%;
+        transform: translateY(-50%) perspective(800px) rotateY(15deg);
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+      }
+      .step {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        opacity: 0; /* GSAP fades in */
+      }
+      .step-circle {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid var(--text-muted);
+        background-color: transparent;
+        box-shadow: none;
+        transition: none; /* Steps SNAP between states, no CSS transition */
+        flex-shrink: 0;
+      }
+      .step-num {
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-muted);
+      }
+      .step-check {
+        display: none;
+      }
+      .step-label {
+        font-size: 28px;
+        font-weight: 500;
+        color: var(--text-secondary);
+      }
+      /* State machine — toggled via tl.set({ attr: data-state }) */
+      .step[data-state="active"] .step-circle {
+        border-color: var(--brand-purple);
+        box-shadow: 0 0 15px var(--brand-purple-glow);
+      }
+      .step[data-state="active"] .step-num {
+        color: var(--brand-purple);
+      }
+      .step[data-state="active"] .step-label {
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+      .step[data-state="complete"] .step-circle {
+        border-color: var(--brand-green);
+        background-color: var(--brand-green);
+      }
+      .step[data-state="complete"] .step-num {
+        display: none;
+      }
+      .step[data-state="complete"] .step-check {
+        display: inline-flex;
+      }
+      /* ============================================================
+         PHASE 4 — RIGHT FLANK: CONFIRM BUTTON (3D-TILTED)
+         ============================================================ */
+      .button-flank {
+        position: absolute;
+        right: 70px;
+        top: 55%;
+        transform: translateY(-50%) perspective(800px) rotateY(-15deg);
+      }
+      .btn-press {
+        opacity: 0;
+        transform-origin: center center;
+      }
+      .btn {
+        --btn-glow-blur: 20px;
+        padding: 20px 50px;
+        border-radius: 12px;
+        background-color: var(--brand-purple);
+        box-shadow: 0 0 var(--btn-glow-blur) var(--brand-purple-glow);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        color: var(--text-primary);
+        font-size: 36px;
+        font-weight: 700;
+        white-space: nowrap;
+      }
+      .btn-check {
+        display: inline-flex;
+        transform-origin: center center;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="interactive-workflow"
+      data-start="0"
+      data-duration="5.5"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
+    >
+      <!-- Background layers -->
+      <div class="bg"></div>
+      <!-- PHASE 1: Headline -->
+      <div class="headline-wrap">
+        <div class="headline">
+          HyperFrames builds
+          <span class="accent">WITH</span>
+          you
+        </div>
+      </div>
+      <!-- PHASE 2: Center demo (video with CSS-mockup fallback) -->
+      <div class="demo-wrap">
+        <div class="demo-frame">
+          <!--
+            Real asset path (replace for production).
+            If missing, the CSS mockup below shows through the transparent
+            poster region. The video stays muted per HyperFrames rules.
+          -->
+          <!-- Decorative CSS-mockup of an editor — paused screenshot feel. -->
+          <div class="demo-mockup">
+            <div class="mockup-toolbar">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+              <span class="title">HyperFrames — Project: Launch Promo</span>
+            </div>
+            <div class="mockup-canvas">
+              <div class="preview-box">Preview · 1920 × 1080</div>
+            </div>
+            <div class="mockup-timeline">
+              <div class="track t1">
+                <div class="clip a"></div>
+                <div class="clip b"></div>
+                <div class="clip c"></div>
+              </div>
+              <div class="track t2">
+                <div class="clip a"></div>
+                <div class="clip b"></div>
+                <div class="clip c"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- PHASE 3: Left-flank step indicators (3D-tilted +15°) -->
+      <div class="steps-flank">
+        <div class="step step-1" data-step="1" data-state="pending">
+          <div class="step-circle">
+            <span class="step-num">1</span>
+            <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="step-label">Compose HTML Scene</span>
+        </div>
+        <div class="step step-2" data-step="2" data-state="pending">
+          <div class="step-circle">
+            <span class="step-num">2</span>
+            <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="step-label">Seek &amp; Preview</span>
+        </div>
+        <div class="step step-3" data-step="3" data-state="pending">
+          <div class="step-circle">
+            <span class="step-num">3</span>
+            <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="step-label">Render to MP4</span>
+        </div>
+      </div>
+      <!-- PHASE 4: Right-flank confirm button (3D-tilted -15°) -->
+      <div class="button-flank">
+        <div class="btn-press">
+          <div class="btn">
+            <span class="btn-check">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke="#fff"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+            <span class="btn-label">Confirm MP4</span>
+          </div>
+        </div>
+      </div>
+      <!-- Ambient + vignette overlays (pointer-events: none) -->
+      <div class="ambient"></div>
+      <div class="vignette"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // ── Phase boundaries (seconds) — match the blueprint ────────────
+      const HEADLINE_START = 0.17;
+      const HEADLINE_END = 0.72;
+      const VIDEO_START = 0.5;
+      const STEPS_START = 0.67;
+      const STEP_STAGGER = 0.5;
+      const STEP_ACTIVE_T2 = 2.0; // step 1 → complete, step 2 → active
+      const STEP_ACTIVE_T3 = 3.33; // step 2 → complete, step 3 → active
+      const BUTTON_ENTER = 3.52; // after "Render to MP4" becomes active
+      const PRESS_FRAME = 4.22;
+      const PRESS_DURATION = 0.5;
+      const CHECK_POP = PRESS_FRAME + PRESS_DURATION;
+      const SCENE_END = 5.5; // matches data-duration on the root
+      // ── Phase 1: Headline slides down from top ─────────────────────
+      gsap.set(".demo-wrap", { xPercent: -50, yPercent: -50, scale: 0.8, opacity: 0 });
+      gsap.set(".step", { x: -30, opacity: 0 });
+      gsap.set(".btn-press", { scale: 0, opacity: 0 });
+      gsap.set(".btn-check", { scale: 0 });
+      tl.fromTo(
+        ".headline-wrap",
+        { y: -40, opacity: 0 },
+        {
+          y: 0,
+          opacity: 1,
+          duration: HEADLINE_END - HEADLINE_START,
+          ease: "back.out(1.2)", // ≈ the source SPRING_CONFIGS.entrance
+        },
+        HEADLINE_START,
+      );
+      // ── Phase 2: Center demo scales in ─────────────────────────────
+      // HyperFrames syncs the <video> element's currentTime to the seek
+      // position automatically — no .play() call needed (and one here
+      // would break deterministic rendering).
+      tl.to(".demo-wrap", { scale: 1, opacity: 1, duration: 0.6, ease: "power3.out" }, VIDEO_START);
+      // ── Phase 3a: Stagger entry of the step indicators ─────────────
+      tl.to(
+        ".step",
+        {
+          x: 0,
+          opacity: 1,
+          duration: 0.4,
+          ease: "power3.out",
+          stagger: { each: STEP_STAGGER, from: "start" },
+        },
+        STEPS_START,
+      );
+      // ── Phase 3b: Step state machine (snap-toggled here) ──
+      // Step 1 enters in the "active" state because narration starts on it.
+      tl.set(".step-1", { attr: { "data-state": "active" } }, STEPS_START);
+      // First transition — step 1 finishes, step 2 takes over.
+      tl.set(".step-1", { attr: { "data-state": "complete" } }, STEP_ACTIVE_T2);
+      tl.set(".step-2", { attr: { "data-state": "active" } }, STEP_ACTIVE_T2);
+      // Second transition — step 2 finishes, step 3 takes over.
+      tl.set(".step-2", { attr: { "data-state": "complete" } }, STEP_ACTIVE_T3);
+      tl.set(".step-3", { attr: { "data-state": "active" } }, STEP_ACTIVE_T3);
+      // ── Phase 4a: Button bouncy entry ──────────────────────────────
+      tl.to(
+        ".btn-press",
+        { scale: 1, opacity: 1, duration: 0.5, ease: "back.out(1.4)", overwrite: "auto" },
+        BUTTON_ENTER,
+      );
+      // ── Phase 4b: Press (linear depression → linear return) ────────
+      // Two adjacent tweens on .btn-press — end value of (1) = start value of (2).
+      tl.to(".btn-press", { scale: 0.95, duration: 0.1, ease: "power1.out" }, PRESS_FRAME);
+      tl.to(
+        ".btn-press",
+        { scale: 1.0, duration: PRESS_DURATION - 0.1, ease: "power1.in" },
+        PRESS_FRAME + 0.1,
+      );
+      // ── Phase 4c: Color shift + label swap (at press end) ──────────
+      tl.to(
+        ".btn",
+        {
+          backgroundColor: "#15803d",
+          boxShadow: "0 0 25px rgba(21, 128, 61, 0.68)",
+          duration: 0.3,
+          ease: "power2.out",
+        },
+        CHECK_POP,
+      );
+      tl.set(".btn-label", { textContent: "Approved!" }, CHECK_POP);
+      tl.set(".step-3", { attr: { "data-state": "complete" } }, CHECK_POP);
+      // ── Phase 4d: Checkmark pops into view ─────────────────────────
+      // back.out(1.6) ≈ the source spring({ stiffness: 200, damping: 15 }).
+      tl.to(".btn-check", { scale: 1, duration: 0.5, ease: "back.out(1.6)" }, CHECK_POP);
+      // ── Ambient pulsing glow on the button (Math.sin) ──
+      // Source: `glowIntensity = 20 + Math.sin(frame * 0.1) * 10` — i.e. blur
+      // oscillates 10 ↔ 30 around 20, with angular freq 0.1 rad/frame.
+      // At 60fps that's 6 rad/s, so full period ≈ 2π / 6 ≈ 1.05s.
+      // Finite yoyo replaces the continuous sine; `box-shadow` reads the
+      // tweened CSS variable so the blur is actually animatable.
+      const PULSE_PERIOD = 1.05;
+      const PULSE_HALVES = Math.max(2, Math.floor((SCENE_END - BUTTON_ENTER) / (PULSE_PERIOD / 2)));
+      tl.fromTo(
+        ".btn",
+        { "--btn-glow-blur": "10px" }, // source amplitude: 20 ± 10
+        {
+          "--btn-glow-blur": "30px",
+          duration: PULSE_PERIOD / 2,
+          ease: "sine.inOut",
+          yoyo: true,
+          repeat: PULSE_HALVES - 1,
+        },
+        BUTTON_ENTER,
+      );
+      window.__timelines["interactive-workflow"] = tl;
+    </script>
+  </body>
+</html>