dsh-hyperframes 0.3.1 → 0.4.0

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

@@ -0,0 +1,206 @@
+<template id="gooey-metaball-template">
+  <div data-composition-id="gooey-metaball" data-width="1920" data-height="1080" data-duration="2">
+    <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;
+      }
+      .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>
+    <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>
+    <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["gooey-metaball"] = tl;
+    </script>
+  </div>
+</template>

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

@@ -13,11 +13,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -29,33 +24,6 @@
         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>
@@ -67,51 +35,19 @@
       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
+        id="scene"
+        class="clip"
+        data-composition-id="hard-cut"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="2"
+        data-track-index="1"
+      ></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;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,82 @@
+<template id="hard-cut-template">
+  <div data-composition-id="hard-cut" data-width="1920" data-height="1080" data-duration="2">
+    <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;
+      }
+      .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>
+    <div class="stage" id="stage"></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["hard-cut"] = tl;
+    </script>
+  </div>
+</template>

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

@@ -13,11 +13,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -29,28 +24,6 @@
         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>
@@ -62,18 +35,19 @@
       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
+        id="scene"
+        class="clip"
+        data-composition-id="hypercut-whip"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="2"
+        data-track-index="1"
+      ></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;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,44 @@
+<template id="hypercut-whip-template">
+  <div data-composition-id="hypercut-whip" data-width="1920" data-height="1080" data-duration="2">
+    <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;
+      }
+      .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>
+    <div class="stage"><div class="hero" id="hero">HYPERCUT</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["hypercut-whip"] = tl;
+    </script>
+  </div>
+</template>

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

@@ -13,11 +13,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -29,39 +24,6 @@
         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>
@@ -73,32 +35,19 @@
       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
+        id="scene"
+        class="clip"
+        data-composition-id="iris-open"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="2"
+        data-track-index="1"
+      ></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;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,69 @@
+<template id="iris-open-template">
+  <div data-composition-id="iris-open" data-width="1920" data-height="1080" data-duration="2">
+    <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;
+      }
+      .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>
+    <div class="iris-stage">
+      <div class="iris-ring" style="width: 200px; height: 200px"></div>
+      <div class="hero">IRIS</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["iris-open"] = tl;
+    </script>
+  </div>
+</template>