dsh-hyperframes 0.3.1 → 0.4.0

package/skills/music-to-video/references/motion-primitives/radial-burst-lines/scene.html

@@ -0,0 +1,130 @@
+<template id="radial-burst-lines-template">
+  <div
+    data-composition-id="radial-burst-lines"
+    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: 320px;
+        letter-spacing: -0.05em;
+        color: var(--hg-fg);
+        white-space: nowrap;
+        position: relative;
+        z-index: 10;
+        will-change: transform;
+      }
+      .burst-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+      .line {
+        position: absolute;
+        width: 5px;
+        height: 180px;
+        background: linear-gradient(to top, transparent 0%, var(--hg-fg) 50%, transparent 100%);
+        transform-origin: bottom center;
+        opacity: 0;
+        will-change: transform, opacity;
+      }
+    </style>
+    <div class="burst-stage" id="bursts"></div>
+    <div class="stage"><div class="hero">BAM</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Build 20 lines
+      const N = 20;
+      const container = document.getElementById("bursts");
+      const lines = [];
+      for (let i = 0; i < N; i++) {
+        const l = document.createElement("div");
+        l.className = "line";
+        const angle = (i / N) * 360;
+        const innerRadius = 220;
+        // Rotate around center, push outward via transform-origin trick.
+        // Easier: use translate then rotate
+        l.style.transform = `rotate(${angle}deg) translateY(-${innerRadius}px) scaleY(0)`;
+        container.appendChild(l);
+        lines.push({ el: l, angle });
+      }
+
+      // Hero punch
+      tl.fromTo(
+        ".hero",
+        { scale: 0.7, opacity: 0 },
+        { scale: 1.1, opacity: 1, duration: 0.15, ease: "power4.out" },
+        0.3,
+      );
+      tl.to(".hero", { scale: 1.0, duration: 0.4, ease: "elastic.out(1, 0.5)" }, 0.45);
+
+      // Burst lines expand
+      lines.forEach((l, i) => {
+        const innerRadius = 220 + (i % 3) * 30; // vary radius
+        const len = 200 + (i % 4) * 40; // vary length
+        const ang = l.angle;
+        tl.set(
+          l.el,
+          {
+            rotation: ang,
+            x: 0,
+            y: 0,
+            scaleY: 0,
+            opacity: 0,
+            transformOrigin: "center bottom",
+          },
+          0,
+        );
+        // GSAP transforms compose, so we set the rotation + translate via separate properties
+        // Use a custom transform string approach
+        tl.to(
+          l.el,
+          {
+            scaleY: 1,
+            opacity: 1,
+            duration: 0.18,
+            ease: "power4.out",
+            onUpdate: function () {
+              const p = this.progress();
+              const t = -innerRadius - len * p * 0.2;
+              l.el.style.transform = `rotate(${ang}deg) translateY(${t}px) scaleY(${p})`;
+              l.el.style.opacity = (p > 0.7 ? 1 - (p - 0.7) / 0.3 : 1).toString();
+            },
+          },
+          0.32 + (i % 5) * 0.018,
+        );
+      });
+
+      // Hold then fade
+      tl.to(".line", { opacity: 0, duration: 0.4, ease: "power2.out" }, 0.9);
+
+      window.__timelines["radial-burst-lines"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/screen-shake/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,35 +24,6 @@
         color: var(--hg-fg);
         -webkit-font-smoothing: antialiased;
       }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .hero {
-        font-weight: 900;
-        font-size: 280px;
-        letter-spacing: -0.04em;
-        line-height: 0.95;
-        color: var(--hg-fg);
-        white-space: nowrap;
-      }
-      .shake-stage {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        will-change: transform;
-      }
-      .impact-bg {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(circle at 50% 50%, rgba(255, 42, 74, 0.18) 0%, transparent 60%);
-        opacity: 0;
-        will-change: opacity;
-      }
     </style>
   </head>
   <body>
