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,334 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1280, height=720" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #a-roll,
+      #fg-overlay {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* Foreground matte sits above the captions so the person & mic occlude
+         the text — classic cinematic lower-third layering. */
+      #fg-overlay {
+        z-index: 3;
+        pointer-events: none;
+      }
+
+      /*
+        Caption stage — perspective container so the text plane lies on the
+        acoustic-foam wall in the upper-right of the frame. Small jitter is
+        applied to the stage by GSAP to fake handheld motion tracking.
+      */
+      #stage {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1280px;
+        height: 720px;
+        perspective: 1400px;
+        perspective-origin: 30% 40%;
+        pointer-events: none;
+        z-index: 2;
+        will-change: transform;
+      }
+
+      .wall-plane {
+        position: absolute;
+        /* Right-aligned cluster, but widened and pushed slightly left
+           so emphasis words (EVERYTHING, SHARP AGAIN) reach past the
+           subject's silhouette. Short words still hug the wall. */
+        top: 90px;
+        right: 30px;
+        width: 720px;
+        height: 520px;
+        transform-style: preserve-3d;
+        transform: rotateY(-13deg) rotateX(1deg);
+        transform-origin: right center;
+        padding: 24px 32px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end;
+        text-align: right;
+        gap: 14px;
+      }
+
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.05;
+        opacity: 0;
+        /* The "embed in scene" move: overlay blend picks up the wall's
+           luminance and color so the text feels lit BY the scene. */
+        mix-blend-mode: screen;
+        color: #fff4dc;
+        text-shadow:
+          0 0 12px rgba(255, 210, 150, 0.45),
+          0 2px 5px rgba(0, 0, 0, 0.7);
+        filter: brightness(1.1) contrast(1.05);
+        will-change: transform, opacity, filter;
+      }
+
+      .cap .w {
+        display: inline-block;
+        opacity: 0;
+        will-change: opacity, transform, filter;
+      }
+
+      /*
+        Unified cinematic typography — no mode switch between soft & sharp.
+        Elegant serif-inflected sans, italic for the dreamy first half,
+        upright for the second half. One look, one feeling, progressing.
+      */
+      .cap-1 {
+        font-size: 78px;
+        font-weight: 600;
+        font-style: italic;
+        letter-spacing: -0.01em;
+      }
+      .cap-2 {
+        font-size: 66px;
+        font-weight: 500;
+        font-style: italic;
+        letter-spacing: -0.005em;
+        padding-right: 44px; /* hanging indent on right for right-aligned flow */
+      }
+      .cap-3 {
+        font-size: 72px;
+        font-weight: 700;
+        font-style: normal;
+        letter-spacing: -0.015em;
+      }
+      .cap-4 {
+        font-size: 90px;
+        font-weight: 900;
+        font-style: normal;
+        letter-spacing: -0.03em;
+        text-transform: uppercase;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="8.04"
+      data-width="1280"
+      data-height="720"
+    >
+      <!-- Layer 0: background plate (full video) -->
+      <video
+        id="a-roll"
+        class="clip"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="8.04"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <!-- Layer 2: caption stage (between background and foreground matte) -->
+      <div id="stage">
+        <div class="wall-plane">
+          <div id="cg-0" class="cap cap-1">
+            <span class="w" data-i="0">Some</span>
+            <span class="w" data-i="1">memories</span>
+            <span class="w" data-i="2">feel</span>
+            <span class="w" data-i="3">soft</span>
+          </div>
+          <div id="cg-1" class="cap cap-2">
+            <span class="w" data-i="0">like</span>
+            <span class="w" data-i="1">old</span>
+            <span class="w" data-i="2">film</span>
+          </div>
+          <div id="cg-2" class="cap cap-3">
+            <span class="w" data-i="0">but</span>
+            <span class="w" data-i="1">suddenly</span>
+          </div>
+          <div id="cg-3" class="cap cap-4">
+            <span class="w" data-i="0">everything</span>
+            <span class="w" data-i="1">is</span>
+            <span class="w" data-i="2">sharp</span>
+            <span class="w" data-i="3">again</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Foreground occlusion (person + mic) is applied in post via ffmpeg
+           overlay. Browser-side alpha webm is unreliable across encoders. -->
+
+      <!-- Audio -->
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="8.04"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = 8.04;
+
+      /* ─────────────────────────────────────────────────────────────────
+         Word-level transcript — ElevenLabs timestamps.
+         ───────────────────────────────────────────────────────────────── */
+      const GROUPS = [
+        {
+          id: "cg-0",
+          words: [
+            { text: "Some", start: 0.24, end: 0.44 },
+            { text: "memories", start: 0.48, end: 0.82 },
+            { text: "feel", start: 0.9, end: 1.14 },
+            { text: "soft", start: 1.2, end: 1.64 },
+          ],
+          in: 0.2,
+          out: 4.85,
+          tone: "soft",
+        },
+        {
+          id: "cg-1",
+          words: [
+            { text: "like", start: 2.66, end: 2.78 },
+            { text: "old", start: 2.86, end: 3.02 },
+            { text: "film", start: 3.14, end: 3.46 },
+          ],
+          in: 2.55,
+          out: 4.85,
+          tone: "soft",
+        },
+        {
+          id: "cg-2",
+          words: [
+            { text: "but", start: 5.02, end: 5.16 },
+            { text: "suddenly", start: 5.22, end: 5.76 },
+          ],
+          in: 4.9,
+          out: 8.04,
+          tone: "present",
+        },
+        {
+          id: "cg-3",
+          words: [
+            { text: "everything", start: 6.8, end: 7.14 },
+            { text: "is", start: 7.16, end: 7.28 },
+            { text: "sharp", start: 7.3, end: 7.52 },
+            { text: "again", start: 7.56, end: 7.92 },
+          ],
+          in: 6.7,
+          out: 8.04,
+          tone: "present",
+        },
+      ];
+
+      /* ─────────────────────────────────────────────────────────────────
+         Each caption group: cinematic word-by-word reveal. No flashes, no
+         grain — purely text animation. Soft groups drift up gently, later
+         groups resolve firmly into place to match the sentence turn.
+         ───────────────────────────────────────────────────────────────── */
+      GROUPS.forEach(function (g) {
+        var sel = "#" + g.id;
+        var words = g.words.map(function (_, i) {
+          return sel + " .w[data-i='" + i + "']";
+        });
+
+        var isSoft = g.tone === "soft";
+
+        /* Container stays fully visible — each word animates its own fade.
+           This avoids a double-fade (container × word) that produced a
+           non-linear pop in the first ~100ms of the first caption. */
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+
+        /* Per-word reveal — opacity + translate only. No letter-spacing
+           or filter:blur here: both can perturb inline-block metrics
+           mid-animation and cause the cap line-box to reflow, which
+           makes words like "Some" visibly shift between rows when a
+           sibling word enters. transform-only = no reflow. */
+        g.words.forEach(function (w, i) {
+          if (isSoft) {
+            tl.fromTo(
+              words[i],
+              { opacity: 0, y: 8 },
+              {
+                opacity: 1,
+                y: 0,
+                duration: 0.45,
+                ease: "power2.out",
+                overwrite: "auto",
+              },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              words[i],
+              { opacity: 0, y: 6, scale: 1.04 },
+              {
+                opacity: 1,
+                y: 0,
+                scale: 1.0,
+                duration: 0.22,
+                ease: "power3.out",
+                overwrite: "auto",
+                transformOrigin: "50% 50%",
+              },
+              w.start,
+            );
+          }
+        });
+
+        /* Group exit — soft groups linger and fade as the sentence turns,
+           present groups hold to the end. Clean fades, no trickery. */
+        if (g.out < DUR) {
+          tl.to(
+            sel,
+            { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
+            g.out - 0.5,
+          );
+        }
+        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
+      });
+
+      /* Self-lint */
+      GROUPS.forEach(function (g) {
+        var el = document.getElementById(g.id);
+        if (!el) return;
+        tl.seek(g.out + 0.01);
+        var cs = window.getComputedStyle(el);
+        if (cs.opacity !== "0" && cs.visibility !== "hidden") {
+          console.warn("[caption-lint] " + g.id + " visible at t=" + (g.out + 0.01).toFixed(2));
+        }
+      });
+      tl.seek(0);
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>