dsh-hyperframes 0.2.0 → 0.3.1

package/skills/music-to-video/references/motion-primitives/flash-cut/index.html

@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>flash_cut</title>
+    <script src="../assets/gsap.min.js"></script>
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--hg-bg);
+        font-family: "Inter", system-ui, sans-serif;
+        color: var(--hg-fg);
+        -webkit-font-smoothing: antialiased;
+      }
+      #scene {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .word {
+        position: absolute;
+        font-weight: 900;
+        font-size: 260px;
+        letter-spacing: -0.04em;
+        line-height: 0.95;
+        white-space: nowrap;
+        color: var(--hg-fg);
+        will-change: opacity;
+      }
+      .accent {
+        position: absolute;
+        bottom: 360px;
+        width: 220px;
+        height: 14px;
+        border-radius: 999px;
+        background: var(--hg-violet);
+        will-change: background, transform;
+      }
+      .flash {
+        position: absolute;
+        inset: 0;
+        background: #ffffff;
+        opacity: 0;
+        pointer-events: none;
+        will-change: opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="1.8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="scene" class="clip" data-start="0" data-duration="1.8" data-track-index="1">
+        <div class="stage">
+          <div class="accent" id="accent"></div>
+          <div class="word" id="w0">READY</div>
+          <div class="word" id="w1">IMPACT</div>
+          <div class="word" id="w2">DONE</div>
+        </div>
+        <div class="flash" id="flash"></div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Initial state: first word visible, others hidden, accent violet.
+      tl.set("#w0", { opacity: 1 }, 0);
+      tl.set("#w1", { opacity: 0 }, 0);
+      tl.set("#w2", { opacity: 0 }, 0);
+      tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 0);
+      tl.set("#flash", { opacity: 0 }, 0);
+
+      // Two hits; during each white frame, swap underlying word + accent colour.
+      const hits = [
+        { t: 0.5, from: "#w0", to: "#w1", color: "#a855f7", scaleX: 1.45 },
+        { t: 1.2, from: "#w1", to: "#w2", color: "#f5f5fa", scaleX: 0.7 },
+      ];
+
+      hits.forEach((h) => {
+        // Instant full-frame white flash on the hit.
+        tl.set("#flash", { opacity: 1 }, h.t);
+        // While white (~2 frames at 30fps), swap the revealed state.
+        tl.set(h.from, { opacity: 0 }, h.t + 0.03);
+        tl.set(h.to, { opacity: 1 }, h.t + 0.03);
+        tl.set("#accent", { backgroundColor: h.color, scaleX: h.scaleX }, h.t + 0.03);
+        // Snap the flash back out within ~3 frames.
+        tl.set("#flash", { opacity: 0 }, h.t + 0.06);
+      });
+
+      // Graceful loop: dip back to white at the very end and restore the start
+      // state so the cycle re-enters cleanly on the next pass.
+      tl.set("#flash", { opacity: 1 }, 1.74);
+      tl.set("#w2", { opacity: 0 }, 1.77);
+      tl.set("#w0", { opacity: 1 }, 1.77);
+      tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 1.77);
+      tl.set("#flash", { opacity: 0 }, 1.8);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>

package/skills/music-to-video/references/motion-primitives/gooey-metaball/index.html

