dsh-hyperframes 0.3.1 → 0.4.0

package/skills/music-to-video/references/motion-primitives/particle-burst/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,47 +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: 320px;
-        letter-spacing: -0.05em;
-        color: var(--hg-fg);
-        white-space: nowrap;
-        will-change: transform, opacity;
-        position: relative;
-        z-index: 10;
-      }
-      .particle-stage {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-      }
-      .particle {
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: var(--hg-violet-2);
-        box-shadow: 0 0 12px var(--hg-violet-2);
-        opacity: 0;
-        will-change: transform, opacity;
-      }
     </style>
   </head>
   <body>
@@ -81,61 +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="particle-stage" id="particles"></div>
-        <div class="stage"><div class="hero">SPARK</div></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="particle-burst"
+        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 });
-
-      // Build N particles deterministically
-      const N = 36;
-      const container = document.getElementById("particles");
-      const particles = [];
-      for (let i = 0; i < N; i++) {
-        const p = document.createElement("div");
-        p.className = "particle";
-        // Vary size per particle for visual interest
-        const sz = 4 + (i % 4) * 3;
-        p.style.width = sz + "px";
-        p.style.height = sz + "px";
-        // Slight color variation
-        const hue = ((i * 17) % 60) - 30;
-        p.style.filter = `hue-rotate(${hue}deg)`;
-        container.appendChild(p);
-        particles.push(p);
-      }
-
-      // Hero punch + flash entry
-      tl.fromTo(
-        ".hero",
-        { scale: 0.85, opacity: 0 },
-        { scale: 1, opacity: 1, duration: 0.3, ease: "power4.out" },
-        0.3,
-      );
-
-      // Particles burst out
-      particles.forEach((p, i) => {
-        const angle = (i / N) * Math.PI * 2 + i * 0.137; // golden-angle jitter
-        const radius = 500 + (i % 5) * 90 + (i % 3) * 40;
-        const tx = Math.cos(angle) * radius;
-        const ty = Math.sin(angle) * radius;
-        const dur = 1.1 + (i % 5) * 0.08;
-        tl.fromTo(
-          p,
-          { x: 0, y: 0, scale: 1, opacity: 1 },
-          { x: tx, y: ty, scale: 0, opacity: 0, duration: dur, ease: "expo.out" },
-          0.35 + (i % 6) * 0.012,
-        );
-      });
-
-      // Hero settle wobble
-      tl.to(".hero", { scale: 1.04, duration: 0.1, ease: "power3.out" }, 0.35);
-      tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.5)" }, 0.45);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

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

@@ -0,0 +1,106 @@
+<template id="particle-burst-template">
+  <div data-composition-id="particle-burst" 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;
+        will-change: transform, opacity;
+        position: relative;
+        z-index: 10;
+      }
+      .particle-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+      .particle {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--hg-violet-2);
+        box-shadow: 0 0 12px var(--hg-violet-2);
+        opacity: 0;
+        will-change: transform, opacity;
+      }
+    </style>
+    <div class="particle-stage" id="particles"></div>
+    <div class="stage"><div class="hero">SPARK</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Build N particles deterministically
+      const N = 36;
+      const container = document.getElementById("particles");
+      const particles = [];
+      for (let i = 0; i < N; i++) {
+        const p = document.createElement("div");
+        p.className = "particle";
+        // Vary size per particle for visual interest
+        const sz = 4 + (i % 4) * 3;
+        p.style.width = sz + "px";
+        p.style.height = sz + "px";
+        // Slight color variation
+        const hue = ((i * 17) % 60) - 30;
+        p.style.filter = `hue-rotate(${hue}deg)`;
+        container.appendChild(p);
+        particles.push(p);
+      }
+
+      // Hero punch + flash entry
+      tl.fromTo(
+        ".hero",
+        { scale: 0.85, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 0.3, ease: "power4.out" },
+        0.3,
+      );
+
+      // Particles burst out
+      particles.forEach((p, i) => {
+        const angle = (i / N) * Math.PI * 2 + i * 0.137; // golden-angle jitter
+        const radius = 500 + (i % 5) * 90 + (i % 3) * 40;
+        const tx = Math.cos(angle) * radius;
+        const ty = Math.sin(angle) * radius;
+        const dur = 1.1 + (i % 5) * 0.08;
+        tl.fromTo(
+          p,
+          { x: 0, y: 0, scale: 1, opacity: 1 },
+          { x: tx, y: ty, scale: 0, opacity: 0, duration: dur, ease: "expo.out" },
+          0.35 + (i % 6) * 0.012,
+        );
+      });
+
+      // Hero settle wobble
+      tl.to(".hero", { scale: 1.04, duration: 0.1, ease: "power3.out" }, 0.35);
+      tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.5)" }, 0.45);
+
+      window.__timelines["particle-burst"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/pixel-dissolve/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;
-      }
-      .hero {
-        font-weight: 900;
-        font-size: 320px;
-        letter-spacing: -0.05em;
-        color: var(--hg-fg);
-        white-space: nowrap;
-        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
-        -webkit-background-clip: text;
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        color: transparent;
-      }
-      .grid {
-        position: absolute;
-        inset: 0;
-        display: grid;
-        will-change: contents;
-        pointer-events: none;
-      }
-      .cell {
-        background: var(--hg-bg);
-        will-change: opacity, transform;
-      }
     </style>
   </head>
   <body>
