dsh-hyperframes 0.3.2 → 0.4.0

package/skills/music-to-video/references/motion-primitives/braam-punch/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,46 +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, text-shadow;
-      }
-      .glow-ring {
-        position: absolute;
-        width: 900px;
-        height: 900px;
-        border-radius: 50%;
-        background: radial-gradient(circle, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0) 65%);
-        filter: blur(20px);
-        will-change: transform, opacity;
-        opacity: 0;
-      }
-      .flash {
-        position: absolute;
-        inset: 0;
-        background: #fff;
-        opacity: 0;
-        pointer-events: none;
-        will-change: opacity;
-      }
     </style>
   </head>
   <body>
@@ -80,56 +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="glow-ring"></div>
-          <div class="hero" id="hero">BRAAM</div>
-        </div>
-        <div class="flash"></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="braam-punch"
+        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", { scale: 0.92, opacity: 0 }, 0);
-      tl.set(".glow-ring", { scale: 0.6, opacity: 0 }, 0);
-      tl.to("#hero", { opacity: 1, duration: 0.18, ease: "power2.out" }, 0.05);
-      tl.to(".glow-ring", { scale: 1.2, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.05);
-      tl.to(
-        "#hero",
-        {
-          scale: 1.18,
-          textShadow: "0 0 60px rgba(168,85,247,0.9)",
-          duration: 0.12,
-          ease: "power4.out",
-        },
-        0.25,
-      );
-      tl.to(
-        "#hero",
-        {
-          scale: 1.0,
-          textShadow: "0 0 0px rgba(168,85,247,0)",
-          duration: 0.7,
-          ease: "elastic.out(1, 0.5)",
-        },
-        0.37,
-      );
-      tl.fromTo(
-        ".flash",
-        { opacity: 0 },
-        { opacity: 0.85, duration: 0.06, ease: "power4.out" },
-        0.25,
-      );
-      tl.to(".flash", { opacity: 0, duration: 0.35, ease: "power3.in" }, 0.31);
-      tl.to(
-        ".glow-ring",
-        { scale: 1.45, opacity: 0.4, duration: 1.0, ease: "power2.out", overwrite: "auto" },
-        0.55,
-      );
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/braam-punch/scene.html

@@ -0,0 +1,100 @@
+<template id="braam-punch-template">
+  <div data-composition-id="braam-punch" 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, text-shadow;
+      }
+      .glow-ring {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0) 65%);
+        filter: blur(20px);
+        will-change: transform, opacity;
+        opacity: 0;
+      }
+      .flash {
+        position: absolute;
+        inset: 0;
+        background: #fff;
+        opacity: 0;
+        pointer-events: none;
+        will-change: opacity;
+      }
+    </style>
+    <div class="stage">
+      <div class="glow-ring"></div>
+      <div class="hero" id="hero">BRAAM</div>
+    </div>
+    <div class="flash"></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set("#hero", { scale: 0.92, opacity: 0 }, 0);
+      tl.set(".glow-ring", { scale: 0.6, opacity: 0 }, 0);
+      tl.to("#hero", { opacity: 1, duration: 0.18, ease: "power2.out" }, 0.05);
+      tl.to(".glow-ring", { scale: 1.2, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.05);
+      tl.to(
+        "#hero",
+        {
+          scale: 1.18,
+          textShadow: "0 0 60px rgba(168,85,247,0.9)",
+          duration: 0.12,
+          ease: "power4.out",
+        },
+        0.25,
+      );
+      tl.to(
+        "#hero",
+        {
+          scale: 1.0,
+          textShadow: "0 0 0px rgba(168,85,247,0)",
+          duration: 0.7,
+          ease: "elastic.out(1, 0.5)",
+        },
+        0.37,
+      );
+      tl.fromTo(
+        ".flash",
+        { opacity: 0 },
+        { opacity: 0.85, duration: 0.06, ease: "power4.out" },
+        0.25,
+      );
+      tl.to(".flash", { opacity: 0, duration: 0.35, ease: "power3.in" }, 0.31);
+      tl.to(
+        ".glow-ring",
+        { scale: 1.45, opacity: 0.4, duration: 1.0, ease: "power2.out", overwrite: "auto" },
+        0.55,
+      );
+
+      window.__timelines["braam-punch"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/chromatic-split/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,60 +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;
-      }
-      .stack {
-        position: relative;
-        font-weight: 900;
-        font-size: 280px;
-        letter-spacing: -0.04em;
-        line-height: 0.95;
-        white-space: nowrap;
-      }
-      .layer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        mix-blend-mode: screen;
-        will-change: transform;
-      }
-      .layer.r {
-        color: #ff2a4a;
-      }
-      .layer.g {
-        color: #2afff0;
-      }
-      .layer.b {
-        color: #b56dff;
-      }
-      .spacer {
-        color: transparent;
-      }
-      .scanlines {
-        position: absolute;
-        inset: 0;
-        background: repeating-linear-gradient(
-          0deg,
-          rgba(255, 255, 255, 0) 0px,
-          rgba(255, 255, 255, 0) 3px,
-          rgba(255, 255, 255, 0.04) 3px,
-          rgba(255, 255, 255, 0.04) 4px
-        );
-        opacity: 0;
-        pointer-events: none;
-        will-change: opacity;
-      }
     </style>
   </head>
   <body>
