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,371 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <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: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #a-roll {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /*
+        This scene has no flat wall — subject is center with a busy
+        bookshelf backdrop. So instead of a wall-plane, we place a
+        HEADER band across the top of the frame with subtle perspective
+        (slight rotateX so it lies on the bookshelf rather than floats).
+        Screen-blend picks up the shelf's darker patches.
+      */
+      #stage {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        perspective: 2400px;
+        perspective-origin: 25% 50%;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /*
+        Left-column layout: subject fills x=550-1200, so the bookshelf
+        at x=0-550 is the clean zone. Captions right-align there, with
+        a mild perspective that makes them lie on the shelf.
+      */
+      .left-plane {
+        position: absolute;
+        /* Upper-left region. Hands gesture widely below y≈460, so we
+           keep the plane above that line. Head sits to the right of
+           x≈600, so x=40-720 here is the clean bookshelf zone. */
+        top: 40px;
+        left: 40px;
+        width: 720px;
+        height: 420px;
+        transform-style: preserve-3d;
+        transform: rotateY(4deg);
+        transform-origin: left center;
+        padding: 24px 36px;
+      }
+
+      /* Each cap stacks at the same absolute position within the plane
+         so hidden captions don't reserve flex space. */
+      .left-plane .cap {
+        position: absolute;
+        top: 24px;
+        right: 36px;
+        max-width: 648px; /* plane 720 - padding 36×2 */
+      }
+
+      /* A single "crown" caption placed center-stage for the payoff
+         ("A WIMBLEDON CHAMPION") — deliberately crosses the head to
+         deliver the emphasis via cinematic occlusion. */
+      .crown-plane {
+        position: absolute;
+        top: 420px;
+        left: 0;
+        right: 0;
+        text-align: center;
+        pointer-events: none;
+      }
+
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.02;
+        opacity: 0;
+        mix-blend-mode: screen;
+        color: #fff5df;
+        text-shadow:
+          0 0 18px rgba(255, 220, 170, 0.55),
+          0 3px 8px rgba(0, 0, 0, 0.85);
+        filter: brightness(1.12) contrast(1.08);
+        will-change: transform, opacity;
+      }
+
+      .cap .w {
+        display: inline-block;
+        opacity: 0;
+        will-change: opacity, transform;
+      }
+
+      /*
+        Story beats sized to emphasize meaning:
+        - intros / fillers = smaller italic
+        - key statement phrases = bigger upright
+        - emphasis phrases (incredible things) = largest bold
+        - crown (Wimbledon Champion) = huge, center-stage, behind subject
+      */
+      .cap-intro {
+        font-size: 52px;
+        font-weight: 500;
+        font-style: italic;
+        letter-spacing: -0.005em;
+      }
+      .cap-phrase {
+        font-size: 60px;
+        font-weight: 600;
+        font-style: normal;
+        letter-spacing: -0.015em;
+      }
+      .cap-emph {
+        font-size: 70px;
+        font-weight: 800;
+        font-style: normal;
+        letter-spacing: -0.025em;
+      }
+      .cap-dream {
+        font-size: 64px;
+        font-weight: 700;
+        font-style: italic;
+        letter-spacing: -0.015em;
+      }
+      .cap-crown {
+        font-size: 140px;
+        font-weight: 900;
+        font-style: normal;
+        letter-spacing: -0.035em;
+        text-transform: uppercase;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="12.08"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="a-roll"
+        class="clip"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="12.08"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+
+      <div id="stage">
+        <!-- Left column: G1-G5 live here, on the clean bookshelf -->
+        <div class="left-plane">
+          <div id="cg-0" class="cap cap-intro">
+            <span class="w" data-i="0">You</span>
+            <span class="w" data-i="1">know,</span>
+            <span class="w" data-i="2">for</span>
+            <span class="w" data-i="3">me</span>
+          </div>
+          <div id="cg-1" class="cap cap-phrase">
+            <span class="w" data-i="0">I've</span>
+            <span class="w" data-i="1">had</span>
+            <span class="w" data-i="2">this</span>
+            <span class="w" data-i="3">kind</span>
+            <span class="w" data-i="4">of</span>
+            <span class="w" data-i="5">upbringing</span>
+          </div>
+          <div id="cg-2" class="cap cap-phrase">
+            <span class="w" data-i="0">the</span>
+            <span class="w" data-i="1">great</span>
+            <span class="w" data-i="2">foundation</span>
+          </div>
+          <div id="cg-3" class="cap cap-emph">
+            <span class="w" data-i="0">I've</span>
+            <span class="w" data-i="1">achieved</span>
+            <span class="w" data-i="2">incredible</span>
+            <span class="w" data-i="3">things</span>
+          </div>
+          <div id="cg-4" class="cap cap-dream">
+            <span class="w" data-i="0">dreaming</span>
+            <span class="w" data-i="1">of</span>
+            <span class="w" data-i="2">becoming</span>
+            <span class="w" data-i="3">number</span>
+            <span class="w" data-i="4">one</span>
+          </div>
+        </div>
+        <!-- Center-stage crown: the payoff. Sits where the subject is,
+             matte layering makes it *behind* him — the occlusion is the moment. -->
+        <div class="crown-plane">
+          <div id="cg-5" class="cap cap-crown">
+            <span class="w" data-i="0">Wimbledon</span>
+            <span class="w" data-i="1">Champion</span>
+          </div>
+        </div>
+      </div>
+
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="12.08"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = 12.08;
+
+      /* Word-level transcript — ElevenLabs scribe_v2 */
+      const GROUPS = [
+        {
+          id: "cg-0",
+          in: 0.1,
+          out: 1.45,
+          tone: "soft",
+          words: [
+            { text: "You", start: 0.18, end: 0.24 },
+            { text: "know", start: 0.28, end: 0.36 },
+            { text: "for", start: 0.46, end: 0.62 },
+            { text: "me", start: 0.66, end: 0.86 },
+          ],
+        },
+        {
+          id: "cg-1",
+          in: 1.4,
+          out: 3.35,
+          tone: "soft",
+          words: [
+            { text: "I've", start: 1.5, end: 1.68 },
+            { text: "had", start: 1.76, end: 1.94 },
+            { text: "this", start: 1.98, end: 2.14 },
+            { text: "kind", start: 2.2, end: 2.34 },
+            { text: "of", start: 2.36, end: 2.44 },
+            { text: "upbringing", start: 2.48, end: 3.06 },
+          ],
+        },
+        {
+          id: "cg-2",
+          in: 3.5,
+          out: 5.35,
+          tone: "soft",
+          words: [
+            { text: "the", start: 3.56, end: 3.64 },
+            { text: "great", start: 3.7, end: 3.9 },
+            { text: "foundation", start: 3.96, end: 4.6 },
+          ],
+        },
+        {
+          id: "cg-3",
+          in: 6.05,
+          out: 8.3,
+          tone: "present",
+          words: [
+            { text: "I've", start: 6.36, end: 6.5 },
+            { text: "achieved", start: 6.62, end: 7.08 },
+            { text: "incredible", start: 7.38, end: 7.86 },
+            { text: "things", start: 7.88, end: 8.16 },
+          ],
+        },
+        {
+          id: "cg-4",
+          in: 8.5,
+          out: 10.4,
+          tone: "present",
+          words: [
+            { text: "dreaming", start: 8.54, end: 8.84 },
+            { text: "of", start: 8.88, end: 9.0 },
+            { text: "becoming", start: 9.04, end: 9.4 },
+            { text: "number", start: 9.48, end: 9.64 },
+            { text: "one", start: 9.72, end: 9.8 },
+          ],
+        },
+        {
+          id: "cg-5",
+          in: 10.8,
+          out: 12.08,
+          tone: "present",
+          words: [
+            { text: "Wimbledon", start: 10.92, end: 11.28 },
+            { text: "Champion", start: 11.38, end: 11.84 },
+          ],
+        },
+      ];
+
+      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 visible just before entrance; single-layer fade is on words. */
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+
+        g.words.forEach(function (w, i) {
+          if (isSoft) {
+            tl.fromTo(
+              words[i],
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.42, 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",
+                transformOrigin: "50% 50%",
+                overwrite: "auto",
+              },
+              w.start,
+            );
+          }
+        });
+
+        /* Group exit — each group fades out before the next enters. */
+        if (g.out < DUR) {
+          tl.to(
+            sel,
+            { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
+            g.out - 0.45,
+          );
+        }
+        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>
@@ -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>