@@ -69,45 +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="impact-bg"></div>
-        <div class="shake-stage"><div class="hero">IMPACT</div></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="screen-shake"
+        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.fromTo(
-        ".hero",
-        { scale: 0.6, opacity: 0 },
-        { scale: 1, opacity: 1, duration: 0.15, ease: "power4.out" },
-        0.3,
-      );
-      tl.fromTo(
-        ".impact-bg",
-        { opacity: 0 },
-        { opacity: 1, duration: 0.06, ease: "steps(1)" },
-        0.3,
-      );
-      tl.to(".impact-bg", { opacity: 0, duration: 0.6, ease: "power2.in" }, 0.4);
-
-      const shakeStart = 0.32;
-      const shakeAmps = [28, -24, 20, -22, 16, -18, 14, -14, 10, -8, 6, -5, 3, -2];
-      shakeAmps.forEach((amp, i) => {
-        tl.to(
-          ".shake-stage",
-          { x: amp, y: amp * 0.7 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
-          shakeStart + i * 0.03,
-        );
-      });
-      tl.to(
-        ".shake-stage",
-        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
-        shakeStart + shakeAmps.length * 0.03,
-      );
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/screen-shake/scene.html

@@ -0,0 +1,78 @@
+<template id="screen-shake-template">
+  <div data-composition-id="screen-shake" 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;
+      }
+      .hero {
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.04em;
+        line-height: 0.95;
+        color: var(--hg-fg);
+        white-space: nowrap;
+      }
+      .shake-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        will-change: transform;
+      }
+      .impact-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(circle at 50% 50%, rgba(255, 42, 74, 0.18) 0%, transparent 60%);
+        opacity: 0;
+        will-change: opacity;
+      }
+    </style>
+    <div class="impact-bg"></div>
+    <div class="shake-stage"><div class="hero">IMPACT</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.fromTo(
+        ".hero",
+        { scale: 0.6, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 0.15, ease: "power4.out" },
+        0.3,
+      );
+      tl.fromTo(
+        ".impact-bg",
+        { opacity: 0 },
+        { opacity: 1, duration: 0.06, ease: "steps(1)" },
+        0.3,
+      );
+      tl.to(".impact-bg", { opacity: 0, duration: 0.6, ease: "power2.in" }, 0.4);
+
+      const shakeStart = 0.32;
+      const shakeAmps = [28, -24, 20, -22, 16, -18, 14, -14, 10, -8, 6, -5, 3, -2];
+      shakeAmps.forEach((amp, i) => {
+        tl.to(
+          ".shake-stage",
+          { x: amp, y: amp * 0.7 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
+          shakeStart + i * 0.03,
+        );
+      });
+      tl.to(
+        ".shake-stage",
+        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
+        shakeStart + shakeAmps.length * 0.03,
+      );
+
+      window.__timelines["screen-shake"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/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,45 +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;
-      }
-      .slot {
-        font-family: "JetBrains Mono", monospace;
-        font-weight: 700;
-        font-size: 280px;
-        letter-spacing: 0.04em;
-        color: var(--hg-fg);
-        display: flex;
-        gap: 30px;
-      }
-      .slot .digit {
-        display: inline-block;
-        min-width: 1ch;
-        text-shadow: 0 0 40px rgba(168, 85, 247, 0.6);
-      }
-      .slot-label {
-        position: absolute;
-        bottom: 30%;
-        left: 50%;
-        transform: translateX(-50%);
-        font-family: "JetBrains Mono", monospace;
-        font-size: 22px;
-        color: var(--hg-dim);
-        letter-spacing: 0.4em;
-        text-transform: uppercase;
-        opacity: 0;
-      }
     </style>
   </head>
   <body>
@@ -79,52 +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="slot">
-            <span class="digit" data-target="5">0</span>
-            <span class="digit" data-target=".">0</span>
-            <span class="digit" data-target="5">0</span>
-            <span class="digit" data-target="x">0</span>
-          </div>
-        </div>
-        <div class="slot-label">FINAL VERSION</div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="slot-machine-reveal"
+        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 });
-
-      const DIGITS = "0123456789";
-      const slotStates = [{ p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }];
-      slotStates.forEach((state, idx) => {
-        tl.to(
-          state,
-          {
-            p: 1,
-            duration: 1.0,
-            delay: idx * 0.08,
-            ease: "power3.out",
-            onUpdate: function () {
-              const spans = document.querySelectorAll(".slot .digit");
-              const span = spans[idx];
-              if (!span) return;
-              const target = span.getAttribute("data-target");
-              if (state.p >= 0.85) {
-                span.textContent = target;
-                span.style.color = "var(--hg-violet-2)";
-              } else {
-                const tick = Math.floor(state.p * 80 + idx * 3);
-                span.textContent = DIGITS.charAt(tick % 10);
-              }
-            },
-          },
-          0.15,
-        );
-      });
-      tl.to(".slot-label", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.2);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/scene.html