@@ -94,53 +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="stack">
-            <span class="spacer">GLITCH</span>
-            <span class="layer r">GLITCH</span>
-            <span class="layer g">GLITCH</span>
-            <span class="layer b">GLITCH</span>
-          </div>
-        </div>
-        <div class="scanlines"></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="chromatic-split"
+        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(
-        ".stack",
-        { opacity: 0, scale: 0.95 },
-        { opacity: 1, scale: 1, duration: 0.25, ease: "power2.out" },
-        0.05,
-      );
-      tl.set(".layer.r", { x: -2 }, 0);
-      tl.set(".layer.g", { x: 2 }, 0);
-      tl.set(".layer.b", { x: 0 }, 0);
-      tl.to(".layer.r", { x: -14, duration: 0.06, ease: "steps(1)" }, 0.35);
-      tl.to(".layer.g", { x: 14, duration: 0.06, ease: "steps(1)" }, 0.35);
-      tl.to(".layer.r", { x: -4, duration: 0.06, ease: "steps(1)" }, 0.5);
-      tl.to(".layer.g", { x: 4, duration: 0.06, ease: "steps(1)" }, 0.5);
-      tl.to(".layer.r", { x: -22, duration: 0.04, ease: "steps(1)" }, 0.85);
-      tl.to(".layer.g", { x: 22, duration: 0.04, ease: "steps(1)" }, 0.85);
-      tl.to(".layer.b", { x: 6, duration: 0.04, ease: "steps(1)" }, 0.85);
-      tl.to(".layer.r", { x: -6, duration: 0.04, ease: "steps(1)" }, 0.97);
-      tl.to(".layer.g", { x: 6, duration: 0.04, ease: "steps(1)" }, 0.97);
-      tl.to(".layer.b", { x: -2, duration: 0.04, ease: "steps(1)" }, 0.97);
-      tl.to(".layer.r", { x: -3, duration: 0.4, ease: "power2.out" }, 1.2);
-      tl.to(".layer.g", { x: 3, duration: 0.4, ease: "power2.out" }, 1.2);
-      tl.to(".layer.b", { x: 0, duration: 0.4, ease: "power2.out" }, 1.2);
-      tl.fromTo(
-        ".scanlines",
-        { opacity: 0 },
-        { opacity: 0.85, duration: 0.06, ease: "steps(1)" },
-        0.35,
-      );
-      tl.to(".scanlines", { opacity: 0.25, duration: 0.5, ease: "power2.out" }, 1.0);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/chromatic-split/scene.html

