dsh-hyperframes 0.9.1 → 0.9.2

package/skills/music-to-video/references/motion-primitives/electric-arc/scene.html

@@ -1,105 +0,0 @@
-<template id="electric-arc-template">
-  <div data-composition-id="electric-arc" 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;
-        align-items: center;
-        justify-content: center;
-      }
-      .arc-svg {
-        position: absolute;
-        inset: 0;
-      }
-      .arc-path {
-        fill: none;
-        stroke: var(--hg-fg);
-        stroke-width: 3;
-        stroke-linecap: round;
-        filter: drop-shadow(0 0 8px var(--hg-cyan)) drop-shadow(0 0 16px var(--hg-cyan));
-        stroke-dasharray: 1200;
-        stroke-dashoffset: 1200;
-        will-change: stroke-dashoffset, opacity;
-      }
-      .arc-flash {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(circle at 50% 50%, rgba(42, 255, 240, 0.3) 0%, transparent 40%);
-        opacity: 0;
-        will-change: opacity;
-      }
-      .arc-label {
-        font-weight: 900;
-        font-size: 240px;
-        letter-spacing: -0.04em;
-        color: var(--hg-fg);
-        position: relative;
-        z-index: 2;
-      }
-    </style>
-    <div class="stage">
-      <svg class="arc-svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
-        <path
-          class="arc-path"
-          id="arc1"
-          d="M 200 540 L 380 480 L 440 580 L 620 500 L 720 600 L 880 510 L 960 540"
-        />
-        <path
-          class="arc-path"
-          id="arc2"
-          d="M 1720 540 L 1540 600 L 1480 500 L 1300 580 L 1200 480 L 1040 570 L 960 540"
-        />
-        <path class="arc-path" id="arc3" d="M 960 200 L 920 360 L 1040 420 L 940 520 L 960 540" />
-      </svg>
-      <div class="arc-flash"></div>
-      <div class="arc-label">CHARGE</div>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      tl.fromTo(
-        ".arc-label",
-        { opacity: 0, scale: 0.9 },
-        { opacity: 1, scale: 1, duration: 0.3, ease: "power3.out" },
-        0.5,
-      );
-      const arcs = ["#arc1", "#arc2", "#arc3"];
-      arcs.forEach((p, i) => {
-        tl.fromTo(
-          p,
-          { strokeDashoffset: 1200, opacity: 0 },
-          { strokeDashoffset: 0, opacity: 1, duration: 0.18, ease: "power4.out" },
-          0.15 + i * 0.05,
-        );
-      });
-      tl.to(arcs.join(","), { opacity: 0.3, duration: 0.04, ease: "steps(1)" }, 0.55);
-      tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.6);
-      tl.to(arcs.join(","), { opacity: 0.5, duration: 0.04, ease: "steps(1)" }, 0.7);
-      tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.78);
-      tl.fromTo(
-        ".arc-flash",
-        { opacity: 0 },
-        { opacity: 1, duration: 0.06, ease: "steps(1)" },
-        0.5,
-      );
-      tl.to(".arc-flash", { opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);
-
-      window.__timelines["electric-arc"] = tl;
-    </script>
-  </div>
-</template>

package/skills/music-to-video/references/motion-primitives/flash-cut/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>flash_cut</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="1.8"
-      data-width="1920"
-      data-height="1080"
-    >
-      <div
-        id="scene"
-        class="clip"
-        data-composition-id="flash-cut"
-        data-composition-src="scene.html"
-        data-start="0"
-        data-duration="1.8"
-        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/flash-cut/scene.html

@@ -1,97 +0,0 @@
-<template id="flash-cut-template">
-  <div data-composition-id="flash-cut" 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;
-        align-items: center;
-        justify-content: center;
-      }
-      .word {
-        position: absolute;
-        font-weight: 900;
-        font-size: 260px;
-        letter-spacing: -0.04em;
-        line-height: 0.95;
-        white-space: nowrap;
-        color: var(--hg-fg);
-        will-change: opacity;
-      }
-      .accent {
-        position: absolute;
-        bottom: 360px;
-        width: 220px;
-        height: 14px;
-        border-radius: 999px;
-        background: var(--hg-violet);
-        will-change: background, transform;
-      }
-      .flash {
-        position: absolute;
-        inset: 0;
-        background: #ffffff;
-        opacity: 0;
-        pointer-events: none;
-        will-change: opacity;
-      }
-    </style>
-    <div class="stage">
-      <div class="accent" id="accent"></div>
-      <div class="word" id="w0">READY</div>
-      <div class="word" id="w1">IMPACT</div>
-      <div class="word" id="w2">DONE</div>
-    </div>
-    <div class="flash" id="flash"></div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // Initial state: first word visible, others hidden, accent violet.
-      tl.set("#w0", { opacity: 1 }, 0);
-      tl.set("#w1", { opacity: 0 }, 0);
-      tl.set("#w2", { opacity: 0 }, 0);
-      tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 0);
-      tl.set("#flash", { opacity: 0 }, 0);
-
-      // Two hits; during each white frame, swap underlying word + accent colour.
-      const hits = [
-        { t: 0.5, from: "#w0", to: "#w1", color: "#a855f7", scaleX: 1.45 },
-        { t: 1.2, from: "#w1", to: "#w2", color: "#f5f5fa", scaleX: 0.7 },
-      ];
-
-      hits.forEach((h) => {
-        // Instant full-frame white flash on the hit.
-        tl.set("#flash", { opacity: 1 }, h.t);
-        // While white (~2 frames at 30fps), swap the revealed state.
-        tl.set(h.from, { opacity: 0 }, h.t + 0.03);
-        tl.set(h.to, { opacity: 1 }, h.t + 0.03);
-        tl.set("#accent", { backgroundColor: h.color, scaleX: h.scaleX }, h.t + 0.03);
-        // Snap the flash back out within ~3 frames.
-        tl.set("#flash", { opacity: 0 }, h.t + 0.06);
-      });
-
-      // Graceful loop: dip back to white at the very end and restore the start
-      // state so the cycle re-enters cleanly on the next pass.
-      tl.set("#flash", { opacity: 1 }, 1.74);
-      tl.set("#w2", { opacity: 0 }, 1.77);
-      tl.set("#w0", { opacity: 1 }, 1.77);
-      tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 1.77);
-      tl.set("#flash", { opacity: 0 }, 1.8);
-
-      window.__timelines["flash-cut"] = tl;
-    </script>
-  </div>
-</template>