@@ -0,0 +1,100 @@
+<template id="slot-machine-reveal-template">
+  <div
+    data-composition-id="slot-machine-reveal"
+    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;
+      }
+      .slot {
+        font-family: "JetBrains Mono", monospace;
+        font-weight: 700;
+        font-size: 280px;
+        letter-spacing: 0.04em;
+        color: var(--hg-fg);
+        display: flex;
+        gap: 30px;
+      }
+      .slot .digit {
+        display: inline-block;
+        min-width: 1ch;
+        text-shadow: 0 0 40px rgba(168, 85, 247, 0.6);
+      }
+      .slot-label {
+        position: absolute;
+        bottom: 30%;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: "JetBrains Mono", monospace;
+        font-size: 22px;
+        color: var(--hg-dim);
+        letter-spacing: 0.4em;
+        text-transform: uppercase;
+        opacity: 0;
+      }
+    </style>
+    <div class="stage">
+      <div class="slot">
+        <span class="digit" data-target="5">0</span>
+        <span class="digit" data-target=".">0</span>
+        <span class="digit" data-target="5">0</span>
+        <span class="digit" data-target="x">0</span>
+      </div>
+    </div>
+    <div class="slot-label">FINAL VERSION</div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      const DIGITS = "0123456789";
+      const slotStates = [{ p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }];
+      slotStates.forEach((state, idx) => {
+        tl.to(
+          state,
+          {
+            p: 1,
+            duration: 1.0,
+            delay: idx * 0.08,
+            ease: "power3.out",
+            onUpdate: function () {
+              const spans = document.querySelectorAll(".slot .digit");
+              const span = spans[idx];
+              if (!span) return;
+              const target = span.getAttribute("data-target");
+              if (state.p >= 0.85) {
+                span.textContent = target;
+                span.style.color = "var(--hg-violet-2)";
+              } else {
+                const tick = Math.floor(state.p * 80 + idx * 3);
+                span.textContent = DIGITS.charAt(tick % 10);
+              }
+            },
+          },
+          0.15,
+        );
+      });
+      tl.to(".slot-label", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.2);
+
+      window.__timelines["slot-machine-reveal"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/spotlight-sweep/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,63 +24,6 @@
         color: var(--hg-fg);
         -webkit-font-smoothing: antialiased;
       }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .dim-layer {
-        position: absolute;
-        inset: 0;
-        background: #03030a;
-      }
-      .hero-bright,
-      .hero-dim {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: "Playfair Display", serif;
-        font-weight: 900;
-        font-size: 320px;
-        letter-spacing: -0.04em;
-        white-space: nowrap;
-      }
-      .hero-dim {
-        color: rgba(245, 245, 250, 0.06);
-      }
-      .hero-bright {
-        color: var(--hg-fg);
-        text-shadow:
-          0 0 30px rgba(168, 85, 247, 0.4),
-          0 0 80px rgba(168, 85, 247, 0.2);
-        -webkit-mask-image: radial-gradient(
-          circle 360px at -400px 50%,
-          #000 0%,
-          rgba(0, 0, 0, 0.6) 60%,
-          transparent 80%
-        );
-        mask-image: radial-gradient(
-          circle 360px at -400px 50%,
-          #000 0%,
-          rgba(0, 0, 0, 0.6) 60%,
-          transparent 80%
-        );
-        will-change: mask-image;
-      }
-      .spotlight-glow {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(
-          circle 380px at -400px 50%,
-          rgba(168, 85, 247, 0.18) 0%,
-          transparent 60%
-        );
-        will-change: background;
-        mix-blend-mode: screen;
-      }
     </style>
   </head>
   <body>
@@ -97,41 +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="dim-layer"></div>
-        <div class="hero-dim">DISCOVER</div>
-        <div class="hero-bright" id="bright">DISCOVER</div>
-        <div class="spotlight-glow" id="glow"></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="spotlight-sweep"
+        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 });
-
-      // Animate the spotlight x position via mask-image (use a proxy + onUpdate for smoothness)
-      const state = { x: -400 };
-      tl.to(
-        state,
-        {
-          x: 2300,
-          duration: 1.4,
-          ease: "power2.inOut",
-          onUpdate: function () {
-            const m = `radial-gradient(circle 360px at ${state.x}px 50%, #000 0%, rgba(0,0,0,0.6) 60%, transparent 80%)`;
-            const g = `radial-gradient(circle 380px at ${state.x}px 50%, rgba(168, 85, 247, 0.18) 0%, transparent 60%)`;
-            const bright = document.getElementById("bright");
-            const glow = document.getElementById("glow");
-            if (bright) {
-              bright.style.maskImage = m;
-              bright.style.webkitMaskImage = m;
-            }
-            if (glow) glow.style.background = g;
-          },
-        },
-        0.3,
-      );
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>