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,99 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Type</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;0,900;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=block"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f;
+        font-family: "Inter", sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="15"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!--
+        A-Roll video. Media is only seeked/decoded when it is a DIRECT child of
+        the host root, so the footage lives here (not inside the sub-composition
+        template) and its per-scene reveal is driven on the main timeline below.
+      -->
+      <video
+        id="a-roll-video"
+        class="clip"
+        src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/67cf5a05_e134ec83a57042b38776c952da595870.mp4"
+        data-start="0"
+        data-duration="14.72"
+        data-track-index="0"
+        data-has-audio="true"
+        playsinline
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          z-index: 0;
+          opacity: 0;
+        "
+      ></video>
+      <div
+        id="graphics-layer"
+        data-composition-id="main-graphics"
+        data-composition-src="compositions/main-graphics.html"
+        data-start="0"
+        data-duration="15"
+        data-track-index="1"
+        data-width="1920"
+        data-height="1080"
+        style="position: absolute; inset: 0; z-index: 1"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // The A-roll <video> is a host-root element, so the sub-composition
+      // timeline cannot reach it. Drive its reveal here on the main timeline at
+      // global time (the graphics sub-comp starts at 0, so scene-local == global).
+      //
+      // COUPLING: the reveal/hide times below (2.2 / 11.7 / 13.5) are hand-tuned
+      // to the graphics-layer sub-composition's scene boundaries and assume it is
+      // mounted at data-start="0". If you re-time the sub-composition's scenes or
+      // change its data-start, these absolute times drift out of alignment and
+      // must be updated to match the new scene boundaries.
+      tl.set("#a-roll-video", { opacity: 0 }, 0);
+      tl.set("#a-roll-video", { opacity: 1 }, 2.2); // reveal after the Scene 1 white wipe
+      tl.to("#a-roll-video", { opacity: 0, duration: 0.4 }, 11.7); // hide for the Wes Anderson scene
+      tl.set("#a-roll-video", { opacity: 1 }, 13.5); // back for the Vignelli outro
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "kinetic-type",
+  "type": "hyperframes:example",
+  "title": "Kinetic Type",
+  "description": "Bold kinetic typography promo",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 15,
+  "files": [
+    {
+      "path": "compositions/main-graphics.html",
+      "target": "compositions/main-graphics.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "index.html",
+      "target": "index.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}