@@ -0,0 +1,241 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>17 · gooey_metaball</title>
+    <script src="../assets/gsap.min.js"></script>
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-cyan: #2afff0;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--hg-bg);
+        font-family: "Inter", system-ui, sans-serif;
+        color: var(--hg-fg);
+        -webkit-font-smoothing: antialiased;
+      }
+      #scene {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      .hero {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.04em;
+        color: var(--hg-fg);
+        z-index: 5;
+        pointer-events: none;
+      }
+      .gooey-stage {
+        position: absolute;
+        inset: 0;
+        filter: url(#gooey-filter);
+      }
+      .ball {
+        position: absolute;
+        border-radius: 50%;
+        background: var(--hg-violet-2);
+        top: 50%;
+        left: 50%;
+        will-change: transform;
+        opacity: 0;
+      }
+      .ball.a {
+        width: 280px;
+        height: 280px;
+        background: #7c3aed;
+      }
+      .ball.b {
+        width: 240px;
+        height: 240px;
+        background: #a855f7;
+      }
+      .ball.c {
+        width: 200px;
+        height: 200px;
+        background: #d946ef;
+      }
+      .ball.d {
+        width: 320px;
+        height: 320px;
+        background: #8b5cf6;
+      }
+      .ball.e {
+        width: 180px;
+        height: 180px;
+        background: #c084fc;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
+        <svg style="position: absolute; width: 0; height: 0">
+          <defs>
+            <filter id="gooey-filter">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" />
+              <feColorMatrix
+                in="blur"
+                mode="matrix"
+                values="
+                1 0 0 0 0
+                0 1 0 0 0
+                0 0 1 0 0
+                0 0 0 22 -10"
+                result="gooey"
+              />
+              <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
+            </filter>
+          </defs>
+        </svg>
+
+        <div class="gooey-stage">
+          <div class="ball a" id="ballA"></div>
+          <div class="ball b" id="ballB"></div>
+          <div class="ball c" id="ballC"></div>
+          <div class="ball d" id="ballD"></div>
+          <div class="ball e" id="ballE"></div>
+        </div>
+
+        <div class="hero">GOOEY</div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Initial: all balls collapsed at center
+      ["#ballA", "#ballB", "#ballC", "#ballD", "#ballE"].forEach((id) => {
+        tl.set(id, { xPercent: -50, yPercent: -50, scale: 0, opacity: 0 }, 0);
+      });
+      // Spawn outward
+      tl.to(
+        "#ballA",
+        {
+          xPercent: -50 - 120,
+          yPercent: -50 + 20,
+          scale: 1,
+          opacity: 1,
+          duration: 0.5,
+          ease: "back.out(1.6)",
+        },
+        0.15,
+      );
+      tl.to(
+        "#ballB",
+        {
+          xPercent: -50 + 100,
+          yPercent: -50 + 50,
+          scale: 1,
+          opacity: 1,
+          duration: 0.55,
+          ease: "back.out(1.6)",
+        },
+        0.2,
+      );
+      tl.to(
+        "#ballC",
+        {
+          xPercent: -50 + 30,
+          yPercent: -50 - 80,
+          scale: 1,
+          opacity: 1,
+          duration: 0.55,
+          ease: "back.out(1.6)",
+        },
+        0.25,
+      );
+      tl.to(
+        "#ballD",
+        {
+          xPercent: -50 - 50,
+          yPercent: -50 - 30,
+          scale: 1,
+          opacity: 1,
+          duration: 0.55,
+          ease: "back.out(1.6)",
+        },
+        0.3,
+      );
+      tl.to(
+        "#ballE",
+        {
+          xPercent: -50 + 80,
+          yPercent: -50 - 40,
+          scale: 1,
+          opacity: 1,
+          duration: 0.55,
+          ease: "back.out(1.6)",
+        },
+        0.18,
+      );
+
+      // Idle drift
+      tl.to(
+        "#ballA",
+        { xPercent: "+=20", yPercent: "+=12", duration: 1.0, ease: "sine.inOut" },
+        0.7,
+      );
+      tl.to(
+        "#ballB",
+        { xPercent: "-=18", yPercent: "-=10", duration: 1.0, ease: "sine.inOut" },
+        0.7,
+      );
+      tl.to(
+        "#ballC",
+        { xPercent: "-=15", yPercent: "+=20", duration: 1.0, ease: "sine.inOut" },
+        0.7,
+      );
+      tl.to(
+        "#ballD",
+        { xPercent: "+=25", yPercent: "+=8", duration: 1.0, ease: "sine.inOut" },
+        0.7,
+      );
+      tl.to(
+        "#ballE",
+        { xPercent: "-=22", yPercent: "+=18", duration: 1.0, ease: "sine.inOut" },
+        0.7,
+      );
+
+      // Reveal text behind
+      tl.fromTo(
+        ".hero",
+        { opacity: 0, scale: 0.95 },
+        { opacity: 1, scale: 1, duration: 0.5, ease: "power3.out" },
+        0.6,
+      );
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>

package/skills/music-to-video/references/motion-primitives/hard-cut/index.html

@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>hard_cut</title>
+    <script src="../assets/gsap.min.js"></script>
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--hg-bg);
+        font-family: "Inter", system-ui, sans-serif;
+        color: var(--hg-fg);
+        -webkit-font-smoothing: antialiased;
+      }
+      #scene {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+      }
+      .panel {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .word {
+        font-weight: 900;
+        font-size: 340px;
+        letter-spacing: -0.05em;
+        line-height: 0.9;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
+        <div class="stage" id="stage"></div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Deterministic palette + word list. Variation is derived from index only.
+      const BG = ["#7c3aed", "#0a0a0f", "#ff2a4a", "#2afff0", "#a855f7", "#f5f5fa", "#0a0a0f"];
+      const FG = ["#f5f5fa", "#a855f7", "#0a0a0f", "#0a0a0f", "#0a0a0f", "#7c3aed", "#f5f5fa"];
+      const WORDS = ["CUT", "NOW", "HARD", "SNAP", "STOP", "GO", "CUT"];
+      const STEP = 0.28; // beat interval
+      const N = WORDS.length;
+
+      // Build one full-frame panel per cut, all hidden but the first.
+      const stage = document.getElementById("stage");
+      for (let i = 0; i < N; i++) {
+        const panel = document.createElement("div");
+        panel.className = "panel";
+        panel.id = "p" + i;
+        panel.style.background = BG[i];
+        panel.style.opacity = i === 0 ? "1" : "0";
+        const word = document.createElement("div");
+        word.className = "word";
+        word.style.color = FG[i];
+        word.textContent = WORDS[i];
+        panel.appendChild(word);
+        stage.appendChild(panel);
+      }
+
+      // Sample-accurate 0ms cuts: at each beat, hide current panel, show next.
+      // tl.set has no duration and no ease — brutal instant switching.
+      for (let i = 1; i < N; i++) {
+        const t = i * STEP;
+        tl.set("#p" + (i - 1), { opacity: 0 }, t);
+        tl.set("#p" + i, { opacity: 1 }, t);
+      }
+
+      // Loop gracefully: snap back to the first panel before the clip ends so a
+      // re-entry starts clean on the same color/word it began with.
+      tl.set("#p" + (N - 1), { opacity: 0 }, N * STEP);
+      tl.set("#p0", { opacity: 1 }, N * STEP);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>

package/skills/music-to-video/references/motion-primitives/hypercut-whip/index.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>01 · hypercut_whip</title>
+    <script src="../assets/gsap.min.js"></script>
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--hg-bg);
+        font-family: "Inter", system-ui, sans-serif;
+        color: var(--hg-fg);
+        -webkit-font-smoothing: antialiased;
+      }
+      #scene {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .hero {
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.04em;
+        line-height: 0.95;
+        color: var(--hg-fg);
+        white-space: nowrap;
+        will-change: transform, filter;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
+        <div class="stage"><div class="hero" id="hero">HYPERCUT</div></div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set("#hero", { x: 0, filter: "blur(0px)" }, 0);
+      tl.to("#hero", { x: 1800, filter: "blur(30px)", duration: 0.18, ease: "power4.in" }, 1.65);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>

