dsh-hyperframes 0.3.1 → 0.4.0

package/skills/music-to-video/references/motion-primitives/counting-punch/index.html

@@ -14,11 +14,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -30,44 +25,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: 30px;
-      }
-      .counter {
-        font-weight: 900;
-        font-size: 360px;
-        letter-spacing: -0.04em;
-        font-variant-numeric: tabular-nums;
-        color: var(--hg-fg);
-        will-change: transform, text-shadow;
-        line-height: 1;
-      }
-      .caption {
-        font-family: "JetBrains Mono", monospace;
-        font-size: 28px;
-        color: var(--hg-dim);
-        letter-spacing: 0.3em;
-        text-transform: uppercase;
-        opacity: 0;
-      }
-      .underline {
-        height: 4px;
-        background: var(--hg-violet-2);
-        width: 0;
-        box-shadow: 0 0 20px var(--hg-violet);
-      }
     </style>
   </head>
   <body>
@@ -79,76 +36,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="counter" id="counter">0</div>
-          <div class="underline" id="underline"></div>
-          <div class="caption" id="caption">USERS THIS WEEK</div>
-        </div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="counting-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 });
-
-      const TARGET = 12847;
-      const counter = { v: 0 };
-      let lastShown = 0;
-
-      function format(n) {
-        return Math.floor(n).toLocaleString("en-US");
-      }
-
-      tl.to(
-        counter,
-        {
-          v: TARGET,
-          duration: 1.15,
-          ease: "expo.out",
-          onUpdate: function () {
-            const el = document.getElementById("counter");
-            if (!el) return;
-            const cur = Math.floor(counter.v);
-            if (cur !== lastShown) {
-              el.textContent = format(cur);
-              // tiny scale tick on each digit change
-              el.style.transform = "scale(1.045)";
-              el.style.textShadow = "0 0 40px rgba(168, 85, 247, 0.6)";
-              // browser will paint, then this resets via the next onUpdate
-            }
-            lastShown = cur;
-          },
-        },
-        0.15,
-      );
-
-      // Big settle punch at landing
-      tl.to(
-        "#counter",
-        {
-          scale: 1.12,
-          textShadow: "0 0 80px rgba(168, 85, 247, 0.9)",
-          duration: 0.1,
-          ease: "power4.out",
-        },
-        1.3,
-      );
-      tl.to(
-        "#counter",
-        {
-          scale: 1.0,
-          textShadow: "0 0 20px rgba(168, 85, 247, 0.4)",
-          duration: 0.6,
-          ease: "elastic.out(1, 0.55)",
-        },
-        1.4,
-      );
-
-      // Underline draws
-      tl.to("#underline", { width: 420, duration: 0.6, ease: "expo.out" }, 1.35);
-      tl.to("#caption", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.55);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,119 @@
+<template id="counting-punch-template">
+  <div data-composition-id="counting-punch" 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;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+      }
+      .counter {
+        font-weight: 900;
+        font-size: 360px;
+        letter-spacing: -0.04em;
+        font-variant-numeric: tabular-nums;
+        color: var(--hg-fg);
+        will-change: transform, text-shadow;
+        line-height: 1;
+      }
+      .caption {
+        font-family: "JetBrains Mono", monospace;
+        font-size: 28px;
+        color: var(--hg-dim);
+        letter-spacing: 0.3em;
+        text-transform: uppercase;
+        opacity: 0;
+      }
+      .underline {
+        height: 4px;
+        background: var(--hg-violet-2);
+        width: 0;
+        box-shadow: 0 0 20px var(--hg-violet);
+      }
+    </style>
+    <div class="stage">
+      <div class="counter" id="counter">0</div>
+      <div class="underline" id="underline"></div>
+      <div class="caption" id="caption">USERS THIS WEEK</div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      const TARGET = 12847;
+      const counter = { v: 0 };
+      let lastShown = 0;
+
+      function format(n) {
+        return Math.floor(n).toLocaleString("en-US");
+      }
+
+      tl.to(
+        counter,
+        {
+          v: TARGET,
+          duration: 1.15,
+          ease: "expo.out",
+          onUpdate: function () {
+            const el = document.getElementById("counter");
+            if (!el) return;
+            const cur = Math.floor(counter.v);
+            if (cur !== lastShown) {
+              el.textContent = format(cur);
+              // tiny scale tick on each digit change
+              el.style.transform = "scale(1.045)";
+              el.style.textShadow = "0 0 40px rgba(168, 85, 247, 0.6)";
+              // browser will paint, then this resets via the next onUpdate
+            }
+            lastShown = cur;
+          },
+        },
+        0.15,
+      );
+
+      // Big settle punch at landing
+      tl.to(
+        "#counter",
+        {
+          scale: 1.12,
+          textShadow: "0 0 80px rgba(168, 85, 247, 0.9)",
+          duration: 0.1,
+          ease: "power4.out",
+        },
+        1.3,
+      );
+      tl.to(
+        "#counter",
+        {
+          scale: 1.0,
+          textShadow: "0 0 20px rgba(168, 85, 247, 0.4)",
+          duration: 0.6,
+          ease: "elastic.out(1, 0.55)",
+        },
+        1.4,
+      );
+
+      // Underline draws
+      tl.to("#underline", { width: 420, duration: 0.6, ease: "expo.out" }, 1.35);
+      tl.to("#caption", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.55);
+
+      window.__timelines["counting-punch"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/crash-zoom-in/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,54 +24,6 @@
         color: var(--hg-fg);
         -webkit-font-smoothing: antialiased;
       }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .zoom-stage {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        will-change: transform;
-      }
-      .radial-bg {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(
-          circle at center,
-          rgba(168, 85, 247, 0.18) 0%,
-          transparent 35%,
-          rgba(0, 0, 0, 0.6) 80%
-        );
-        opacity: 0;
-        will-change: opacity, transform;
-      }
-      .speed-lines {
-        position: absolute;
-        inset: 0;
-        background: repeating-radial-gradient(
-          circle at 50% 50%,
-          transparent 0px,
-          transparent 6px,
-          rgba(255, 255, 255, 0.08) 7px,
-          transparent 8px
-        );
-        opacity: 0;
-        will-change: opacity;
-        mix-blend-mode: screen;
-      }
-      .hero {
-        font-weight: 900;
-        font-size: 360px;
-        letter-spacing: -0.05em;
-        color: var(--hg-fg);
-        white-space: nowrap;
-        will-change: transform, filter;
-      }
     </style>
   </head>
   <body>
