chore: import upstream snapshot with attribution

2026-07-13 12:58:35 +08:00
commit 85453da49f
4031 changed files with 710987 additions and 0 deletions
@@ -0,0 +1,247 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Pro</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #141414 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(136, 255, 103, 0.08),
+          0 10px 30px rgba(0, 0, 0, 0.9);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #333333;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #bbbbbb;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #bbbbbb;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #bbbbbb;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.accent {
+        color: #88ff67;
+        font-weight: bold;
+      }
+
+      .output-line.dim {
+        color: #666666;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #88ff67;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #bbbbbb;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #88ff67;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-pro"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys008</span>
+            <span class="output-line dim">Building production bundle...</span>
+            <span class="output-line"> vite v5.3.1 building for production...</span>
+            <span class="output-line"> ✓ 142 modules transformed.</span>
+            <span class="output-line"> dist/index.html 0.48 kB</span>
+            <span class="output-line"> dist/assets/index-Cv3rN.js 284.12 kB</span>
+            <span class="output-line"> dist/assets/index-Du4mP.css 42.08 kB</span>
+            <span class="output-line accent"> ✓ built in 2.31s</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac myapp % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm run build";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac myapp % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-pro"] = tl;
+    </script>
+  </body>
+</html>
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-pro",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Pro",
+  "description": "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-pro.html",
+      "target": "compositions/code-snippet-apple-terminal-pro.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
+  }
+}