package/skills/music-to-video/references/motion-primitives/iris-open/index.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>10 · iris_open</title>
+    <script src="../assets/gsap.min.js"></script>
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--hg-bg);
+        font-family: "Inter", system-ui, sans-serif;
+        color: var(--hg-fg);
+        -webkit-font-smoothing: antialiased;
+      }
+      #scene {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      .iris-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        clip-path: circle(0% at 50% 50%);
+        will-change: clip-path;
+        background: linear-gradient(135deg, #1a0033 0%, #0a0a0f 60%);
+      }
+      .iris-stage .hero {
+        font-family: "Playfair Display", serif;
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.04em;
+        line-height: 0.95;
+        color: var(--hg-fg);
+        white-space: nowrap;
+      }
+      .iris-ring {
+        position: absolute;
+        border-radius: 50%;
+        border: 2px solid var(--hg-violet);
+        box-shadow: 0 0 40px var(--hg-violet);
+        opacity: 0;
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
+        <div class="iris-stage">
+          <div class="iris-ring" style="width: 200px; height: 200px"></div>
+          <div class="hero">IRIS</div>
+        </div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(".iris-stage", { clipPath: "circle(0% at 50% 50%)" }, 0);
+      tl.fromTo(
+        ".iris-ring",
+        { scale: 0, opacity: 0.9 },
+        { scale: 9, opacity: 0, duration: 0.85, ease: "expo.out" },
+        0.2,
+      );
+      tl.to(
+        ".iris-stage",
+        { clipPath: "circle(75% at 50% 50%)", duration: 0.9, ease: "expo.out" },
+        0.3,
+      );
+      tl.from(".iris-stage .hero", { y: 40, opacity: 0, duration: 0.6, ease: "power3.out" }, 0.6);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>