npm - constellai - Versions diffs - 0.3.0 - Mend

constellai 0.3.0

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 (1993) hide show

package/skills/design/eight-bit-orbital-motion-blueprint/assets/template.html ADDED Viewed

@@ -0,0 +1,506 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --bg-deep: #07133e;
+        --grid-cyan: #4fd2f0;
+        --ink: #0f1f4b;
+        --arcade-yellow: #ffe75c;
+        --arcade-pink: #f4b8d7;
+        --arcade-cyan: #5ad9f8;
+      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #030a24;
+        font-family: "Chakra Petch", sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+      }
+      .scene.live {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      .frame {
+        position: absolute;
+        inset: 22px;
+        border: 2px solid #74d7ff20;
+        z-index: 20;
+        pointer-events: none;
+      }
+      .scanlines {
+        position: absolute;
+        inset: 0;
+        background: repeating-linear-gradient(
+          180deg,
+          transparent 0 2px,
+          #ffffff08 2px 4px
+        );
+        mix-blend-mode: soft-light;
+        z-index: 55;
+        pointer-events: none;
+      }
+      .noise {
+        position: absolute;
+        inset: 0;
+        z-index: 56;
+        opacity: 0.15;
+        pointer-events: none;
+        background-image: radial-gradient(#ffffff17 0.6px, transparent 0.6px);
+        background-size: 3px 3px;
+      }
+      .cursor-glow {
+        position: absolute;
+        width: 420px;
+        height: 420px;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        background: radial-gradient(circle, #5ad9f866 0%, #5ad9f81a 48%, transparent 78%);
+        z-index: 40;
+        pointer-events: none;
+      }
+      .dots {
+        position: absolute;
+        top: 428px;
+        right: 56px;
+        z-index: 70;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .dots i {
+        width: 11px;
+        height: 11px;
+        border: 2px solid #79e0ff;
+        opacity: 0.35;
+      }
+      .dots i.active {
+        background: #79e0ff;
+        opacity: 1;
+      }
+      .pager {
+        position: absolute;
+        left: 50%;
+        bottom: 28px;
+        transform: translateX(-50%);
+        padding: 6px 18px;
+        border: 2px solid #1d3a74;
+        background: #08183fbb;
+        color: #7ee7ff;
+        font-family: "Press Start 2P", monospace;
+        font-size: 14px;
+        letter-spacing: 0.12em;
+        z-index: 70;
+      }
+      .s1 {
+        background: radial-gradient(circle at 50% 32%, #112a73 0%, #07133e 44%, #030a24 100%);
+      }
+      .s1-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(#3a86c022 1px, transparent 1px),
+          linear-gradient(90deg, #3a86c022 1px, transparent 1px);
+        background-size: 45px 45px;
+      }
+      .star {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: #e8faff;
+        box-shadow: 0 0 10px #9be8ff;
+      }
+      .s1-wrap {
+        position: absolute;
+        inset: 150px 0 0;
+        text-align: center;
+        color: #dff9ff;
+      }
+      .micro {
+        font-family: "Press Start 2P", monospace;
+        font-size: 14px;
+        letter-spacing: 0.25em;
+        color: #c6eeff;
+        opacity: 0.9;
+      }
+      .hero {
+        margin-top: 52px;
+        font-family: "Press Start 2P", monospace;
+        font-size: 108px;
+        line-height: 1.06;
+        color: #5dd8ff;
+        text-shadow: 6px 6px 0 #ffe75c;
+      }
+      .sub {
+        margin: 46px auto 0;
+        max-width: 860px;
+        font-size: 36px;
+        line-height: 1.4;
+        color: #d9ecff;
+        font-weight: 500;
+      }
+      .pill-row {
+        margin-top: 44px;
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+      }
+      .pill {
+        border: 2px solid #ffed87;
+        color: #ffed87;
+        padding: 10px 18px;
+        font-family: "Press Start 2P", monospace;
+        font-size: 13px;
+      }
+      .s2 {
+        background:
+          radial-gradient(circle at 15% 10%, #ffd8ec 0%, #f5bad8 38%, #e9a8cc 100%);
+      }
+      .s2-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(#1f3e7140 1px, transparent 1px),
+          linear-gradient(90deg, #1f3e7140 1px, transparent 1px);
+        background-size: 36px 36px;
+      }
+      .s2-body {
+        position: absolute;
+        inset: 130px 0 0;
+        text-align: center;
+        color: #132b5f;
+      }
+      .title {
+        margin-top: 26px;
+        font-size: 92px;
+        font-weight: 700;
+      }
+      .timeline {
+        position: relative;
+        width: 980px;
+        margin: 66px auto 0;
+        height: 540px;
+      }
+      .line {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        height: 100%;
+        width: 4px;
+        margin-left: -2px;
+        background: repeating-linear-gradient(180deg, #173a73 0 16px, transparent 16px 28px);
+      }
+      .node {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 26px;
+        height: 26px;
+        background: var(--arcade-yellow);
+        border: 4px solid #173a73;
+      }
+      .node.cyan { background: var(--arcade-cyan); }
+      .item {
+        position: absolute;
+        width: 380px;
+        text-align: left;
+      }
+      .item.right { left: 548px; }
+      .item.left { left: 54px; text-align: right; }
+      .tag {
+        display: inline-block;
+        padding: 5px 8px;
+        border: 2px solid #173a73;
+        font-family: "Press Start 2P", monospace;
+        font-size: 11px;
+      }
+      .item h4 {
+        margin-top: 12px;
+        font-size: 36px;
+        line-height: 1.1;
+      }
+      .item p {
+        margin-top: 10px;
+        font-size: 22px;
+        line-height: 1.3;
+        opacity: 0.8;
+      }
+      .s3 {
+        background: radial-gradient(circle at 35% 0%, #f5f4ff 0%, #eeedfd 50%, #e8e8fb 100%);
+      }
+      .s3-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(#2a447c1e 1px, transparent 1px),
+          linear-gradient(90deg, #2a447c1e 1px, transparent 1px);
+        background-size: 38px 38px;
+      }
+      .s3-body {
+        position: absolute;
+        inset: 180px 240px 120px;
+        color: #112962;
+      }
+      .s3-title {
+        text-align: center;
+        margin-top: 18px;
+        font-size: 82px;
+        font-weight: 700;
+      }
+      .bars {
+        margin-top: 70px;
+        display: grid;
+        gap: 26px;
+      }
+      .bar-row {
+        display: grid;
+        grid-template-columns: 160px 1fr 72px;
+        align-items: center;
+        gap: 22px;
+        font-size: 28px;
+        font-weight: 600;
+      }
+      .track {
+        height: 36px;
+        background: #cfd5eb;
+        position: relative;
+      }
+      .fill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 36px;
+        width: 0;
+        background: #173a73;
+        border-right: 4px solid var(--arcade-yellow);
+      }
+      .fill.cyan {
+        background: var(--arcade-cyan);
+      }
+      .fill.pink {
+        background: var(--arcade-pink);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="8.7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="cursor-glow" id="glow"></div>
+      <div class="frame"></div>
+      <div class="scanlines"></div>
+      <div class="noise"></div>
+      <div class="dots" id="dots"><i class="active"></i><i></i><i></i></div>
+      <div class="pager" id="pager">01 / 03</div>
+      <section class="scene s1 live" id="s1">
+        <div class="s1-grid"></div>
+        <div id="stars"></div>
+        <div class="s1-wrap">
+          <div class="micro">PIXEL PERFECT PRESENTATION SYSTEM</div>
+          <div class="hero" id="s1-title">8-BIT<br />ORBIT</div>
+          <div class="sub">A retro-futuristic deck engine for bold storytellers. Built for arcades, engineered for boardrooms.</div>
+          <div class="pill-row">
+            <div class="pill">16 SLIDES</div>
+            <div class="pill">C88 NATIVE</div>
+            <div class="pill">ZERO DEPENDENCIES</div>
+          </div>
+        </div>
+      </section>
+      <section class="scene s2" id="s2">
+        <div class="s2-grid"></div>
+        <div class="s2-body">
+          <div class="micro">CHRONOLOGY</div>
+          <div class="title">Development Roadmap</div>
+          <div class="timeline">
+            <div class="line"></div>
+            <div class="node" style="top: 48px"></div>
+            <div class="item left" style="top: 14px">
+              <div class="tag">Q1. 1986</div>
+              <h4>Concept &amp; Architecture</h4>
+              <p>Wireframes, palette selection, and core grid system established.</p>
+            </div>
+            <div class="node" style="top: 178px"></div>
+            <div class="item right" style="top: 148px">
+              <div class="tag">Q2. 1989</div>
+              <h4>Asset Generation</h4>
+              <p>Pixel components, iconography, and atmospheric effects coded.</p>
+            </div>
+            <div class="node cyan" style="top: 316px"></div>
+            <div class="item left" style="top: 284px">
+              <div class="tag">Q3. 1990</div>
+              <h4>Data Integration</h4>
+              <p>Charting engine, animated counters, and dynamic state binding.</p>
+            </div>
+            <div class="node cyan" style="top: 446px"></div>
+            <div class="item right" style="top: 414px">
+              <div class="tag">Q4. 2000</div>
+              <h4>Global Launch</h4>
+              <p>Public release with full documentation and community support.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="scene s3" id="s3">
+        <div class="s3-grid"></div>
+        <div class="s3-body">
+          <div class="micro" style="text-align: center">SYSTEM LOAD</div>
+          <div class="s3-title">Resource Allocation</div>
+          <div class="bars">
+            <div class="bar-row"><span>Compute</span><div class="track"><div class="fill" data-w="88"></div></div><span>88%</span></div>
+            <div class="bar-row"><span>Storage</span><div class="track"><div class="fill cyan" data-w="72"></div></div><span>72%</span></div>
+            <div class="bar-row"><span>Network</span><div class="track"><div class="fill pink" data-w="85"></div></div><span>85%</span></div>
+            <div class="bar-row"><span>Memory</span><div class="track"><div class="fill" data-w="61"></div></div><span>61%</span></div>
+            <div class="bar-row"><span>Graphics</span><div class="track"><div class="fill cyan" data-w="44"></div></div><span>44%</span></div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var scenes = ["s1", "s2", "s3"];
+      var dots = Array.from(document.querySelectorAll("#dots i"));
+      var pager = document.getElementById("pager");
+      function setScene(index) {
+        scenes.forEach(function (id, i) {
+          document.getElementById(id).classList.toggle("live", i === index);
+          dots[i].classList.toggle("active", i === index);
+        });
+        pager.textContent = "0" + (index + 1) + " / 03";
+      }
+      var starsRoot = document.getElementById("stars");
+      function mulberry32(seed) {
+        return function () {
+          var t = (seed += 0x6d2b79f5);
+          t = Math.imul(t ^ (t >>> 15), t | 1);
+          t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+      var rand = mulberry32(19860905);
+      for (var i = 0; i < 90; i++) {
+        var star = document.createElement("i");
+        star.className = "star";
+        star.style.left = Math.round(rand() * 1920) + "px";
+        star.style.top = Math.round(rand() * 1080) + "px";
+        star.style.opacity = (rand() * 0.9 + 0.1).toFixed(2);
+        star.style.transform = "scale(" + (rand() * 1.8 + 0.3).toFixed(2) + ")";
+        starsRoot.appendChild(star);
+      }
+      gsap.to(".star", {
+        opacity: function (i) { return 0.25 + (i % 5) * 0.15; },
+        duration: function (i) { return 0.55 + (i % 7) * 0.12; },
+        repeat: 8,
+        yoyo: true,
+        stagger: { each: 0.02 }
+      });
+      var T12 = 2.8;
+      var T23 = 5.6;
+      var tl = gsap.timeline({ paused: true });
+      tl.from("#s1 .micro, #s1 .sub, #s1 .pill", {
+        opacity: 0,
+        y: 24,
+        stagger: 0.06,
+        duration: 0.5,
+        ease: "power3.out"
+      }, 0);
+      tl.from("#s1-title", {
+        opacity: 0,
+        scale: 0.75,
+        y: 60,
+        duration: 0.75,
+        ease: "back.out(1.4)"
+      }, 0.16);
+      tl.to("#s1-title", { textShadow: "10px 10px 0 #ffe75c", duration: 0.24, yoyo: true, repeat: 1 }, 1.4);
+      tl.to("#s1", { opacity: 0, duration: 0.34, ease: "power2.inOut" }, T12 - 0.24);
+      tl.add(function () { setScene(1); }, T12 - 0.06);
+      tl.from("#s2 .micro, #s2 .title", { opacity: 0, y: 42, duration: 0.46, stagger: 0.06, ease: "power3.out" }, T12 + 0.02);
+      tl.from("#s2 .line", { scaleY: 0, transformOrigin: "50% 0%", duration: 0.65, ease: "power3.out" }, T12 + 0.18);
+      tl.from("#s2 .node", { scale: 0, rotation: 90, opacity: 0, stagger: 0.09, duration: 0.3, ease: "back.out(1.9)" }, T12 + 0.35);
+      tl.from("#s2 .item", { x: -34, opacity: 0, stagger: 0.08, duration: 0.4, ease: "power2.out" }, T12 + 0.45);
+      tl.to("#s2", { opacity: 0, duration: 0.34, ease: "power2.inOut" }, T23 - 0.24);
+      tl.add(function () { setScene(2); }, T23 - 0.06);
+      tl.from("#s3 .micro, #s3 .s3-title", { opacity: 0, y: 36, duration: 0.5, stagger: 0.08, ease: "power3.out" }, T23 + 0.02);
+      tl.from("#s3 .bar-row", { x: -32, opacity: 0, stagger: 0.06, duration: 0.35, ease: "power2.out" }, T23 + 0.26);
+      tl.to("#s3 .fill", {
+        width: function (_, el) { return el.getAttribute("data-w") + "%"; },
+        duration: 0.85,
+        stagger: 0.08,
+        ease: "expo.out"
+      }, T23 + 0.36);
+      tl.to("#pager", { y: -4, duration: 0.2, yoyo: true, repeat: 1 }, T23 + 1.4);
+      window.__timelines.main = tl;
+      setScene(0);
+      var root = document.getElementById("root");
+      var glow = document.getElementById("glow");
+      root.addEventListener("mousemove", function (e) {
+        var r = root.getBoundingClientRect();
+        var x = e.clientX - r.left;
+        var y = e.clientY - r.top;
+        gsap.to(glow, { x: x, y: y, duration: 0.3, ease: "power2.out" });
+        gsap.to(".scene.live", {
+          backgroundPositionX: (x - 960) * -0.02,
+          backgroundPositionY: (y - 540) * -0.02,
+          duration: 0.45,
+          ease: "power2.out"
+        });
+      });
+      function jumpTo(index) {
+        if (index === 0) tl.pause(0);
+        if (index === 1) tl.pause(T12 + 0.6);
+        if (index === 2) tl.pause(T23 + 0.8);
+        setScene(index);
+      }
+      window.addEventListener("keydown", function (e) {
+        if (e.key === "1") jumpTo(0);
+        if (e.key === "2") jumpTo(1);
+        if (e.key === "3") jumpTo(2);
+        if (e.key.toLowerCase() === "r") {
+          tl.restart();
+          setScene(0);
+        }
+      });
+    </script>
+  </body>
+</html>

package/skills/design/eight-bit-orbital-motion-blueprint/example.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Hyperframes Video Template Example</title>
+  <style>
+    html, body { margin: 0; height: 100%; background: #061236; color: #d9f4ff; font-family: "Chakra Petch", system-ui, sans-serif; }
+    .top {
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 14px;
+      border-bottom: 1px solid #29447a;
+      background: #0b1b49;
+      letter-spacing: 0.06em;
+      font-size: 12px;
+    }
+    .top b { font-size: 12px; color: #8ce9ff; }
+    .top span { color: #b8d1ff; opacity: 0.9; }
+    .stage { height: calc(100% - 49px); display: grid; grid-template-columns: 1.2fr 1fr; }
+    .pane { border-right: 1px solid #203765; }
+    .pane:last-child { border-right: 0; }
+    iframe { width: 100%; height: 100%; border: 0; background: #030a24; }
+    video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
+  </style>
+</head>
+<body>
+  <div class="top">
+    <b>HYPERFRAMES VIDEO TEMPLATE · DEFAULT SHOWCASE</b>
+    <span>Left: editable HTML template · Right: rendered MP4 sample</span>
+  </div>
+  <div class="stage">
+    <div class="pane">
+      <iframe src="./assets/template.html" title="Hyperframes template HTML preview"></iframe>
+    </div>
+    <div class="pane">
+      <video controls preload="metadata" src="https://repo-assets.open-design.ai/resources/videos/skills/8-bit-orbit-video-template/default-showcase.mp4"></video>
+    </div>
+  </div>
+</body>
+</html>

package/skills/design/eight-bit-orbital-motion-blueprint-quality-gate/SKILL.md ADDED Viewed

@@ -0,0 +1,40 @@
+---
+name: eight-bit-orbital-motion-blueprint-quality-gate
+description: |
+  Use this skill when Codex needs procedural guidance derived from 8-bit-orbit-video-template/references/checklist.md. Recast from the original 8-bit-orbit-video-template/references/checklist.md material as the eight-bit-orbital-motion-blueprint-quality-gate procedure.
+---
+# Eight Bit Orbital Motion Blueprint Quality Gate
+## Role
+Use this skill when Codex needs procedural guidance derived from 8-bit-orbit-video-template/references/checklist.md. Recast from the original 8-bit-orbit-video-template/references/checklist.md material as the eight-bit-orbital-motion-blueprint-quality-gate procedure.
+## Source Trace
+- Original Markdown: `8-bit-orbit-video-template/references/checklist.md`
+- Reformulated skill name: `eight-bit-orbital-motion-blueprint-quality-gate`
+## Operating Guidance
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+## P0
+- `assets/template.html` exists and opens directly from disk.
+- `example.html` renders both the editable template preview and the default MP4 showcase.
+- Skill frontmatter uses `od.mode: template`, `od.surface: video`, and `od.type: hyperframes`.
+- Base composition includes exactly 3 scenes and each scene hold is under 3 seconds.
+- Template keeps deterministic logic (seeded randomness only, no `repeat: -1` loops).
+- Template avoids sandbox-hostile APIs (`localStorage`, `sessionStorage`, `alert`, `confirm`, `prompt`).
+## P1
+- Retro 8-bit visual language remains consistent across all three scenes.
+- Scene transitions and entrance choreography are clearly visible at normal playback speed.
+- Generated artifact remains a single self-contained HTML file.
+## P2
+- Keyboard preview controls (`1`, `2`, `3`, `r`) work in local preview.
+- Mouse glow/parallax interaction remains subtle and does not hurt readability.