dsh-hyperframes 0.3.2 → 0.4.0

package/skills/music-to-video/references/motion-primitives/mosaic-pack/scene.html

@@ -0,0 +1,89 @@
+<template id="mosaic-pack-template">
+  <div data-composition-id="mosaic-pack" data-width="1920" data-height="1080" data-duration="2.4">
+    <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;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(6, 200px);
+        grid-template-rows: repeat(4, 200px);
+        gap: 18px;
+      }
+      .tile {
+        border-radius: 14px;
+        will-change: transform, opacity;
+      }
+    </style>
+    <div class="stage">
+      <div class="grid" id="grid"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Deterministic palette + grid build (6x4 = 24 cells).
+      const PALETTE = ["#7c3aed", "#a855f7", "#f5f5fa", "#2a2a3a", "#b56dff", "#6b6b78"];
+      const COLS = 6;
+      const ROWS = 4;
+      const COUNT = COLS * ROWS;
+      const grid = document.getElementById("grid");
+      const tiles = [];
+      for (let i = 0; i < COUNT; i++) {
+        const tile = document.createElement("div");
+        tile.className = "tile";
+        tile.style.background = PALETTE[i % PALETTE.length];
+        grid.appendChild(tile);
+        tiles.push(tile);
+      }
+
+      // Scatter each tile from a deterministic offset/rotation, then pack into place.
+      // Land order ripples diagonally (col + row) for a deterministic "assembling" feel.
+      const STEP = 0.07;
+      for (let i = 0; i < COUNT; i++) {
+        const col = i % COLS;
+        const row = Math.floor(i / COLS);
+        const dx = (((i * 53) % 200) - 100) * 9; // far-flung scatter X
+        const dy = (((i * 89) % 200) - 100) * 7; // far-flung scatter Y
+        const rot = ((i * 37) % 80) - 40; // deterministic tilt
+        const order = col + row; // diagonal land sequence
+        tl.fromTo(
+          tiles[i],
+          { x: dx, y: dy, rotation: rot, scale: 0.6, autoAlpha: 0.15 },
+          {
+            x: 0,
+            y: 0,
+            rotation: 0,
+            scale: 1,
+            autoAlpha: 1,
+            duration: 0.6,
+            ease: "back.out(1.6)",
+          },
+          0.1 + order * STEP,
+        );
+      }
+
+      // Settle the packed poster with a tiny breath so the loop seats cleanly.
+      tl.to("#grid", { scale: 1.02, duration: 0.18, ease: "power2.out" }, 1.9);
+      tl.to("#grid", { scale: 1, duration: 0.32, ease: "power2.inOut" }, 2.08);
+
+      window.__timelines["mosaic-pack"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/neon-flicker/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,44 +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;
-      }
-      .neon {
-        font-family: "Playfair Display", serif;
-        font-style: italic;
-        font-weight: 900;
-        font-size: 280px;
-        letter-spacing: -0.02em;
-        color: #ff64a0;
-        text-shadow:
-          0 0 8px #ff64a0,
-          0 0 24px #ff64a0,
-          0 0 60px #ff1a7a,
-          0 0 120px #ff1a7a;
-        will-change: opacity, text-shadow;
-      }
-      .neon-bg {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(
-          circle at 50% 50%,
-          rgba(255, 26, 122, 0.12) 0%,
-          transparent 60%
-        );
-        opacity: 0;
-        will-change: opacity;
-      }
     </style>
   </head>
   <body>
@@ -78,31 +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="neon-bg"></div>
-        <div class="stage"><div class="neon">neon</div></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="neon-flicker"
+        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(".neon", { opacity: 0 }, 0);
-      const neonPattern = [
-        { t: 0.2, o: 1 },
-        { t: 0.26, o: 0 },
-        { t: 0.3, o: 1 },
-        { t: 0.38, o: 0.3 },
-        { t: 0.42, o: 1 },
-        { t: 0.5, o: 0.5 },
-        { t: 0.55, o: 1 },
-      ];
-      neonPattern.forEach((p) => {
-        tl.to(".neon", { opacity: p.o, duration: 0.02, ease: "steps(1)" }, p.t);
-      });
-      tl.to(".neon-bg", { opacity: 1, duration: 0.4, ease: "power2.out" }, 0.5);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/neon-flicker/scene.html

