npm - freecodego - Versions diffs - 0.1.7-alpha.2.1 → 0.1.7-rc.2.2 - Mend

freecodego 0.1.7-alpha.2.1 → 0.1.7-rc.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (593) hide show

package/dist/assets/design/skills/music-to-video/references/motion-primitives/electric-arc/scene.html ADDED Viewed

@@ -0,0 +1,105 @@
+<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/dist/assets/design/skills/music-to-video/references/motion-primitives/flash-cut/index.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!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/dist/assets/design/skills/music-to-video/references/motion-primitives/flash-cut/scene.html ADDED Viewed

@@ -0,0 +1,97 @@
+<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/dist/assets/design/skills/music-to-video/references/motion-primitives/gooey-metaball/index.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!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/dist/assets/design/skills/music-to-video/references/motion-primitives/gooey-metaball/scene.html ADDED Viewed

@@ -0,0 +1,206 @@
+<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/dist/assets/design/skills/music-to-video/references/motion-primitives/hard-cut/index.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!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/dist/assets/design/skills/music-to-video/references/motion-primitives/hard-cut/scene.html ADDED Viewed

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