dsh-hyperframes 0.3.2 → 0.4.1

package/skills/music-to-video/references/motion-primitives/datamosh-smear/scene.html

@@ -0,0 +1,131 @@
+<template id="datamosh-smear-template">
+  <div data-composition-id="datamosh-smear" data-width="1920" data-height="1080" data-duration="2">
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-cyan: #2afff0;
+        --hg-magenta: #ff2a4a;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      .smear-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .smear-hero {
+        position: relative;
+        font-weight: 900;
+        font-size: 320px;
+        letter-spacing: -0.05em;
+        line-height: 0.95;
+        white-space: nowrap;
+      }
+      .smear-layer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        mix-blend-mode: screen;
+        will-change: transform, opacity, filter;
+      }
+      .smear-layer.l1 {
+        color: #ff2a4a;
+      }
+      .smear-layer.l2 {
+        color: #2afff0;
+      }
+      .smear-layer.l3 {
+        color: #b56dff;
+      }
+      .smear-layer.l4 {
+        color: #ffd166;
+      }
+      .smear-layer.l5 {
+        color: #f5f5fa;
+      }
+      .spacer {
+        color: transparent;
+      }
+      .scan-noise {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, 0) 0px,
+            rgba(255, 255, 255, 0) 2px,
+            rgba(255, 255, 255, 0.07) 3px
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0) 0px,
+            rgba(0, 0, 0, 0) 4px,
+            rgba(0, 0, 0, 0.15) 5px
+          );
+        opacity: 0;
+        will-change: opacity;
+        pointer-events: none;
+        mix-blend-mode: overlay;
+      }
+    </style>
+    <div class="smear-stage">
+      <div class="smear-hero">
+        <span class="spacer">SMEAR</span>
+        <span class="smear-layer l1">SMEAR</span>
+        <span class="smear-layer l2">SMEAR</span>
+        <span class="smear-layer l3">SMEAR</span>
+        <span class="smear-layer l4">SMEAR</span>
+        <span class="smear-layer l5">SMEAR</span>
+      </div>
+    </div>
+    <div class="scan-noise"></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // All layers start far right, stagger-lag in, then settle near center
+      const layers = [
+        ".smear-layer.l1",
+        ".smear-layer.l2",
+        ".smear-layer.l3",
+        ".smear-layer.l4",
+        ".smear-layer.l5",
+      ];
+
+      layers.forEach((sel, i) => {
+        tl.fromTo(
+          sel,
+          { x: 360, opacity: 0, filter: "blur(20px)" },
+          { x: 0, opacity: 0.85, filter: "blur(0px)", duration: 0.7, ease: "expo.out" },
+          0.2 + i * 0.08,
+        );
+      });
+
+      // Final settle: pull layers into proper offset
+      const finalX = [-6, -2, 0, 2, 4];
+      layers.forEach((sel, i) => {
+        tl.to(sel, { x: finalX[i], duration: 0.4, ease: "power2.out" }, 1.1);
+      });
+
+      // Scan noise pulses
+      tl.fromTo(
+        ".scan-noise",
+        { opacity: 0 },
+        { opacity: 1, duration: 0.06, ease: "steps(1)" },
+        0.2,
+      );
+      tl.to(".scan-noise", { opacity: 0.25, duration: 0.8, ease: "power2.out" }, 0.6);
+
+      window.__timelines["datamosh-smear"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/directional-fill/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;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 36px;
-      }
-      .bar {
-        position: relative;
-        width: 1040px;
-        height: 188px;
-        border: 3px solid var(--hg-dim);
-        border-radius: 12px;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        padding: 0 56px;
-      }
-      .fill {
-        position: absolute;
-        inset: 0;
-        transform: scaleX(0);
-        will-change: transform;
-      }
-      .fill.a {
-        background: var(--hg-violet);
-        transform-origin: left center;
-      }
-      .fill.b {
-        background: var(--hg-violet-2);
-        transform-origin: right center;
-      }
-      .fill.c {
-        background: #2afff0;
-        transform-origin: left center;
-      }
-      .label {
-        position: relative;
-        z-index: 1;
-        font-weight: 900;
-        font-size: 96px;
-        letter-spacing: -0.03em;
-        line-height: 1;
-        color: var(--hg-fg);
-        will-change: color;
-      }
     </style>
   </head>
   <body>
@@ -94,40 +35,19 @@
       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="bar">