@@ -88,68 +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="radial-bg"></div>
-        <div class="speed-lines"></div>
-        <div class="zoom-stage"><div class="hero">CRASH</div></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="crash-zoom-in"
+        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 });
-
-      // Hold black for tension
-      tl.set(".hero", { scale: 0.03, filter: "blur(20px)", opacity: 0 }, 0);
-
-      const CRASH = 0.45;
-
-      // The crash itself
-      tl.to(
-        ".hero",
-        { scale: 1.0, filter: "blur(0px)", opacity: 1, duration: 0.32, ease: "expo.in" },
-        CRASH,
-      );
-
-      // Background swoosh in same window
-      tl.fromTo(
-        ".radial-bg",
-        { opacity: 0, scale: 0.4 },
-        { opacity: 1, scale: 1, duration: 0.32, ease: "expo.in" },
-        CRASH,
-      );
-      tl.fromTo(
-        ".speed-lines",
-        { opacity: 0, scale: 0.2 },
-        { opacity: 1, scale: 1.4, duration: 0.32, ease: "expo.in" },
-        CRASH,
-      );
-
-      // Landing settle
-      const LAND = CRASH + 0.32;
-      tl.to(".hero", { scale: 0.96, duration: 0.08, ease: "power3.out" }, LAND);
-      tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.55)" }, LAND + 0.08);
-
-      // Quick landing shake
-      const sh = [9, -7, 5, -4, 2, -1];
-      sh.forEach((amp, i) => {
-        tl.to(
-          ".zoom-stage",
-          { x: amp, y: amp * 0.5 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
-          LAND + i * 0.03,
-        );
-      });
-      tl.to(
-        ".zoom-stage",
-        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
-        LAND + sh.length * 0.03,
-      );
-
-      // Speed lines fade
-      tl.to(".speed-lines", { opacity: 0, duration: 0.4, ease: "power2.out" }, LAND + 0.05);
-      // Radial settles
-      tl.to(".radial-bg", { opacity: 0.5, duration: 0.5, ease: "power2.out" }, LAND);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,120 @@
+<template id="crash-zoom-in-template">
+  <div data-composition-id="crash-zoom-in" 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;
+      }
+      .zoom-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        will-change: transform;
+      }
+      .radial-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          circle at center,
+          rgba(168, 85, 247, 0.18) 0%,
+          transparent 35%,
+          rgba(0, 0, 0, 0.6) 80%
+        );
+        opacity: 0;
+        will-change: opacity, transform;
+      }
+      .speed-lines {
+        position: absolute;
+        inset: 0;
+        background: repeating-radial-gradient(
+          circle at 50% 50%,
+          transparent 0px,
+          transparent 6px,
+          rgba(255, 255, 255, 0.08) 7px,
+          transparent 8px
+        );
+        opacity: 0;
+        will-change: opacity;
+        mix-blend-mode: screen;
+      }
+      .hero {
+        font-weight: 900;
+        font-size: 360px;
+        letter-spacing: -0.05em;
+        color: var(--hg-fg);
+        white-space: nowrap;
+        will-change: transform, filter;
+      }
+    </style>
+    <div class="radial-bg"></div>
+    <div class="speed-lines"></div>
+    <div class="zoom-stage"><div class="hero">CRASH</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Hold black for tension
+      tl.set(".hero", { scale: 0.03, filter: "blur(20px)", opacity: 0 }, 0);
+
+      const CRASH = 0.45;
+
+      // The crash itself
+      tl.to(
+        ".hero",
+        { scale: 1.0, filter: "blur(0px)", opacity: 1, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+
+      // Background swoosh in same window
+      tl.fromTo(
+        ".radial-bg",
+        { opacity: 0, scale: 0.4 },
+        { opacity: 1, scale: 1, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+      tl.fromTo(
+        ".speed-lines",
+        { opacity: 0, scale: 0.2 },
+        { opacity: 1, scale: 1.4, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+
+      // Landing settle
+      const LAND = CRASH + 0.32;
+      tl.to(".hero", { scale: 0.96, duration: 0.08, ease: "power3.out" }, LAND);
+      tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.55)" }, LAND + 0.08);
+
+      // Quick landing shake
+      const sh = [9, -7, 5, -4, 2, -1];
+      sh.forEach((amp, i) => {
+        tl.to(
+          ".zoom-stage",
+          { x: amp, y: amp * 0.5 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
+          LAND + i * 0.03,
+        );
+      });
+      tl.to(
+        ".zoom-stage",
+        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
+        LAND + sh.length * 0.03,
+      );
+
+      // Speed lines fade
+      tl.to(".speed-lines", { opacity: 0, duration: 0.4, ease: "power2.out" }, LAND + 0.05);
+      // Radial settles
+      tl.to(".radial-bg", { opacity: 0.5, duration: 0.5, ease: "power2.out" }, LAND);
+
+      window.__timelines["crash-zoom-in"] = tl;
+    </script>
+  </div>
+</template>

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

@@ -15,11 +15,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -31,73 +26,6 @@
         color: var(--hg-fg);
         -webkit-font-smoothing: antialiased;
       }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .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>
   </head>
   <body>
@@ -109,58 +37,19 @@
       data-width="1920"
       data-height="1080"
     >
-      <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
-        <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>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="datamosh-smear"
+        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 });
-
-      // 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["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>