package/skills/music-to-video/references/motion-primitives/gooey-metaball/index.html

@@ -1,54 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>17 · gooey_metaball</title>
-    <script src="../assets/gsap.min.js"></script>
-    <style>
-      :root {
-        --hg-violet: #7c3aed;
-        --hg-violet-2: #a855f7;
-        --hg-cyan: #2afff0;
-        --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="gooey-metaball"
-        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/gooey-metaball/scene.html

@@ -1,206 +0,0 @@
-<template id="gooey-metaball-template">
-  <div data-composition-id="gooey-metaball" 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;
-      }
-      .hero {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 900;
-        font-size: 280px;
-        letter-spacing: -0.04em;
-        color: var(--hg-fg);
-        z-index: 5;
-        pointer-events: none;
-      }
-      .gooey-stage {
-        position: absolute;
-        inset: 0;
-        filter: url(#gooey-filter);
-      }
-      .ball {
-        position: absolute;
-        border-radius: 50%;
-        background: var(--hg-violet-2);
-        top: 50%;
-        left: 50%;
-        will-change: transform;
-        opacity: 0;
-      }
-      .ball.a {
-        width: 280px;
-        height: 280px;
-        background: #7c3aed;
-      }
-      .ball.b {
-        width: 240px;
-        height: 240px;
-        background: #a855f7;
-      }
-      .ball.c {
-        width: 200px;
-        height: 200px;
-        background: #d946ef;
-      }
-      .ball.d {
-        width: 320px;
-        height: 320px;
-        background: #8b5cf6;
-      }
-      .ball.e {
-        width: 180px;
-        height: 180px;
-        background: #c084fc;
-      }
-    </style>
-    <svg style="position: absolute; width: 0; height: 0">
-      <defs>
-        <filter id="gooey-filter">
-          <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" />
-          <feColorMatrix
-            in="blur"
-            mode="matrix"
-            values="
-                1 0 0 0 0
-                0 1 0 0 0
-                0 0 1 0 0
-                0 0 0 22 -10"
-            result="gooey"
-          />
-          <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
-        </filter>
-      </defs>
-    </svg>
-
-    <div class="gooey-stage">
-      <div class="ball a" id="ballA"></div>
-      <div class="ball b" id="ballB"></div>
-      <div class="ball c" id="ballC"></div>
-      <div class="ball d" id="ballD"></div>
-      <div class="ball e" id="ballE"></div>
-    </div>
-
-    <div class="hero">GOOEY</div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // Initial: all balls collapsed at center
-      ["#ballA", "#ballB", "#ballC", "#ballD", "#ballE"].forEach((id) => {
-        tl.set(id, { xPercent: -50, yPercent: -50, scale: 0, opacity: 0 }, 0);
-      });
-      // Spawn outward
-      tl.to(
-        "#ballA",
-        {
-          xPercent: -50 - 120,
-          yPercent: -50 + 20,
-          scale: 1,
-          opacity: 1,
-          duration: 0.5,
-          ease: "back.out(1.6)",
-        },
-        0.15,
-      );
-      tl.to(
-        "#ballB",
-        {
-          xPercent: -50 + 100,
-          yPercent: -50 + 50,
-          scale: 1,
-          opacity: 1,
-          duration: 0.55,
-          ease: "back.out(1.6)",
-        },
-        0.2,
-      );
-      tl.to(
-        "#ballC",
-        {
-          xPercent: -50 + 30,
-          yPercent: -50 - 80,
-          scale: 1,
-          opacity: 1,
-          duration: 0.55,
-          ease: "back.out(1.6)",
-        },
-        0.25,
-      );
-      tl.to(
-        "#ballD",
-        {
-          xPercent: -50 - 50,
-          yPercent: -50 - 30,
-          scale: 1,
-          opacity: 1,
-          duration: 0.55,
-          ease: "back.out(1.6)",
-        },
-        0.3,
-      );
-      tl.to(
-        "#ballE",
-        {
-          xPercent: -50 + 80,
-          yPercent: -50 - 40,
-          scale: 1,
-          opacity: 1,
-          duration: 0.55,
-          ease: "back.out(1.6)",
-        },
-        0.18,
-      );
-
-      // Idle drift
-      tl.to(
-        "#ballA",
-        { xPercent: "+=20", yPercent: "+=12", duration: 1.0, ease: "sine.inOut" },
-        0.7,
-      );
-      tl.to(
-        "#ballB",
-        { xPercent: "-=18", yPercent: "-=10", duration: 1.0, ease: "sine.inOut" },
-        0.7,
-      );
-      tl.to(
-        "#ballC",
-        { xPercent: "-=15", yPercent: "+=20", duration: 1.0, ease: "sine.inOut" },
-        0.7,
-      );
-      tl.to(
-        "#ballD",
-        { xPercent: "+=25", yPercent: "+=8", duration: 1.0, ease: "sine.inOut" },
-        0.7,
-      );
-      tl.to(
-        "#ballE",
-        { xPercent: "-=22", yPercent: "+=18", duration: 1.0, ease: "sine.inOut" },
-        0.7,
-      );
-
-      // Reveal text behind
-      tl.fromTo(
-        ".hero",
-        { opacity: 0, scale: 0.95 },
-        { opacity: 1, scale: 1, duration: 0.5, ease: "power3.out" },
-        0.6,
-      );
-
-      window.__timelines["gooey-metaball"] = tl;
-    </script>
-  </div>
-</template>

package/skills/music-to-video/references/motion-primitives/hard-cut/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>hard_cut</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="hard-cut"
-        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/hard-cut/scene.html

@@ -1,82 +0,0 @@
-<template id="hard-cut-template">
-  <div data-composition-id="hard-cut" 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;
-      }
-      .panel {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .word {
-        font-weight: 900;
-        font-size: 340px;
-        letter-spacing: -0.05em;
-        line-height: 0.9;
-        text-transform: uppercase;
-        white-space: nowrap;
-      }
-    </style>
-    <div class="stage" id="stage"></div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // Deterministic palette + word list. Variation is derived from index only.
-      const BG = ["#7c3aed", "#0a0a0f", "#ff2a4a", "#2afff0", "#a855f7", "#f5f5fa", "#0a0a0f"];
-      const FG = ["#f5f5fa", "#a855f7", "#0a0a0f", "#0a0a0f", "#0a0a0f", "#7c3aed", "#f5f5fa"];
-      const WORDS = ["CUT", "NOW", "HARD", "SNAP", "STOP", "GO", "CUT"];
-      const STEP = 0.28; // beat interval
-      const N = WORDS.length;
-
-      // Build one full-frame panel per cut, all hidden but the first.
-      const stage = document.getElementById("stage");
-      for (let i = 0; i < N; i++) {
-        const panel = document.createElement("div");
-        panel.className = "panel";
-        panel.id = "p" + i;
-        panel.style.background = BG[i];
-        panel.style.opacity = i === 0 ? "1" : "0";
-        const word = document.createElement("div");
-        word.className = "word";
-        word.style.color = FG[i];
-        word.textContent = WORDS[i];
-        panel.appendChild(word);
-        stage.appendChild(panel);
-      }
-
-      // Sample-accurate 0ms cuts: at each beat, hide current panel, show next.
-      // tl.set has no duration and no ease — brutal instant switching.
-      for (let i = 1; i < N; i++) {
-        const t = i * STEP;
-        tl.set("#p" + (i - 1), { opacity: 0 }, t);
-        tl.set("#p" + i, { opacity: 1 }, t);
-      }
-
-      // Loop gracefully: snap back to the first panel before the clip ends so a
-      // re-entry starts clean on the same color/word it began with.
-      tl.set("#p" + (N - 1), { opacity: 0 }, N * STEP);
-      tl.set("#p0", { opacity: 1 }, N * STEP);
-
-      window.__timelines["hard-cut"] = tl;
-    </script>
-  </div>
-</template>