-            <div class="fill a"></div>
-            <span class="label" id="l1">READY</span>
-          </div>
-          <div class="bar">
-            <div class="fill b"></div>
-            <span class="label" id="l2">SET</span>
-          </div>
-          <div class="bar">
-            <div class="fill c"></div>
-            <span class="label" id="l3">FILL</span>
-          </div>
-        </div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="directional-fill"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="1.8"
+        data-track-index="1"
+      ></div>
     </div>
     <script>
       window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // Bar 1 — sweeps left -> right, landing on the beat at ~0.55s.
-      tl.to(".fill.a", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.2);
-      tl.set("#l1", { color: "var(--hg-bg)" }, 0.55);
-
-      // Bar 2 — sweeps right -> left, landing at ~0.85s.
-      tl.to(".fill.b", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.5);
-      tl.set("#l2", { color: "var(--hg-bg)" }, 0.85);
-
-      // Bar 3 — sweeps left -> right, landing at ~1.15s.
-      tl.to(".fill.c", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.8);
-      tl.set("#l3", { color: "var(--hg-bg)" }, 1.15);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/directional-fill/scene.html

@@ -0,0 +1,103 @@
+<template id="directional-fill-template">
+  <div
+    data-composition-id="directional-fill"
+    data-width="1920"
+    data-height="1080"
+    data-duration="1.8"
+  >
+    <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;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 36px;
+      }
+      .bar {
+        position: relative;
+        width: 1040px;
+        height: 188px;
+        border: 3px solid var(--hg-dim);
+        border-radius: 12px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        padding: 0 56px;
+      }
+      .fill {
+        position: absolute;
+        inset: 0;
+        transform: scaleX(0);
+        will-change: transform;
+      }
+      .fill.a {
+        background: var(--hg-violet);
+        transform-origin: left center;
+      }
+      .fill.b {
+        background: var(--hg-violet-2);
+        transform-origin: right center;
+      }
+      .fill.c {
+        background: #2afff0;
+        transform-origin: left center;
+      }
+      .label {
+        position: relative;
+        z-index: 1;
+        font-weight: 900;
+        font-size: 96px;
+        letter-spacing: -0.03em;
+        line-height: 1;
+        color: var(--hg-fg);
+        will-change: color;
+      }
+    </style>
+    <div class="stage">
+      <div class="bar">
+        <div class="fill a"></div>
+        <span class="label" id="l1">READY</span>
+      </div>
+      <div class="bar">
+        <div class="fill b"></div>
+        <span class="label" id="l2">SET</span>
+      </div>
+      <div class="bar">
+        <div class="fill c"></div>
+        <span class="label" id="l3">FILL</span>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Bar 1 — sweeps left -> right, landing on the beat at ~0.55s.
+      tl.to(".fill.a", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.2);
+      tl.set("#l1", { color: "var(--hg-bg)" }, 0.55);
+
+      // Bar 2 — sweeps right -> left, landing at ~0.85s.
+      tl.to(".fill.b", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.5);
+      tl.set("#l2", { color: "var(--hg-bg)" }, 0.85);
+
+      // Bar 3 — sweeps left -> right, landing at ~1.15s.
+      tl.to(".fill.c", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.8);
+      tl.set("#l3", { color: "var(--hg-bg)" }, 1.15);
+
+      window.__timelines["directional-fill"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/dolly-zoom/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,68 +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;
-      }
-      .layers {
-        position: absolute;
-        inset: 0;
-        overflow: hidden;
-      }
-      .bg-far,
-      .bg-mid,
-      .bg-near {
-        position: absolute;
-        inset: 0;
-        will-change: transform, filter;
-      }
-      .bg-far {
-        background:
-          radial-gradient(2px 2px at 20% 30%, var(--hg-dim) 50%, transparent 51%),
-          radial-gradient(2px 2px at 70% 80%, var(--hg-dim) 50%, transparent 51%),
-          radial-gradient(1px 1px at 45% 60%, var(--hg-dim) 50%, transparent 51%),
-          radial-gradient(1px 1px at 85% 25%, var(--hg-dim) 50%, transparent 51%),
-          radial-gradient(2px 2px at 10% 75%, var(--hg-dim) 50%, transparent 51%),
-          radial-gradient(1px 1px at 60% 15%, var(--hg-dim) 50%, transparent 51%);
-        background-size: 400px 400px;
-        filter: blur(2px);
-      }
-      .bg-mid {
-        background:
-          linear-gradient(90deg, transparent 49.7%, rgba(168, 85, 247, 0.25) 50%, transparent 50.3%)
-            0 0 / 200px 200px,
-          linear-gradient(
-              180deg,
-              transparent 49.7%,
-              rgba(168, 85, 247, 0.15) 50%,
-              transparent 50.3%
-            )
-            0 0 / 200px 200px;
-      }
-      .bg-near {
-        background:
-          radial-gradient(circle at 15% 50%, rgba(168, 85, 247, 0.4) 0%, transparent 25%),
-          radial-gradient(circle at 85% 50%, rgba(124, 58, 237, 0.4) 0%, transparent 25%);
-      }
-      .subject {
-        position: relative;
-        z-index: 5;
-        font-family: "Playfair Display", serif;
-        font-style: italic;
-        font-weight: 900;
-        font-size: 180px;
-        letter-spacing: -0.02em;
-      }
     </style>
   </head>
   <body>