@@ -76,46 +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="hero">DISSOLVE</div></div>
-        <div class="grid" id="grid"></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="pixel-dissolve"
+        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 COLS = 24;
-      const ROWS = 14;
-      const grid = document.getElementById("grid");
-      grid.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
-      grid.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;
-
-      const cells = [];
-      for (let i = 0; i < COLS * ROWS; i++) {
-        const c = document.createElement("div");
-        c.className = "cell";
-        grid.appendChild(c);
-        cells.push(c);
-      }
-
-      // Deterministic shuffle: hash function based on i+j
-      function hash(i) {
-        return ((i * 9301 + 49297) % 233280) / 233280;
-      }
-      const order = cells.map((c, i) => ({ c, i, h: hash(i) })).sort((a, b) => a.h - b.h);
-
-      // All cells start visible (covering hero), fade out in shuffled order
-      const TOTAL = 0.85;
-      order.forEach((o, k) => {
-        const t = 0.35 + (k / order.length) * TOTAL;
-        tl.to(o.c, { opacity: 0, duration: 0.06, ease: "steps(1)" }, t);
-      });
-
-      // After dissolve, gentle hero scale settle (it was always visible, now exposed)
-      tl.fromTo(".hero", { scale: 1.03 }, { scale: 1.0, 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/pixel-dissolve/scene.html

@@ -0,0 +1,86 @@
+<template id="pixel-dissolve-template">
+  <div data-composition-id="pixel-dissolve" 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;
+        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+      }
+      .grid {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        will-change: contents;
+        pointer-events: none;
+      }
+      .cell {
+        background: var(--hg-bg);
+        will-change: opacity, transform;
+      }
+    </style>
+    <div class="stage"><div class="hero">DISSOLVE</div></div>
+    <div class="grid" id="grid"></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      const COLS = 24;
+      const ROWS = 14;
+      const grid = document.getElementById("grid");
+      grid.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
+      grid.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;
+
+      const cells = [];
+      for (let i = 0; i < COLS * ROWS; i++) {
+        const c = document.createElement("div");
+        c.className = "cell";
+        grid.appendChild(c);
+        cells.push(c);
+      }
+
+      // Deterministic shuffle: hash function based on i+j
+      function hash(i) {
+        return ((i * 9301 + 49297) % 233280) / 233280;
+      }
+      const order = cells.map((c, i) => ({ c, i, h: hash(i) })).sort((a, b) => a.h - b.h);
+
+      // All cells start visible (covering hero), fade out in shuffled order
+      const TOTAL = 0.85;
+      order.forEach((o, k) => {
+        const t = 0.35 + (k / order.length) * TOTAL;
+        tl.to(o.c, { opacity: 0, duration: 0.06, ease: "steps(1)" }, t);
+      });
+
+      // After dissolve, gentle hero scale settle (it was always visible, now exposed)
+      tl.fromTo(".hero", { scale: 1.03 }, { scale: 1.0, duration: 0.5, ease: "power2.out" }, 1.0);
+
+      window.__timelines["pixel-dissolve"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/radial-burst-lines/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: 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>
   </head>
   <body>
@@ -80,81 +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="burst-stage" id="bursts"></div>
-        <div class="stage"><div class="hero">BAM</div></div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="radial-burst-lines"
+        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 });
-
-      // 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["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>