@@ -0,0 +1,111 @@
+<template id="chromatic-split-template">
+  <div data-composition-id="chromatic-split" 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;
+      }
+      .stack {
+        position: relative;
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.04em;
+        line-height: 0.95;
+        white-space: nowrap;
+      }
+      .layer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        mix-blend-mode: screen;
+        will-change: transform;
+      }
+      .layer.r {
+        color: #ff2a4a;
+      }
+      .layer.g {
+        color: #2afff0;
+      }
+      .layer.b {
+        color: #b56dff;
+      }
+      .spacer {
+        color: transparent;
+      }
+      .scanlines {
+        position: absolute;
+        inset: 0;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0) 0px,
+          rgba(255, 255, 255, 0) 3px,
+          rgba(255, 255, 255, 0.04) 3px,
+          rgba(255, 255, 255, 0.04) 4px
+        );
+        opacity: 0;
+        pointer-events: none;
+        will-change: opacity;
+      }
+    </style>
+    <div class="stage">
+      <div class="stack">
+        <span class="spacer">GLITCH</span>
+        <span class="layer r">GLITCH</span>
+        <span class="layer g">GLITCH</span>
+        <span class="layer b">GLITCH</span>
+      </div>
+    </div>
+    <div class="scanlines"></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.fromTo(
+        ".stack",
+        { opacity: 0, scale: 0.95 },
+        { opacity: 1, scale: 1, duration: 0.25, ease: "power2.out" },
+        0.05,
+      );
+      tl.set(".layer.r", { x: -2 }, 0);
+      tl.set(".layer.g", { x: 2 }, 0);
+      tl.set(".layer.b", { x: 0 }, 0);
+      tl.to(".layer.r", { x: -14, duration: 0.06, ease: "steps(1)" }, 0.35);
+      tl.to(".layer.g", { x: 14, duration: 0.06, ease: "steps(1)" }, 0.35);
+      tl.to(".layer.r", { x: -4, duration: 0.06, ease: "steps(1)" }, 0.5);
+      tl.to(".layer.g", { x: 4, duration: 0.06, ease: "steps(1)" }, 0.5);
+      tl.to(".layer.r", { x: -22, duration: 0.04, ease: "steps(1)" }, 0.85);
+      tl.to(".layer.g", { x: 22, duration: 0.04, ease: "steps(1)" }, 0.85);
+      tl.to(".layer.b", { x: 6, duration: 0.04, ease: "steps(1)" }, 0.85);
+      tl.to(".layer.r", { x: -6, duration: 0.04, ease: "steps(1)" }, 0.97);
+      tl.to(".layer.g", { x: 6, duration: 0.04, ease: "steps(1)" }, 0.97);
+      tl.to(".layer.b", { x: -2, duration: 0.04, ease: "steps(1)" }, 0.97);
+      tl.to(".layer.r", { x: -3, duration: 0.4, ease: "power2.out" }, 1.2);
+      tl.to(".layer.g", { x: 3, duration: 0.4, ease: "power2.out" }, 1.2);
+      tl.to(".layer.b", { x: 0, duration: 0.4, ease: "power2.out" }, 1.2);
+      tl.fromTo(
+        ".scanlines",
+        { opacity: 0 },
+        { opacity: 0.85, duration: 0.06, ease: "steps(1)" },
+        0.35,
+      );
+      tl.to(".scanlines", { opacity: 0.25, duration: 0.5, ease: "power2.out" }, 1.0);
+
+      window.__timelines["chromatic-split"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/chrome-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,42 +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;
-      }
-      .chrome {
-        font-weight: 900;
-        font-size: 280px;
-        letter-spacing: -0.04em;
-        background: linear-gradient(
-          110deg,
-          #404048 0%,
-          #b4b4be 20%,
-          #ffffff 45%,
-          #ffffff 50%,
-          #d8d8e0 60%,
-          #5a5a64 85%,
-          #ffffff 100%
-        );
-        background-size: 250% 100%;
-        background-position: 200% 0;
-        -webkit-background-clip: text;
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        color: transparent;
-        will-change: background-position;
-        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.4));
-      }
     </style>
   </head>
   <body>
@@ -76,28 +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="chrome">CHROME</div></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="chrome-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 });
-
-      tl.fromTo(
-        ".chrome",
-        { opacity: 0, scale: 0.96 },
-        { opacity: 1, scale: 1, duration: 0.3, ease: "power3.out" },
-        0.2,
-      );
-      tl.fromTo(
-        ".chrome",
-        { backgroundPosition: "200% 0" },
-        { backgroundPosition: "-100% 0", duration: 1.4, ease: "power2.inOut" },
-        0.3,
-      );
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/chrome-sweep/scene.html

@@ -0,0 +1,68 @@
+<template id="chrome-sweep-template">
+  <div data-composition-id="chrome-sweep" 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;
+      }
+      .chrome {
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.04em;
+        background: linear-gradient(
+          110deg,
+          #404048 0%,
+          #b4b4be 20%,
+          #ffffff 45%,
+          #ffffff 50%,
+          #d8d8e0 60%,
+          #5a5a64 85%,
+          #ffffff 100%
+        );
+        background-size: 250% 100%;
+        background-position: 200% 0;
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+        will-change: background-position;
+        filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.4));
+      }
+    </style>
+    <div class="stage"><div class="chrome">CHROME</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.fromTo(
+        ".chrome",
+        { opacity: 0, scale: 0.96 },
+        { opacity: 1, scale: 1, duration: 0.3, ease: "power3.out" },
+        0.2,
+      );
+      tl.fromTo(
+        ".chrome",
+        { backgroundPosition: "200% 0" },
+        { backgroundPosition: "-100% 0", duration: 1.4, ease: "power2.inOut" },
+        0.3,
+      );
+
+      window.__timelines["chrome-sweep"] = tl;
+    </script>
+  </div>
+</template>