@@ -102,36 +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="layers">
-          <div class="bg-far"></div>
-          <div class="bg-mid"></div>
-          <div class="bg-near"></div>
-        </div>
-        <div class="stage"><div class="subject">subject.</div></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="dolly-zoom"
+        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(
-        ".bg-far",
-        { scale: 1, filter: "blur(2px)" },
-        { scale: 1.6, filter: "blur(4px)", duration: 1.8, ease: "power2.inOut" },
-        0.1,
-      );
-      tl.fromTo(".bg-mid", { scale: 1 }, { scale: 1.4, duration: 1.8, ease: "power2.inOut" }, 0.1);
-      tl.fromTo(".bg-near", { scale: 1 }, { scale: 1.2, duration: 1.8, ease: "power2.inOut" }, 0.1);
-      tl.fromTo(
-        ".subject",
-        { opacity: 0, scale: 1.1 },
-        { opacity: 1, scale: 1, duration: 0.6, ease: "power3.out" },
-        0.15,
-      );
-      tl.to(".layers", { skewY: -0.5, duration: 1.8, ease: "power2.inOut" }, 0.1);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/dolly-zoom/scene.html

@@ -0,0 +1,102 @@
+<template id="dolly-zoom-template">
+  <div data-composition-id="dolly-zoom" 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;
+      }
+      .layers {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+      .bg-far,
+      .bg-mid,
+      .bg-near {
+        position: absolute;
+        inset: 0;
+        will-change: transform, filter;
+      }
+      .bg-far {
+        background:
+          radial-gradient(2px 2px at 20% 30%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(2px 2px at 70% 80%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(1px 1px at 45% 60%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(1px 1px at 85% 25%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(2px 2px at 10% 75%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(1px 1px at 60% 15%, var(--hg-dim) 50%, transparent 51%);
+        background-size: 400px 400px;
+        filter: blur(2px);
+      }
+      .bg-mid {
+        background:
+          linear-gradient(90deg, transparent 49.7%, rgba(168, 85, 247, 0.25) 50%, transparent 50.3%)
+            0 0 / 200px 200px,
+          linear-gradient(
+              180deg,
+              transparent 49.7%,
+              rgba(168, 85, 247, 0.15) 50%,
+              transparent 50.3%
+            )
+            0 0 / 200px 200px;
+      }
+      .bg-near {
+        background:
+          radial-gradient(circle at 15% 50%, rgba(168, 85, 247, 0.4) 0%, transparent 25%),
+          radial-gradient(circle at 85% 50%, rgba(124, 58, 237, 0.4) 0%, transparent 25%);
+      }
+      .subject {
+        position: relative;
+        z-index: 5;
+        font-family: "Playfair Display", serif;
+        font-style: italic;
+        font-weight: 900;
+        font-size: 180px;
+        letter-spacing: -0.02em;
+      }
+    </style>
+    <div class="layers">
+      <div class="bg-far"></div>
+      <div class="bg-mid"></div>
+      <div class="bg-near"></div>
+    </div>
+    <div class="stage"><div class="subject">subject.</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.fromTo(
+        ".bg-far",
+        { scale: 1, filter: "blur(2px)" },
+        { scale: 1.6, filter: "blur(4px)", duration: 1.8, ease: "power2.inOut" },
+        0.1,
+      );
+      tl.fromTo(".bg-mid", { scale: 1 }, { scale: 1.4, duration: 1.8, ease: "power2.inOut" }, 0.1);
+      tl.fromTo(".bg-near", { scale: 1 }, { scale: 1.2, duration: 1.8, ease: "power2.inOut" }, 0.1);
+      tl.fromTo(
+        ".subject",
+        { opacity: 0, scale: 1.1 },
+        { opacity: 1, scale: 1, duration: 0.6, ease: "power3.out" },
+        0.15,
+      );
+      tl.to(".layers", { skewY: -0.5, duration: 1.8, ease: "power2.inOut" }, 0.1);
+
+      window.__timelines["dolly-zoom"] = tl;
+    </script>
+  </div>
+</template>