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,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.2"/>
+    </filter>
+    <g id="cursor-arrow">
+      <path d="M0 0 L 16 16 L 9.5 16 L 6.5 23 L 6.5 16 L 0 16 Z" fill="white" stroke="#000" stroke-width="1.5" stroke-linejoin="round" filter="url(#shadow)"/>
+    </g>
+  </defs>
+
+  <rect width="1920" height="1080" fill="#f0f0f0" />
+
+  <g id="cursor-designer" transform="translate(600, 500)">
+    <use href="#cursor-arrow" x="0" y="0"/>
+    <rect x="16" y="20" width="90" height="24" rx="4" fill="#A259FF"/>
+    <text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Designer</text>
+  </g>
+
+  <g id="cursor-engineer" transform="translate(900, 400)">
+    <use href="#cursor-arrow" x="0" y="0"/>
+    <rect x="16" y="20" width="90" height="24" rx="4" fill="#1ABCFE"/>
+    <text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Engineer</text>
+  </g>
+
+  <g id="cursor-pm" transform="translate(1200, 600)">
+    <use href="#cursor-arrow" x="0" y="0"/>
+    <rect x="16" y="20" width="50" height="24" rx="4" fill="#F24E1E"/>
+    <text x="41" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">PM</text>
+  </g>
+</svg>
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <g transform="translate(880, 420)">
+    <!-- Top-left: rounded square -->
+    <path id="logo-tl" d="M 40 0 A 40 40 0 0 0 0 40 L 0 80 A 40 40 0 0 0 40 120 A 40 40 0 0 0 80 80 L 80 40 A 40 40 0 0 0 40 0 Z" fill="#F24E1E" />
+    
+    <!-- Top-right: rounded square -->
+    <path id="logo-tr" d="M 120 0 A 40 40 0 0 0 80 40 L 80 80 A 40 40 0 0 0 120 120 A 40 40 0 0 0 160 80 L 160 40 A 40 40 0 0 0 120 0 Z" fill="#A259FF" />
+    
+    <!-- Bottom-left: half-circle -->
+    <path id="logo-bl" d="M 0 120 A 40 120 0 0 0 80 120 Z" fill="#1ABCFE" />
+    
+    <!-- Bottom-right: half-circle -->
+    <path id="logo-br" d="M 80 120 A 40 120 0 0 0 160 120 Z" fill="#0ACF83" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <rect id="pill-tl" x="870" y="410" width="80" height="120" rx="40" fill="#F24E1E" />
+  <rect id="pill-tr" x="970" y="410" width="80" height="120" rx="40" fill="#A259FF" />
+  <rect id="pill-bl" x="870" y="550" width="80" height="120" rx="40" fill="#1ABCFE" />
+  <rect id="pill-br" x="970" y="550" width="80" height="120" rx="40" fill="#0ACF83" />
+</svg>
@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Product Promo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=block"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0f;
+        font-family: "Inter", sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .caption-text-wrapper {
+        position: absolute;
+        bottom: 150px;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        overflow: hidden;
+        padding: 10px 0;
+      }
+      .caption-line {
+        color: white;
+        font-size: 48px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        text-align: center;
+        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        transform: translateY(100%);
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="20"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Scene 1: Logo Intro -->
+      <div
+        id="scene-1"
+        class="scene"
+        data-composition-id="scene1-logo-intro"
+        data-composition-src="compositions/scene1-logo-intro.html"
+        data-start="0"
+        data-duration="1.5"
+        data-track-index="1"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+
+      <!-- Scene 2-4: Continuous Canvas -->
+      <div
+        id="scene-2-4"
+        class="scene"
+        data-composition-id="scene2-4-canvas"
+        data-composition-src="compositions/scene2-4-canvas.html"
+        data-start="1.5"
+        data-duration="12.5"
+        data-track-index="1"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+
+      <!-- Scene 5: Logo Outro -->
+      <div
+        id="scene-5"
+        class="scene"
+        data-composition-id="scene5-logo-outro"
+        data-composition-src="compositions/scene5-logo-outro.html"
+        data-start="14"
+        data-duration="6"
+        data-track-index="1"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+
+      <!-- Captions -->
+      <div
+        id="captions-comp"
+        data-composition-id="captions"
+        data-start="1.5"
+        data-duration="12.5"
+        data-track-index="2"
+        data-width="1920"
+        data-height="1080"
+      >
+        <div class="caption-text-wrapper">
+          <div id="caption-text" class="caption-line">Starting with a blank canvas.</div>
+        </div>
+
+        <script>
+          (function () {
+            const tl = gsap.timeline({ paused: true });
+            const text = document.querySelector("#caption-text");
+
+            tl.to(text, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0);
+            tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 3.2);
+            tl.set(text, { innerText: "Three cursors. One file. Zero meetings.", y: 40 }, 3.5);
+            tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 3.5);
+            tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 7.7);
+            tl.set(
+              text,
+              { innerText: "Components in. Feedback resolved. No one waited.", y: 40 },
+              8.0,
+            );
+            tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 8.0);
+            tl.to(text, { opacity: 0, y: -20, duration: 0.4, ease: "power3.in" }, 12.1);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["captions"] = tl;
+          })();
+        </script>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const mainTl = gsap.timeline({ paused: true });
+
+      mainTl.set("#scene-2-4", { scale: 1, filter: "blur(0px)" }, 1.5);
+      mainTl.to(
+        "#scene-2-4",
+        { duration: 0.25, scale: 0.94, filter: "blur(6px)", opacity: 0, ease: "power2.in" },
+        13.75,
+      );
+
+      window.__timelines["main"] = mainTl;
+    </script>
+  </body>
+</html>
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "product-promo",
+  "type": "hyperframes:example",
+  "title": "Product Promo",
+  "description": "Multi-scene product showcase with SVG assets",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 20,
+  "files": [
+    {
+      "path": "assets/figma-cursors.svg",
+      "target": "assets/figma-cursors.svg",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/figma-logo-pieces.svg",
+      "target": "assets/figma-logo-pieces.svg",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/figma-logo-pills.svg",
+      "target": "assets/figma-logo-pills.svg",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "compositions/scene1-logo-intro.html",
+      "target": "compositions/scene1-logo-intro.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/scene2-4-canvas.html",
+      "target": "compositions/scene2-4-canvas.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/scene5-logo-outro.html",
+      "target": "compositions/scene5-logo-outro.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "index.html",
+      "target": "index.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}