dsh-hyperframes 0.9.0 → 0.9.2

package/skills/music-to-video/references/motion-primitives/pixel-dissolve/index.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>26 · pixel_dissolve</title>
-    <script src="../assets/gsap.min.js"></script>
-    <style>
-      :root {
-        --hg-violet: #7c3aed;
-        --hg-violet-2: #a855f7;
-        --hg-bg: #0a0a0f;
-        --hg-fg: #f5f5fa;
-        --hg-dim: #6b6b78;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: var(--hg-bg);
-        font-family: "Inter", system-ui, sans-serif;
-        color: var(--hg-fg);
-        -webkit-font-smoothing: antialiased;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="2"
-      data-width="1920"
-      data-height="1080"
-    >
-      <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 || {};
-      window.__timelines["main"] = gsap.timeline({ paused: true });
-    </script>
-  </body>
-</html>

package/skills/music-to-video/references/motion-primitives/pixel-dissolve/scene.html

@@ -1,86 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>25 · radial_burst_lines</title>
-    <script src="../assets/gsap.min.js"></script>
-    <style>
-      :root {
-        --hg-violet: #7c3aed;
-        --hg-violet-2: #a855f7;
-        --hg-bg: #0a0a0f;
-        --hg-fg: #f5f5fa;
-        --hg-dim: #6b6b78;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: var(--hg-bg);
-        font-family: "Inter", system-ui, sans-serif;
-        color: var(--hg-fg);
-        -webkit-font-smoothing: antialiased;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="2"
-      data-width="1920"
-      data-height="1080"
-    >
-      <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 || {};
-      window.__timelines["main"] = gsap.timeline({ paused: true });
-    </script>
-  </body>
-</html>

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

@@ -1,130 +0,0 @@
-<template id="radial-burst-lines-template">
-  <div
-    data-composition-id="radial-burst-lines"
-    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;
-        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>
-    <div class="burst-stage" id="bursts"></div>
-    <div class="stage"><div class="hero">BAM</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["radial-burst-lines"] = tl;
-    </script>
-  </div>
-</template>

package/skills/music-to-video/references/motion-primitives/screen-shake/index.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>07 · screen_shake</title>
-    <script src="../assets/gsap.min.js"></script>
-    <style>
-      :root {
-        --hg-violet: #7c3aed;
-        --hg-violet-2: #a855f7;
-        --hg-bg: #0a0a0f;
-        --hg-fg: #f5f5fa;
-        --hg-dim: #6b6b78;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: var(--hg-bg);
-        font-family: "Inter", system-ui, sans-serif;
-        color: var(--hg-fg);
-        -webkit-font-smoothing: antialiased;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="2"
-      data-width="1920"
-      data-height="1080"
-    >
-      <div
-        id="scene"
-        class="clip"
-        data-composition-id="screen-shake"
-        data-composition-src="scene.html"
-        data-start="0"
-        data-duration="2"
-        data-track-index="1"
-      ></div>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      window.__timelines["main"] = gsap.timeline({ paused: true });
-    </script>
-  </body>
-</html>

package/skills/music-to-video/references/motion-primitives/screen-shake/scene.html

@@ -1,78 +0,0 @@
-<template id="screen-shake-template">
-  <div data-composition-id="screen-shake" 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;
-      }
-      .hero {
-        font-weight: 900;
-        font-size: 280px;
-        letter-spacing: -0.04em;
-        line-height: 0.95;
-        color: var(--hg-fg);
-        white-space: nowrap;
-      }
-      .shake-stage {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        will-change: transform;
-      }
-      .impact-bg {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(circle at 50% 50%, rgba(255, 42, 74, 0.18) 0%, transparent 60%);
-        opacity: 0;
-        will-change: opacity;
-      }
-    </style>
-    <div class="impact-bg"></div>
-    <div class="shake-stage"><div class="hero">IMPACT</div></div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      tl.fromTo(
-        ".hero",
-        { scale: 0.6, opacity: 0 },
-        { scale: 1, opacity: 1, duration: 0.15, ease: "power4.out" },
-        0.3,
-      );
-      tl.fromTo(
-        ".impact-bg",
-        { opacity: 0 },
-        { opacity: 1, duration: 0.06, ease: "steps(1)" },
-        0.3,
-      );
-      tl.to(".impact-bg", { opacity: 0, duration: 0.6, ease: "power2.in" }, 0.4);
-
-      const shakeStart = 0.32;
-      const shakeAmps = [28, -24, 20, -22, 16, -18, 14, -14, 10, -8, 6, -5, 3, -2];
-      shakeAmps.forEach((amp, i) => {
-        tl.to(
-          ".shake-stage",
-          { x: amp, y: amp * 0.7 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
-          shakeStart + i * 0.03,
-        );
-      });
-      tl.to(
-        ".shake-stage",
-        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
-        shakeStart + shakeAmps.length * 0.03,
-      );
-
-      window.__timelines["screen-shake"] = tl;
-    </script>
-  </div>
-</template>

package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/index.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>15 · slot_machine_reveal</title>
-    <script src="../assets/gsap.min.js"></script>
-    <style>
-      :root {
-        --hg-violet: #7c3aed;
-        --hg-violet-2: #a855f7;
-        --hg-bg: #0a0a0f;
-        --hg-fg: #f5f5fa;
-        --hg-dim: #6b6b78;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: var(--hg-bg);
-        font-family: "Inter", system-ui, sans-serif;
-        color: var(--hg-fg);
-        -webkit-font-smoothing: antialiased;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="2"
-      data-width="1920"
-      data-height="1080"
-    >
-      <div
-        id="scene"
-        class="clip"
-        data-composition-id="slot-machine-reveal"
-        data-composition-src="scene.html"
-        data-start="0"
-        data-duration="2"
-        data-track-index="1"
-      ></div>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      window.__timelines["main"] = gsap.timeline({ paused: true });
-    </script>
-  </body>
-</html>

package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/scene.html

@@ -1,100 +0,0 @@
-<template id="slot-machine-reveal-template">
-  <div
-    data-composition-id="slot-machine-reveal"
-    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;
-      }
-      .slot {
-        font-family: "JetBrains Mono", monospace;
-        font-weight: 700;
-        font-size: 280px;
-        letter-spacing: 0.04em;
-        color: var(--hg-fg);
-        display: flex;
-        gap: 30px;
-      }
-      .slot .digit {
-        display: inline-block;
-        min-width: 1ch;
-        text-shadow: 0 0 40px rgba(168, 85, 247, 0.6);
-      }
-      .slot-label {
-        position: absolute;
-        bottom: 30%;
-        left: 50%;
-        transform: translateX(-50%);
-        font-family: "JetBrains Mono", monospace;
-        font-size: 22px;
-        color: var(--hg-dim);
-        letter-spacing: 0.4em;
-        text-transform: uppercase;
-        opacity: 0;
-      }
-    </style>
-    <div class="stage">
-      <div class="slot">
-        <span class="digit" data-target="5">0</span>
-        <span class="digit" data-target=".">0</span>
-        <span class="digit" data-target="5">0</span>
-        <span class="digit" data-target="x">0</span>
-      </div>
-    </div>
-    <div class="slot-label">FINAL VERSION</div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      const DIGITS = "0123456789";
-      const slotStates = [{ p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }];
-      slotStates.forEach((state, idx) => {
-        tl.to(
-          state,
-          {
-            p: 1,
-            duration: 1.0,
-            delay: idx * 0.08,
-            ease: "power3.out",
-            onUpdate: function () {
-              const spans = document.querySelectorAll(".slot .digit");
-              const span = spans[idx];
-              if (!span) return;
-              const target = span.getAttribute("data-target");
-              if (state.p >= 0.85) {
-                span.textContent = target;
-                span.style.color = "var(--hg-violet-2)";
-              } else {
-                const tick = Math.floor(state.p * 80 + idx * 3);
-                span.textContent = DIGITS.charAt(tick % 10);
-              }
-            },
-          },
-          0.15,
-        );
-      });
-      tl.to(".slot-label", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.2);
-
-      window.__timelines["slot-machine-reveal"] = tl;
-    </script>
-  </div>
-</template>

package/skills/music-to-video/references/motion-primitives/spotlight-sweep/index.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>20 · spotlight_sweep</title>
-    <script src="../assets/gsap.min.js"></script>
-    <style>
-      :root {
-        --hg-violet: #7c3aed;
-        --hg-violet-2: #a855f7;
-        --hg-bg: #0a0a0f;
-        --hg-fg: #f5f5fa;
-        --hg-dim: #6b6b78;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: var(--hg-bg);
-        font-family: "Inter", system-ui, sans-serif;
-        color: var(--hg-fg);
-        -webkit-font-smoothing: antialiased;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="2"
-      data-width="1920"
-      data-height="1080"
-    >
-      <div
-        id="scene"
-        class="clip"
-        data-composition-id="spotlight-sweep"
-        data-composition-src="scene.html"
-        data-start="0"
-        data-duration="2"
-        data-track-index="1"
-      ></div>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      window.__timelines["main"] = gsap.timeline({ paused: true });
-    </script>
-  </body>
-</html>