@@ -0,0 +1,73 @@
+<template id="neon-flicker-template">
+  <div data-composition-id="neon-flicker" 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;
+      }
+      .neon {
+        font-family: "Playfair Display", serif;
+        font-style: italic;
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.02em;
+        color: #ff64a0;
+        text-shadow:
+          0 0 8px #ff64a0,
+          0 0 24px #ff64a0,
+          0 0 60px #ff1a7a,
+          0 0 120px #ff1a7a;
+        will-change: opacity, text-shadow;
+      }
+      .neon-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          circle at 50% 50%,
+          rgba(255, 26, 122, 0.12) 0%,
+          transparent 60%
+        );
+        opacity: 0;
+        will-change: opacity;
+      }
+    </style>
+    <div class="neon-bg"></div>
+    <div class="stage"><div class="neon">neon</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(".neon", { opacity: 0 }, 0);
+      const neonPattern = [
+        { t: 0.2, o: 1 },
+        { t: 0.26, o: 0 },
+        { t: 0.3, o: 1 },
+        { t: 0.38, o: 0.3 },
+        { t: 0.42, o: 1 },
+        { t: 0.5, o: 0.5 },
+        { t: 0.55, o: 1 },
+      ];
+      neonPattern.forEach((p) => {
+        tl.to(".neon", { opacity: p.o, duration: 0.02, ease: "steps(1)" }, p.t);
+      });
+      tl.to(".neon-bg", { opacity: 1, duration: 0.4, ease: "power2.out" }, 0.5);
+
+      window.__timelines["neon-flicker"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/outline-to-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,48 +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;
-      }
-      .outline-stack {
-        position: relative;
-        font-family: "Playfair Display", serif;
-        font-weight: 900;
-        font-size: 320px;
-        letter-spacing: -0.04em;
-        line-height: 0.95;
-        white-space: nowrap;
-      }
-      .stroke-layer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        color: transparent;
-        -webkit-text-stroke: 3px var(--hg-violet-2);
-        text-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
-        will-change:
-          opacity,
-          -webkit-text-stroke;
-      }
-      .fill-layer {
-        position: relative;
-        color: var(--hg-fg);
-        clip-path: inset(100% 0 0 0);
-        will-change: clip-path;
-      }
-      .spacer {
-        color: transparent;
-      }
     </style>
   </head>
   <body>
@@ -82,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="stage">
-          <div class="outline-stack">
-            <span class="spacer">Premium</span>
-            <span class="stroke-layer">Premium</span>
-            <span class="fill-layer">Premium</span>
-          </div>
-        </div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="outline-to-fill"
+        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 });
-
-      // Stroke draws in
-      tl.fromTo(
-        ".stroke-layer",
-        { opacity: 0, scale: 1.04 },
-        { opacity: 1, scale: 1, duration: 0.45, ease: "power3.out" },
-        0.15,
-      );
-
-      // Fill rises from bottom
-      tl.set(".fill-layer", { clipPath: "inset(100% 0 0 0)" }, 0);
-      tl.to(".fill-layer", { clipPath: "inset(0% 0 0 0)", duration: 1.0, ease: "expo.out" }, 0.55);
-
-      // Stroke recedes once fill arrives
-      tl.to(".stroke-layer", { opacity: 0.35, duration: 0.6, 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/outline-to-fill/scene.html

@@ -0,0 +1,82 @@
+<template id="outline-to-fill-template">
+  <div data-composition-id="outline-to-fill" 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;
+      }
+      .outline-stack {
+        position: relative;
+        font-family: "Playfair Display", serif;
+        font-weight: 900;
+        font-size: 320px;
+        letter-spacing: -0.04em;
+        line-height: 0.95;
+        white-space: nowrap;
+      }
+      .stroke-layer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: transparent;
+        -webkit-text-stroke: 3px var(--hg-violet-2);
+        text-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
+        will-change:
+          opacity,
+          -webkit-text-stroke;
+      }
+      .fill-layer {
+        position: relative;
+        color: var(--hg-fg);
+        clip-path: inset(100% 0 0 0);
+        will-change: clip-path;
+      }
+      .spacer {
+        color: transparent;
+      }
+    </style>
+    <div class="stage">
+      <div class="outline-stack">
+        <span class="spacer">Premium</span>
+        <span class="stroke-layer">Premium</span>
+        <span class="fill-layer">Premium</span>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Stroke draws in
+      tl.fromTo(
+        ".stroke-layer",
+        { opacity: 0, scale: 1.04 },
+        { opacity: 1, scale: 1, duration: 0.45, ease: "power3.out" },
+        0.15,
+      );
+
+      // Fill rises from bottom
+      tl.set(".fill-layer", { clipPath: "inset(100% 0 0 0)" }, 0);
+      tl.to(".fill-layer", { clipPath: "inset(0% 0 0 0)", duration: 1.0, ease: "expo.out" }, 0.55);
+
+      // Stroke recedes once fill arrives
+      tl.to(".stroke-layer", { opacity: 0.35, duration: 0.6, ease: "power2.out" }, 1.0);
+
+      window.__timelines["outline-to-fill"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/palette-flip/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,50 +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;
-      }
-      .kicker {
-        font-weight: 700;
-        font-size: 38px;
-        letter-spacing: 0.42em;
-        text-transform: uppercase;
-        margin-bottom: 40px;
-      }
-      .word {
-        font-weight: 900;
-        font-size: 300px;
-        letter-spacing: -0.05em;
-        line-height: 0.9;
-        white-space: nowrap;
-      }
-      .bars {
-        display: flex;
-        gap: 26px;
-        margin-top: 56px;
-      }
-      .bar {
-        width: 220px;
-        height: 26px;
-        border-radius: 4px;
-      }
-      .bar.b2 {
-        width: 140px;
-      }
-      .bar.b3 {
-        width: 90px;
-      }
     </style>
   </head>
   <body>
