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

freecodego 0.1.7-alpha.2.2 → 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/crash-zoom-in/scene.html ADDED Viewed

@@ -0,0 +1,120 @@
+<template id="crash-zoom-in-template">
+  <div data-composition-id="crash-zoom-in" 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;
+      }
+      .zoom-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        will-change: transform;
+      }
+      .radial-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          circle at center,
+          rgba(168, 85, 247, 0.18) 0%,
+          transparent 35%,
+          rgba(0, 0, 0, 0.6) 80%
+        );
+        opacity: 0;
+        will-change: opacity, transform;
+      }
+      .speed-lines {
+        position: absolute;
+        inset: 0;
+        background: repeating-radial-gradient(
+          circle at 50% 50%,
+          transparent 0px,
+          transparent 6px,
+          rgba(255, 255, 255, 0.08) 7px,
+          transparent 8px
+        );
+        opacity: 0;
+        will-change: opacity;
+        mix-blend-mode: screen;
+      }
+      .hero {
+        font-weight: 900;
+        font-size: 360px;
+        letter-spacing: -0.05em;
+        color: var(--hg-fg);
+        white-space: nowrap;
+        will-change: transform, filter;
+      }
+    </style>
+    <div class="radial-bg"></div>
+    <div class="speed-lines"></div>
+    <div class="zoom-stage"><div class="hero">CRASH</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // Hold black for tension
+      tl.set(".hero", { scale: 0.03, filter: "blur(20px)", opacity: 0 }, 0);
+      const CRASH = 0.45;
+      // The crash itself
+      tl.to(
+        ".hero",
+        { scale: 1.0, filter: "blur(0px)", opacity: 1, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+      // Background swoosh in same window
+      tl.fromTo(
+        ".radial-bg",
+        { opacity: 0, scale: 0.4 },
+        { opacity: 1, scale: 1, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+      tl.fromTo(
+        ".speed-lines",
+        { opacity: 0, scale: 0.2 },
+        { opacity: 1, scale: 1.4, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+      // Landing settle
+      const LAND = CRASH + 0.32;
+      tl.to(".hero", { scale: 0.96, duration: 0.08, ease: "power3.out" }, LAND);
+      tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.55)" }, LAND + 0.08);
+      // Quick landing shake
+      const sh = [9, -7, 5, -4, 2, -1];
+      sh.forEach((amp, i) => {
+        tl.to(
+          ".zoom-stage",
+          { x: amp, y: amp * 0.5 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
+          LAND + i * 0.03,
+        );
+      });
+      tl.to(
+        ".zoom-stage",
+        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
+        LAND + sh.length * 0.03,
+      );
+      // Speed lines fade
+      tl.to(".speed-lines", { opacity: 0, duration: 0.4, ease: "power2.out" }, LAND + 0.05);
+      // Radial settles
+      tl.to(".radial-bg", { opacity: 0.5, duration: 0.5, ease: "power2.out" }, LAND);
+      window.__timelines["crash-zoom-in"] = tl;
+    </script>
+  </div>
+</template>

package/dist/assets/design/skills/music-to-video/references/motion-primitives/datamosh-smear/index.html ADDED Viewed

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

@@ -0,0 +1,131 @@
+<template id="datamosh-smear-template">
+  <div data-composition-id="datamosh-smear" data-width="1920" data-height="1080" data-duration="2">
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-cyan: #2afff0;
+        --hg-magenta: #ff2a4a;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      .smear-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .smear-hero {
+        position: relative;
+        font-weight: 900;
+        font-size: 320px;
+        letter-spacing: -0.05em;
+        line-height: 0.95;
+        white-space: nowrap;
+      }
+      .smear-layer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        mix-blend-mode: screen;
+        will-change: transform, opacity, filter;
+      }
+      .smear-layer.l1 {
+        color: #ff2a4a;
+      }
+      .smear-layer.l2 {
+        color: #2afff0;
+      }
+      .smear-layer.l3 {
+        color: #b56dff;
+      }
+      .smear-layer.l4 {
+        color: #ffd166;
+      }
+      .smear-layer.l5 {
+        color: #f5f5fa;
+      }
+      .spacer {
+        color: transparent;
+      }
+      .scan-noise {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, 0) 0px,
+            rgba(255, 255, 255, 0) 2px,
+            rgba(255, 255, 255, 0.07) 3px
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0) 0px,
+            rgba(0, 0, 0, 0) 4px,
+            rgba(0, 0, 0, 0.15) 5px
+          );
+        opacity: 0;
+        will-change: opacity;
+        pointer-events: none;
+        mix-blend-mode: overlay;
+      }
+    </style>
+    <div class="smear-stage">
+      <div class="smear-hero">
+        <span class="spacer">SMEAR</span>
+        <span class="smear-layer l1">SMEAR</span>
+        <span class="smear-layer l2">SMEAR</span>
+        <span class="smear-layer l3">SMEAR</span>
+        <span class="smear-layer l4">SMEAR</span>
+        <span class="smear-layer l5">SMEAR</span>
+      </div>
+    </div>
+    <div class="scan-noise"></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // All layers start far right, stagger-lag in, then settle near center
+      const layers = [
+        ".smear-layer.l1",
+        ".smear-layer.l2",
+        ".smear-layer.l3",
+        ".smear-layer.l4",
+        ".smear-layer.l5",
+      ];
+      layers.forEach((sel, i) => {
+        tl.fromTo(
+          sel,
+          { x: 360, opacity: 0, filter: "blur(20px)" },
+          { x: 0, opacity: 0.85, filter: "blur(0px)", duration: 0.7, ease: "expo.out" },
+          0.2 + i * 0.08,
+        );
+      });
+      // Final settle: pull layers into proper offset
+      const finalX = [-6, -2, 0, 2, 4];
+      layers.forEach((sel, i) => {
+        tl.to(sel, { x: finalX[i], duration: 0.4, ease: "power2.out" }, 1.1);
+      });
+      // Scan noise pulses
+      tl.fromTo(
+        ".scan-noise",
+        { opacity: 0 },
+        { opacity: 1, duration: 0.06, ease: "steps(1)" },
+        0.2,
+      );
+      tl.to(".scan-noise", { opacity: 0.25, duration: 0.8, ease: "power2.out" }, 0.6);
+      window.__timelines["datamosh-smear"] = tl;
+    </script>
+  </div>
+</template>

package/dist/assets/design/skills/music-to-video/references/motion-primitives/directional-fill/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>directional_fill</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="directional-fill"
+        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/directional-fill/scene.html ADDED Viewed

@@ -0,0 +1,103 @@
+<template id="directional-fill-template">
+  <div
+    data-composition-id="directional-fill"
+    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;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 36px;
+      }
+      .bar {
+        position: relative;
+        width: 1040px;
+        height: 188px;
+        border: 3px solid var(--hg-dim);
+        border-radius: 12px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        padding: 0 56px;
+      }
+      .fill {
+        position: absolute;
+        inset: 0;
+        transform: scaleX(0);
+        will-change: transform;
+      }
+      .fill.a {
+        background: var(--hg-violet);
+        transform-origin: left center;
+      }
+      .fill.b {
+        background: var(--hg-violet-2);
+        transform-origin: right center;
+      }
+      .fill.c {
+        background: #2afff0;
+        transform-origin: left center;
+      }
+      .label {
+        position: relative;
+        z-index: 1;
+        font-weight: 900;
+        font-size: 96px;
+        letter-spacing: -0.03em;
+        line-height: 1;
+        color: var(--hg-fg);
+        will-change: color;
+      }
+    </style>
+    <div class="stage">
+      <div class="bar">
+        <div class="fill a"></div>
+        <span class="label" id="l1">READY</span>
+      </div>
+      <div class="bar">
+        <div class="fill b"></div>
+        <span class="label" id="l2">SET</span>
+      </div>
+      <div class="bar">
+        <div class="fill c"></div>
+        <span class="label" id="l3">FILL</span>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // Bar 1 — sweeps left -> right, landing on the beat at ~0.55s.
+      tl.to(".fill.a", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.2);
+      tl.set("#l1", { color: "var(--hg-bg)" }, 0.55);
+      // Bar 2 — sweeps right -> left, landing at ~0.85s.
+      tl.to(".fill.b", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.5);
+      tl.set("#l2", { color: "var(--hg-bg)" }, 0.85);
+      // Bar 3 — sweeps left -> right, landing at ~1.15s.
+      tl.to(".fill.c", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.8);
+      tl.set("#l3", { color: "var(--hg-bg)" }, 1.15);
+      window.__timelines["directional-fill"] = tl;
+    </script>
+  </div>
+</template>

