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,249 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Basic</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #ececec;
+        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: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.25),
+          0 10px 30px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #ececec;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        gap: 0;
+        flex-shrink: 0;
+        border-bottom: 1px solid #d0d0d0;
+        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: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #ffffff;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #000000;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #000000;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #000000;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-basic"
+      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">Last login: Mon Jun 2 09:14:22 on ttys001</span>
+            <span class="output-line">total 48</span>
+            <span class="output-line bold">drwxr-xr-x 8 user staff 256 Jun 2 09:10 .</span>
+            <span class="output-line">drwxr-xr-x 42 user staff 1344 Jun 1 18:22 ..</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 872 May 30 14:05 README.md</span>
+            <span class="output-line bold">drwxr-xr-x 5 user staff 160 Jun 2 09:10 dist</span>
+            <span class="output-line bold"
+              >drwxr-xr-x 12 user staff 384 Jun 2 09:10 node_modules</span
+            >
+            <span class="output-line">-rw-r--r-- 1 user staff 1204 Jun 2 09:08 package.json</span>
+            <span class="output-line bold">drwxr-xr-x 6 user staff 192 Jun 2 09:10 src</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 348 May 29 11:42 tsconfig.json</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </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 = "ls -la";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      // Phase 1 (0–0.5s): hold on empty prompt
+      tl.set(typedEl, { text: "" }, 0);
+
+      // Phase 2 (0.5–2s): type command char by char
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      // Phase 3 (2.2s): hide cursor, show first output line (login message)
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      // Phase 4 (2.5s): clear command, show ls output line by line
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return; // already shown
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.08);
+      });
+
+      // Phase 5 (4s): new prompt with blinking cursor
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      // Phase 6 (4.2–10s): blink cursor 3 times then stop
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      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.6);
+
+      window.__timelines["code-snippet-apple-terminal-basic"] = tl;
+    </script>
+  </body>
+</html>