@@ -84,49 +35,19 @@
       data-width="1920"
       data-height="1080"
     >
-      <div id="scene" class="clip" data-start="0" data-duration="2.6" data-track-index="1">
-        <div class="stage">
-          <div class="kicker" id="kicker">REGIME</div>
-          <div class="word" id="word">REGIME</div>
-          <div class="bars">
-            <div class="bar b1"></div>
-            <div class="bar b2"></div>
-            <div class="bar b3"></div>
-          </div>
-        </div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="palette-flip"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="2.6"
+        data-track-index="1"
+      ></div>
     </div>
     <script>
       window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // Four distinct palette regimes — same layout, re-skinned on each flip.
-      const regimes = [
-        { bg: "#0a0a0f", fg: "#f5f5fa", accent: "#7c3aed", kicker: "#a855f7" }, // dark / violet
-        { bg: "#f4ead8", fg: "#1a1410", accent: "#ff5a47", kicker: "#c4452f" }, // cream / coral
-        { bg: "#08222b", fg: "#eafaf6", accent: "#1fd1b0", kicker: "#7fe3d2" }, // navy / teal
-        { bg: "#000000", fg: "#ffce3a", accent: "#ffce3a", kicker: "#7a6010" }, // black / amber
-      ];
-
-      const beat = 0.6;
-      const scene = "#scene";
-      const word = "#word";
-      const kicker = "#kicker";
-      const bars = ".bar";
-
-      // Instant 0ms flips on every beat — cycle through the regimes deterministically.
-      // The motion IS the colour change; layout never moves.
-      const flips = 5;
-      for (let i = 0; i < flips; i++) {
-        const p = regimes[i % regimes.length];
-        const t = i * beat;
-        tl.set(scene, { backgroundColor: p.bg }, t);
-        tl.set(word, { color: p.fg }, t);
-        tl.set(kicker, { color: p.kicker }, t);
-        tl.set(bars, { backgroundColor: p.accent }, t);
-      }
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/palette-flip/scene.html

@@ -0,0 +1,97 @@
+<template id="palette-flip-template">
+  <div data-composition-id="palette-flip" data-width="1920" data-height="1080" data-duration="2.6">
+    <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;
+      }
+      .kicker {
+        font-weight: 700;
+        font-size: 38px;
+        letter-spacing: 0.42em;
+        text-transform: uppercase;
+        margin-bottom: 40px;
+      }
+      .word {
+        font-weight: 900;
+        font-size: 300px;
+        letter-spacing: -0.05em;
+        line-height: 0.9;
+        white-space: nowrap;
+      }
+      .bars {
+        display: flex;
+        gap: 26px;
+        margin-top: 56px;
+      }
+      .bar {
+        width: 220px;
+        height: 26px;
+        border-radius: 4px;
+      }
+      .bar.b2 {
+        width: 140px;
+      }
+      .bar.b3 {
+        width: 90px;
+      }
+    </style>
+    <div class="stage">
+      <div class="kicker" id="kicker">REGIME</div>
+      <div class="word" id="word">REGIME</div>
+      <div class="bars">
+        <div class="bar b1"></div>
+        <div class="bar b2"></div>
+        <div class="bar b3"></div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Four distinct palette regimes — same layout, re-skinned on each flip.
+      const regimes = [
+        { bg: "#0a0a0f", fg: "#f5f5fa", accent: "#7c3aed", kicker: "#a855f7" }, // dark / violet
+        { bg: "#f4ead8", fg: "#1a1410", accent: "#ff5a47", kicker: "#c4452f" }, // cream / coral
+        { bg: "#08222b", fg: "#eafaf6", accent: "#1fd1b0", kicker: "#7fe3d2" }, // navy / teal
+        { bg: "#000000", fg: "#ffce3a", accent: "#ffce3a", kicker: "#7a6010" }, // black / amber
+      ];
+
+      const beat = 0.6;
+      const scene = "#scene";
+      const word = "#word";
+      const kicker = "#kicker";
+      const bars = ".bar";
+
+      // Instant 0ms flips on every beat — cycle through the regimes deterministically.
+      // The motion IS the colour change; layout never moves.
+      const flips = 5;
+      for (let i = 0; i < flips; i++) {
+        const p = regimes[i % regimes.length];
+        const t = i * beat;
+        tl.set(scene, { backgroundColor: p.bg }, t);
+        tl.set(word, { color: p.fg }, t);
+        tl.set(kicker, { color: p.kicker }, t);
+        tl.set(bars, { backgroundColor: p.accent }, t);
+      }
+
+      window.__timelines["palette-flip"] = tl;
+    </script>
+  </div>
+</template>