package/dist/assets/design/skills/music-to-video/references/motion-primitives/dolly-zoom/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>09 · dolly_zoom</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="dolly-zoom"
+        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/dolly-zoom/scene.html ADDED Viewed

@@ -0,0 +1,102 @@
+<template id="dolly-zoom-template">
+  <div data-composition-id="dolly-zoom" 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;
+      }
+      .layers {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+      .bg-far,
+      .bg-mid,
+      .bg-near {
+        position: absolute;
+        inset: 0;
+        will-change: transform, filter;
+      }
+      .bg-far {
+        background:
+          radial-gradient(2px 2px at 20% 30%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(2px 2px at 70% 80%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(1px 1px at 45% 60%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(1px 1px at 85% 25%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(2px 2px at 10% 75%, var(--hg-dim) 50%, transparent 51%),
+          radial-gradient(1px 1px at 60% 15%, var(--hg-dim) 50%, transparent 51%);
+        background-size: 400px 400px;
+        filter: blur(2px);
+      }
+      .bg-mid {
+        background:
+          linear-gradient(90deg, transparent 49.7%, rgba(168, 85, 247, 0.25) 50%, transparent 50.3%)
+            0 0 / 200px 200px,
+          linear-gradient(
+              180deg,
+              transparent 49.7%,
+              rgba(168, 85, 247, 0.15) 50%,
+              transparent 50.3%
+            )
+            0 0 / 200px 200px;
+      }
+      .bg-near {
+        background:
+          radial-gradient(circle at 15% 50%, rgba(168, 85, 247, 0.4) 0%, transparent 25%),
+          radial-gradient(circle at 85% 50%, rgba(124, 58, 237, 0.4) 0%, transparent 25%);
+      }
+      .subject {
+        position: relative;
+        z-index: 5;
+        font-family: "Playfair Display", serif;
+        font-style: italic;
+        font-weight: 900;
+        font-size: 180px;
+        letter-spacing: -0.02em;
+      }
+    </style>
+    <div class="layers">
+      <div class="bg-far"></div>
+      <div class="bg-mid"></div>
+      <div class="bg-near"></div>
+    </div>
+    <div class="stage"><div class="subject">subject.</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      tl.fromTo(
+        ".bg-far",
+        { scale: 1, filter: "blur(2px)" },
+        { scale: 1.6, filter: "blur(4px)", duration: 1.8, ease: "power2.inOut" },
+        0.1,
+      );
+      tl.fromTo(".bg-mid", { scale: 1 }, { scale: 1.4, duration: 1.8, ease: "power2.inOut" }, 0.1);
+      tl.fromTo(".bg-near", { scale: 1 }, { scale: 1.2, duration: 1.8, ease: "power2.inOut" }, 0.1);
+      tl.fromTo(
+        ".subject",
+        { opacity: 0, scale: 1.1 },
+        { opacity: 1, scale: 1, duration: 0.6, ease: "power3.out" },
+        0.15,
+      );
+      tl.to(".layers", { skewY: -0.5, duration: 1.8, ease: "power2.inOut" }, 0.1);
+      window.__timelines["dolly-zoom"] = tl;
+    </script>
+  </div>
+</template>

package/dist/assets/design/skills/music-to-video/references/motion-primitives/electric-arc/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>11 · electric_arc</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="electric-arc"
+        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>