docs: make terminal animation visibly loop

Author: ycode-lin

docs/assets/site.css

@@ -444,6 +444,7 @@ h3 {
 .typed-terminal {
   min-height: 300px;
   white-space: pre-wrap;
+  transition: opacity 220ms ease, transform 220ms ease;
 }
 
 .typed-terminal .line {
@@ -471,6 +472,11 @@ h3 {
   animation: blink 1s steps(1) infinite;
 }
 
+.typed-terminal.is-switching {
+  opacity: 0.32;
+  transform: translateY(6px);
+}
+
 .telemetry {
   padding: 18px;
   border-radius: 22px;

docs/assets/site.js

@@ -49,62 +49,90 @@ function delay(ms) {
   return new Promise((resolve) => window.setTimeout(resolve, ms));
 }
 
-function renderStaticTerminal() {
+function renderSessionMarkup(session) {
+  return session
+    .map((frame) => `<span class="line ${frame.className}">${frame.text}</span>`)
+    .join("");
+}
+
+function renderStaticTerminal(sessionIndex = 0) {
   if (!typedTerminal) return;
+  typedTerminal.innerHTML = `${renderSessionMarkup(sessions[sessionIndex])}<span class="cursor" aria-hidden="true"></span>`;
+}
 
-  const lines = sessions.flatMap((session, index) => {
-    const sessionLines = session.map((frame) => `<span class="line ${frame.className}">${frame.text}</span>`);
-    if (index < sessions.length - 1) {
-      sessionLines.push('<span class="line comment">---</span>');
-    }
-    return sessionLines;
-  });
+async function playReducedMotionLoop() {
+  if (!typedTerminal) return;
+
+  let index = 0;
+  renderStaticTerminal(index);
+
+  while (true) {
+    await delay(2400);
+    typedTerminal.classList.add("is-switching");
+    await delay(220);
+    index = (index + 1) % sessions.length;
+    renderStaticTerminal(index);
+    typedTerminal.classList.remove("is-switching");
+  }
+}
 
-  typedTerminal.innerHTML = `${lines.join("")}<span class="cursor" aria-hidden="true"></span>`;
+async function typeLine(line, text) {
+  for (const character of text) {
+    line.textContent += character;
+    await delay(16);
+  }
+}
+
+async function eraseLine(line) {
+  while (line.textContent.length > 0) {
+    line.textContent = line.textContent.slice(0, -1);
+    await delay(8);
+  }
 }
 
 async function playTerminalLoop() {
   if (!typedTerminal) return;
   if (prefersReducedMotion) {
-    renderStaticTerminal();
+    await playReducedMotionLoop();
     return;
   }
 
+  const lines = [];
+
   while (true) {
     typedTerminal.innerHTML = "";
+    lines.length = 0;
 
-    for (let s = 0; s < sessions.length; s += 1) {
-      const session = sessions[s];
-
+    for (const session of sessions) {
       for (const frame of session) {
         const line = document.createElement("span");
         line.className = `line ${frame.className}`;
         typedTerminal.appendChild(line);
+        lines.push(line);
 
-        for (const character of frame.text) {
-          line.textContent += character;
-          await delay(16);
-        }
-
-        await delay(180);
+        await typeLine(line, frame.text);
+        await delay(120);
       }
 
-      if (s < sessions.length - 1) {
-        const spacer = document.createElement("span");
-        spacer.className = "line comment";
-        spacer.textContent = "---";
-        typedTerminal.appendChild(spacer);
-      }
+      const cursor = document.createElement("span");
+      cursor.className = "cursor";
+      cursor.setAttribute("aria-hidden", "true");
+      typedTerminal.appendChild(cursor);
 
-      await delay(520);
-    }
+      await delay(900);
+      cursor.remove();
 
-    const cursor = document.createElement("span");
-    cursor.className = "cursor";
-    cursor.setAttribute("aria-hidden", "true");
-    typedTerminal.appendChild(cursor);
+      for (let i = lines.length - 1; i >= 0; i -= 1) {
+        await eraseLine(lines[i]);
+        lines[i].remove();
+        lines.pop();
+        await delay(40);
+      }
 
-    await delay(1800);
+      typedTerminal.classList.add("is-switching");
+      await delay(140);
+      typedTerminal.classList.remove("is-switching");
+    }
   }
 }