From 382a630d581d51c4abc421801b5f7b6d8d87f4b0 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Fri, 27 Mar 2026 15:58:36 -0700
Subject: [PATCH 1/3] feat: add templates

---
 .../compositions/decision_tree.html           | 417 +++++++++++++
 .../src/templates/decision-tree/index.html    |  47 ++
 packages/cli/src/templates/generators.ts      |  19 +-
 .../compositions/main-graphics.html           | 588 ++++++++++++++++++
 .../cli/src/templates/kinetic-type/index.html |  66 ++
 .../nyt-graph/compositions/nyt-chart.html     | 447 +++++++++++++
 .../cli/src/templates/nyt-graph/index.html    |  52 ++
 .../product-promo/assets/figma-cursors.svg    |  30 +
 .../assets/figma-logo-pieces.svg              |  15 +
 .../product-promo/assets/figma-logo-pills.svg |   6 +
 .../compositions/scene1-logo-intro.html       | 189 ++++++
 .../compositions/scene2-4-canvas.html         | 570 +++++++++++++++++
 .../compositions/scene5-logo-outro.html       | 226 +++++++
 .../src/templates/product-promo/index.html    | 164 +++++
 14 files changed, 2835 insertions(+), 1 deletion(-)
 create mode 100644 packages/cli/src/templates/decision-tree/compositions/decision_tree.html
 create mode 100644 packages/cli/src/templates/decision-tree/index.html
 create mode 100644 packages/cli/src/templates/kinetic-type/compositions/main-graphics.html
 create mode 100644 packages/cli/src/templates/kinetic-type/index.html
 create mode 100644 packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
 create mode 100644 packages/cli/src/templates/nyt-graph/index.html
 create mode 100644 packages/cli/src/templates/product-promo/assets/figma-cursors.svg
 create mode 100644 packages/cli/src/templates/product-promo/assets/figma-logo-pieces.svg
 create mode 100644 packages/cli/src/templates/product-promo/assets/figma-logo-pills.svg
 create mode 100644 packages/cli/src/templates/product-promo/compositions/scene1-logo-intro.html
 create mode 100644 packages/cli/src/templates/product-promo/compositions/scene2-4-canvas.html
 create mode 100644 packages/cli/src/templates/product-promo/compositions/scene5-logo-outro.html
 create mode 100644 packages/cli/src/templates/product-promo/index.html

diff --git a/packages/cli/src/templates/decision-tree/compositions/decision_tree.html b/packages/cli/src/templates/decision-tree/compositions/decision_tree.html
new file mode 100644
index 00000000000..1381f1343a6
--- /dev/null
+++ b/packages/cli/src/templates/decision-tree/compositions/decision_tree.html
@@ -0,0 +1,417 @@
+<template id="decision-tree-template">
+  <div data-composition-id="decision-tree" data-width="1920" data-height="1080" data-duration="12">
+    <div class="canvas">
+      <svg class="connectors" width="1920" height="1080" viewBox="0 0 1920 1080">
+        <!-- Level 1 to 2 -->
+        <path
+          id="path-1-L"
+          class="connector"
+          d="M 960 130 L 960 200 L 600 200 L 600 270"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <path
+          id="path-1-R"
+          class="connector"
+          d="M 960 130 L 960 200 L 1320 200 L 1320 270"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+
+        <!-- Level 2 to 3 (Left side) -->
+        <path
+          id="path-2-LL"
+          class="connector"
+          d="M 600 330 L 600 400 L 400 400 L 400 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <path
+          id="path-2-LR"
+          class="connector"
+          d="M 600 330 L 600 400 L 800 400 L 800 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+
+        <!-- Level 2 to 3 (Right side) -->
+        <path
+          id="path-2-RL"
+          class="connector"
+          d="M 1320 330 L 1320 400 L 1120 400 L 1120 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <path
+          id="path-2-RR"
+          class="connector"
+          d="M 1320 330 L 1320 400 L 1520 400 L 1520 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+      </svg>
+
+      <div id="label-yes" class="connector-label">Yes</div>
+      <div id="label-not-sure" class="connector-label">Not sure</div>
+
+      <!-- Level 1 -->
+      <div id="node-root" class="node sticky yellow" style="left: 960px; top: 100px">
+        Should I learn to code?
+      </div>
+
+      <!-- Level 2 -->
+      <div id="node-yes" class="node sticky green" style="left: 600px; top: 300px">Yes</div>
+      <div id="node-not-sure" class="node sticky peach" style="left: 1320px; top: 300px">
+        Not sure
+      </div>
+
+      <!-- Level 3 -->
+      <div id="node-python" class="node sticky lavender" style="left: 400px; top: 500px">
+        <div style="position: relative; display: inline-block">
+          <span id="python-text">Start with Pythom</span>
+          <svg class="squiggle-container" width="64" height="6" viewBox="0 0 64 6">
+            <path
+              id="squiggle"
+              d="M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3"
+              fill="none"
+              stroke="#E53935"
+              stroke-width="2"
+            />
+          </svg>
+        </div>
+      </div>
+      <div id="node-nocode" class="node sticky blue" style="left: 800px; top: 500px">
+        Try no-code first
+      </div>
+      <div id="node-website" class="node sticky pink" style="left: 1120px; top: 500px">
+        Build a personal website
+      </div>
+      <div id="node-course" class="node sticky yellow" style="left: 1520px; top: 500px">
+        Take a free intro course
+      </div>
+
+      <!-- Cursor -->
+      <div id="cursor" class="cursor-container">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+            fill="white"
+            stroke="black"
+          />
+        </svg>
+        <div class="cursor-tag">You</div>
+      </div>
+
+      <!-- Emoji -->
+      <div id="emoji-thumb" class="emoji">👍</div>
+
+      <!-- Overlay -->
+      <div id="fade-overlay"></div>
+    </div>
+
+    <style>
+      [data-composition-id="decision-tree"] {
+        width: 1920px;
+        height: 1080px;
+        background-color: #ffffff;
+        background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
+        background-size: 20px 20px;
+        position: absolute;
+        overflow: hidden;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="decision-tree"] .canvas {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        transform: scale(1.2);
+        transform-origin: 960px 300px;
+      }
+
+      [data-composition-id="decision-tree"] .node {
+        position: absolute;
+        transform: translate(-50%, -50%) scale(0);
+        padding: 16px 24px;
+        border-radius: 12px;
+        font-size: 18px;
+        font-weight: 500;
+        color: #333;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        white-space: nowrap;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+      }
+
+      [data-composition-id="decision-tree"] .node.yellow {
+        background-color: #e8d44d;
+      }
+      [data-composition-id="decision-tree"] .node.green {
+        background-color: #c2e8a0;
+      }
+      [data-composition-id="decision-tree"] .node.peach {
+        background-color: #f5c5a3;
+      }
+      [data-composition-id="decision-tree"] .node.lavender {
+        background-color: #d4c5f9;
+      }
+      [data-composition-id="decision-tree"] .node.blue {
+        background-color: #a8d8f0;
+      }
+      [data-composition-id="decision-tree"] .node.pink {
+        background-color: #f8b4c8;
+      }
+
+      [data-composition-id="decision-tree"] .connectors {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        pointer-events: none;
+      }
+
+      [data-composition-id="decision-tree"] .connector {
+        stroke-dasharray: 1000;
+        stroke-dashoffset: 1000;
+      }
+
+      [data-composition-id="decision-tree"] .connector-label {
+        position: absolute;
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+        background: white;
+        padding: 2px 6px;
+        border-radius: 4px;
+        opacity: 0;
+        z-index: 6;
+        transform: translate(-50%, -50%);
+      }
+
+      #label-yes {
+        left: 780px;
+        top: 230px;
+      }
+      #label-not-sure {
+        left: 1140px;
+        top: 230px;
+      }
+
+      [data-composition-id="decision-tree"] .cursor-container {
+        position: absolute;
+        left: 1920px;
+        top: 1080px;
+        z-index: 100;
+        pointer-events: none;
+        display: flex;
+        align-items: flex-start;
+      }
+
+      [data-composition-id="decision-tree"] .cursor-tag {
+        background-color: #9747ff;
+        color: white;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        margin-left: 4px;
+        margin-top: 12px;
+      }
+
+      [data-composition-id="decision-tree"] .squiggle-container {
+        position: absolute;
+        right: 0;
+        bottom: -4px;
+        opacity: 0;
+      }
+
+      [data-composition-id="decision-tree"] .emoji {
+        position: absolute;
+        font-size: 32px;
+        left: 510px;
+        top: 500px;
+        transform: translate(-50%, -50%) scale(0);
+        z-index: 20;
+      }
+
+      [data-composition-id="decision-tree"] #fade-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        opacity: 0;
+        z-index: 1000;
+        pointer-events: none;
+      }
+
+      .selection-border {
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        border: 2px solid #0b84f3;
+        border-radius: 16px;
+        pointer-events: none;
+        opacity: 0;
+      }
+
+      .text-highlight {
+        background-color: #d0e4ff;
+      }
+    </style>
+
+    <script>
+      (function () {
+        const tl = gsap.timeline({ paused: true });
+
+        // 1. Root node scales from 0→100% over 0.4s
+        tl.to("#node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+
+        // 2. Hold 0.6s
+        tl.addLabel("hold1", "+=0.6");
+
+        // 3. Two elbow connectors draw downward-left and downward-right simultaneously (0.5s)
+        tl.to(
+          ".connector#path-1-L, .connector#path-1-R",
+          {
+            strokeDashoffset: 0,
+            duration: 0.5,
+            ease: "none",
+          },
+          "hold1",
+        );
+
+        // Labels fade in at midpoint
+        tl.to(
+          "#label-yes, #label-not-sure",
+          {
+            opacity: 1,
+            duration: 0.2,
+          },
+          "hold1+=0.25",
+        );
+
+        // 4. Level 2 nodes scale in at endpoints with 0.2s stagger
+        tl.to("#node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+        tl.to("#node-not-sure", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.6");
+
+        // 5. Hold 0.5s
+        tl.addLabel("hold2", "+=0.5");
+
+        // 6. Four connectors draw down from level 2 (0.4s)
+        tl.to(
+          ".connector#path-2-LL, .connector#path-2-LR, .connector#path-2-RL, .connector#path-2-RR",
+          {
+            strokeDashoffset: 0,
+            duration: 0.4,
+            ease: "none",
+          },
+          "hold2",
+        );
+
+        // 7. Four leaf nodes scale in with 0.15s stagger
+        const leafNodes = ["#node-python", "#node-nocode", "#node-website", "#node-course"];
+        leafNodes.forEach((id, i) => {
+          tl.to(id, { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, `hold2+=${0.3 + i * 0.15}`);
+        });
+
+        // Red wavy underline appears with text
+        tl.to(".squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+
+        // 8. Hold 0.8s
+        tl.addLabel("hold3", "+=0.8");
+
+        // 9. Cursor drifts in from bottom-right (1s) to lavender sticky
+        tl.to(
+          "#cursor",
+          {
+            left: 450,
+            top: 540,
+            duration: 1,
+            ease: "power1.inOut",
+          },
+          "hold3",
+        );
+
+        // 10. Cursor clicks. Selection border appears.
+        tl.add(() => {
+          const node = document.querySelector("#node-python");
+          if (!node.querySelector(".selection-border")) {
+            const border = document.createElement("div");
+            border.className = "selection-border";
+            node.appendChild(border);
+          }
+          gsap.set(".selection-border", { opacity: 1 });
+        }, "hold3+=1");
+
+        // Visual click feedback
+        tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1 }, "hold3+=1");
+
+        // 11. Hold 0.3s
+        tl.addLabel("hold4", "+=0.3");
+
+        // 12. Cursor double-clicks "Pythom" — highlight in blue
+        tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3 }, "hold4");
+        tl.add(() => {
+          const textEl = document.querySelector("#python-text");
+          textEl.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
+        }, "hold4+=0.1");
+
+        // 13. Hold 0.2s
+        tl.addLabel("hold5", "+=0.2");
+
+        // 14. Highlighted text deletes and "Python" types in (fast)
+        // Squiggle disappears when last char lands
+        const typingStart = tl.labels["hold5"];
+        const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
+        words.forEach((word, i) => {
+          tl.add(
+            () => {
+              document.querySelector("#python-text").innerHTML =
+                `Start with <span class="text-highlight">${word}</span>`;
+            },
+            typingStart + i * 0.05,
+          );
+        });
+
+        // Remove highlight and squiggle at the end of typing
+        const typingEnd = typingStart + words.length * 0.05;
+        tl.add(() => {
+          document.querySelector("#python-text").innerHTML = "Start with Python";
+          gsap.set(".squiggle-container", { opacity: 0 });
+        }, typingEnd);
+
+        // 15. Hold 0.5s
+        tl.addLabel("hold6", typingEnd + 0.5);
+
+        // 16. Cursor moves slightly and clicks away to deselect
+        tl.to("#cursor", { left: 500, top: 580, duration: 0.3 }, "hold6");
+        tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1 }, "hold6+=0.3");
+        tl.to(".selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+
+        // 17. 👍 emoji pops in
+        tl.to("#emoji-thumb", { scale: 1, duration: 0.15, ease: "back.out(2)" }, "hold6+=0.4");
+
+        // 18. Hold 2s
+        tl.addLabel("hold7", "+=2");
+
+        // 19. Fade entire screen to white over 0.5s
+        tl.to("#fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+
+        window.__timelines["decision-tree"] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/cli/src/templates/decision-tree/index.html b/packages/cli/src/templates/decision-tree/index.html
new file mode 100644
index 00000000000..fb6ca2a5775
--- /dev/null
+++ b/packages/cli/src/templates/decision-tree/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080, initial-scale=1.0" />
+    <title>Decision Tree</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "Inter", sans-serif;
+        background-color: #ffffff;
+      }
+      #composition-container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <div
+      id="composition-container"
+      data-composition-id="main"
+      data-composition-src="compositions/decision_tree.html"
+      data-start="0"
+      data-track-index="0"
+      data-width="1920"
+      data-height="1080"
+    ></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline();
+    </script>
+  </body>
+</html>
diff --git a/packages/cli/src/templates/generators.ts b/packages/cli/src/templates/generators.ts
index 11e5396ca21..87e369e76d5 100644
--- a/packages/cli/src/templates/generators.ts
+++ b/packages/cli/src/templates/generators.ts
@@ -1,4 +1,13 @@
-export type TemplateId = "blank" | "warm-grain" | "play-mode" | "swiss-grid" | "vignelli";
+export type TemplateId =
+  | "blank"
+  | "warm-grain"
+  | "play-mode"
+  | "swiss-grid"
+  | "vignelli"
+  | "decision-tree"
+  | "kinetic-type"
+  | "product-promo"
+  | "nyt-graph";
 
 export interface TemplateOption {
   id: TemplateId;
@@ -12,4 +21,12 @@ export const TEMPLATES: TemplateOption[] = [
   { id: "play-mode", label: "Play Mode", hint: "Playful elastic animations" },
   { id: "swiss-grid", label: "Swiss Grid", hint: "Structured grid layout" },
   { id: "vignelli", label: "Vignelli", hint: "Bold typography with red accents" },
+  { id: "decision-tree", label: "Decision Tree", hint: "Animated flowchart with branching paths" },
+  { id: "kinetic-type", label: "Kinetic Type", hint: "Bold kinetic typography promo" },
+  {
+    id: "product-promo",
+    label: "Product Promo",
+    hint: "Multi-scene product showcase with SVG assets",
+  },
+  { id: "nyt-graph", label: "NYT Graph", hint: "Animated data chart in print editorial style" },
 ];
diff --git a/packages/cli/src/templates/kinetic-type/compositions/main-graphics.html b/packages/cli/src/templates/kinetic-type/compositions/main-graphics.html
new file mode 100644
index 00000000000..988ed92c713
--- /dev/null
+++ b/packages/cli/src/templates/kinetic-type/compositions/main-graphics.html
@@ -0,0 +1,588 @@
+<template id="main-graphics-template">
+  <div
+    data-composition-id="main-graphics"
+    data-width="1920"
+    data-height="1080"
+    data-duration="14.72"
+  >
+    <!-- A-Roll Video -->
+    <video
+      id="a-roll-video"
+      src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/67cf5a05_e134ec83a57042b38776c952da595870.mp4"
+      style="
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 1;
+        z-index: 0;
+      "
+      crossorigin="anonymous"
+    ></video>
+
+    <!-- Scene 1: Hook -->
+    <div
+      id="white-wipe"
+      style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        z-index: 15;
+      "
+    ></div>
+    <div id="scene-1" class="scene">
+      <div class="hook-container">
+        <div class="hook-what-if">What if</div>
+        <div class="hook-motion-graphics">motion graphics</div>
+        <div class="hook-wrote-themselves">wrote themselves?</div>
+      </div>
+    </div>
+
+    <!-- Scene 2: Swiss Style -->
+    <div id="scene-2" class="scene">
+      <div class="swiss-panel">
+        <div class="swiss-grid">
+          <div class="grid-line horizontal" style="top: 25%"></div>
+          <div class="grid-line horizontal" style="top: 50%"></div>
+          <div class="grid-line horizontal" style="top: 75%"></div>
+          <div class="grid-line vertical" style="left: 25%"></div>
+          <div class="grid-line vertical" style="left: 50%"></div>
+          <div class="grid-line vertical" style="left: 75%"></div>
+          <div class="swiss-circle"></div>
+          <div class="swiss-square"></div>
+        </div>
+        <div class="swiss-content">
+          <div class="swiss-title">HyperFrames</div>
+          <div class="swiss-subtitle">turns code into</div>
+          <div class="swiss-main-text">
+            <span class="word">production-ready</span>
+            <span class="word">video</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scene 3: Figma Config Style -->
+    <div id="scene-3" class="scene">
+      <div class="dark-overlay"></div>
+      <div class="figma-container">
+        <div class="figma-item" id="figma-animations">
+          <div class="glyph-container">
+            <div class="glyph-ring ring-unified"></div>
+            <div class="glyph-diamond"></div>
+          </div>
+          <div class="figma-label">animations</div>
+        </div>
+        <div class="figma-item" id="figma-transitions">
+          <div class="glyph-container">
+            <div class="glyph-rect rect-unified"></div>
+            <div class="glyph-wipe"></div>
+          </div>
+          <div class="figma-label">transitions</div>
+        </div>
+        <div class="figma-item" id="figma-typography">
+          <div class="glyph-container">
+            <div class="glyph-tri tri-unified"></div>
+            <div class="glyph-lines">
+              <div class="line"></div>
+              <div class="line"></div>
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="figma-label">typography</div>
+        </div>
+        <div class="figma-footer">all generated from a single prompt</div>
+      </div>
+    </div>
+
+    <!-- Scene 4: David Carson Style -->
+    <div id="scene-4" class="scene">
+      <div class="carson-overlay"></div>
+      <div class="carson-container">
+        <div class="carson-line-1">No timeline<span class="red-dot">.</span></div>
+        <div class="carson-line-2">no After Effects.</div>
+      </div>
+    </div>
+
+    <!-- Scene 5: Wes Anderson -->
+    <div id="scene-5" class="scene">
+      <div class="wes-bg"></div>
+      <div class="wes-container">
+        <div class="wes-text-top">Just describe the motion</div>
+        <div class="wes-rule"></div>
+        <div class="wes-text-bottom">and render.</div>
+      </div>
+    </div>
+
+    <!-- Scene 6: Vignelli Style -->
+    <div id="scene-6" class="scene">
+      <div
+        id="scene-6-overlay"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: black;
+          z-index: -1;
+        "
+      ></div>
+      <div class="vignelli-container">
+        <div class="vignelli-title">HyperFrames</div>
+        <div class="vignelli-subtitle">is here.</div>
+        <div class="vignelli-rule"></div>
+      </div>
+    </div>
+
+    <!-- Black Out -->
+    <div
+      id="black-out"
+      style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: black;
+        z-index: 100;
+        opacity: 0;
+        pointer-events: none;
+      "
+    ></div>
+
+    <style>
+      [data-composition-id="main-graphics"] {
+        background: black;
+        font-family: "Inter", sans-serif;
+        color: white;
+        overflow: hidden;
+      }
+
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+        z-index: 1;
+      }
+
+      /* Scene 1: Hook */
+      #scene-1 {
+        background-color: #0a0a0f;
+        z-index: 10;
+        opacity: 1;
+      }
+      .hook-container {
+        text-align: center;
+      }
+      .hook-what-if {
+        font-size: 32px;
+        font-weight: 400;
+        opacity: 0;
+      }
+      .hook-motion-graphics {
+        font-size: 120px;
+        font-weight: 900;
+        text-transform: uppercase;
+        margin-top: 10px;
+        transform: scale(0);
+      }
+      .hook-wrote-themselves {
+        font-size: 48px;
+        font-style: italic;
+        color: #00e5ff;
+        margin-top: 10px;
+        opacity: 0;
+      }
+
+      /* Scene 2: Swiss Style */
+      .swiss-panel {
+        position: absolute;
+        right: 100px;
+        width: 800px;
+        height: 400px;
+        background: #ffffff;
+        border-radius: 4px;
+        display: flex;
+        padding: 40px;
+        color: black;
+        transform: translateX(100%);
+        z-index: 2;
+      }
+      .swiss-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
+      .grid-line {
+        position: absolute;
+        background: #e53935;
+      }
+      .grid-line.horizontal {
+        width: 100%;
+        height: 2px;
+      }
+      .grid-line.vertical {
+        height: 100%;
+        width: 2px;
+      }
+
+      .swiss-circle {
+        position: absolute;
+        width: 60px;
+        height: 60px;
+        background: #e53935;
+        border-radius: 50%;
+        top: 20%;
+        left: 10%;
+        opacity: 0;
+      }
+      .swiss-square {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        background: black;
+        bottom: 15%;
+        right: 15%;
+        opacity: 0;
+      }
+
+      .swiss-content {
+        position: relative;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .swiss-title {
+        font-family: "Inter", sans-serif;
+        font-size: 64px;
+        font-weight: 900;
+        opacity: 0;
+      }
+      .swiss-subtitle {
+        font-size: 24px;
+        color: #666;
+        margin-top: 10px;
+        opacity: 0;
+      }
+      .swiss-main-text {
+        font-size: 48px;
+        font-weight: 900;
+        margin-top: 20px;
+        display: flex;
+        gap: 15px;
+      }
+      .swiss-main-text .word {
+        opacity: 0;
+      }
+
+      /* Scene 3: Figma Config Style */
+      .dark-overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.55);
+        z-index: 1;
+      }
+      .figma-container {
+        position: relative;
+        z-index: 2;
+        width: 1200px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .figma-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+        opacity: 0;
+      }
+      .glyph-container {
+        position: relative;
+        width: 120px;
+        height: 120px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .glyph-ring {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 8px solid transparent;
+      }
+      .ring-unified {
+        background:
+          linear-gradient(black, black) padding-box,
+          linear-gradient(to right, #f24e1e, #a259ff) border-box;
+      }
+      .glyph-diamond {
+        width: 40px;
+        height: 40px;
+        background: white;
+        transform: rotate(45deg);
+      }
+      .glyph-rect {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        background: linear-gradient(to bottom right, #f24e1e, #a259ff);
+      }
+      .glyph-wipe {
+        position: absolute;
+        width: 0%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.3);
+        left: 0;
+      }
+      .glyph-tri {
+        width: 100px;
+        height: 100px;
+        background: linear-gradient(to bottom right, #f24e1e, #a259ff);
+        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+      }
+      .glyph-lines {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 60px;
+      }
+      .glyph-lines .line {
+        height: 4px;
+        background: white;
+        width: 0;
+      }
+      .figma-label {
+        font-size: 40px;
+        font-weight: bold;
+      }
+      .figma-footer {
+        width: 100%;
+        text-align: center;
+        font-size: 22px;
+        margin-top: 60px;
+        opacity: 0;
+      }
+
+      /* Scene 4: David Carson Style */
+      .carson-overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        z-index: 1;
+      }
+      .carson-container {
+        position: relative;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+      }
+      .carson-line-1 {
+        position: absolute;
+        top: 20%;
+        left: 10%;
+        font-size: 140px;
+        font-weight: 900;
+        transform: translateY(200px);
+        z-index: 2;
+      }
+      .carson-line-1 .red-dot {
+        color: #ff0000;
+        font-size: 240px;
+        position: absolute;
+        top: -40px;
+        left: 80%;
+        z-index: 1;
+        opacity: 0.8;
+      }
+      .carson-line-2 {
+        position: absolute;
+        bottom: 30%;
+        right: 10%;
+        font-size: 80px;
+        font-weight: 400;
+        opacity: 0;
+        z-index: 3;
+        transform: rotate(-5deg);
+      }
+
+      /* Scene 5: Wes Anderson */
+      .wes-bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #f5f0e8;
+        z-index: -1;
+      }
+      .wes-bg::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.05;
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+      }
+      .wes-container {
+        text-align: center;
+        color: #2c1e16;
+        overflow: hidden;
+      }
+      .wes-text-top {
+        font-family: "Libre Baskerville", serif;
+        font-size: 44px;
+        font-style: italic;
+        transform: translateY(-100px);
+      }
+      .wes-rule {
+        width: 0;
+        height: 1px;
+        background: #2c1e16;
+        margin: 20px auto;
+      }
+      .wes-text-bottom {
+        font-family: "Libre Baskerville", serif;
+        font-size: 44px;
+        transform: translateY(100px);
+      }
+
+      /* Scene 6: Vignelli Style */
+      .vignelli-container {
+        text-align: center;
+      }
+      .vignelli-title {
+        font-family: "Inter", sans-serif;
+        font-size: 120px;
+        font-weight: 900;
+        letter-spacing: -0.02em;
+        opacity: 0;
+      }
+      .vignelli-subtitle {
+        font-family: "Inter", sans-serif;
+        font-size: 32px;
+        color: #00e5ff;
+        margin-top: 20px;
+        opacity: 0;
+      }
+      .vignelli-rule {
+        width: 0;
+        height: 2px;
+        background: white;
+        margin: 30px auto 0;
+      }
+    </style>
+
+    <script>
+      const tl = gsap.timeline({ paused: true });
+
+      const video = document.getElementById("a-roll-video");
+
+      // --- Initial Setup ---
+      tl.set(
+        video,
+        { width: "100%", height: "100%", left: 0, top: 0, borderRadius: 0, scale: 1, opacity: 0 },
+        0,
+      );
+      tl.set("#white-wipe", { xPercent: -100 }, 0);
+
+      // --- Scene 1: Hook (0s - 2.0s) ---
+      tl.set("#scene-1", { opacity: 1, clipPath: "none" }, 0);
+      tl.to(".hook-what-if", { opacity: 1, y: -30, duration: 0.8, ease: "power3.out" }, 0.2);
+      tl.to(".hook-motion-graphics", { scale: 1, duration: 0.8, ease: "back.out(1.7)" }, 0.5);
+      tl.fromTo(
+        ".hook-wrote-themselves",
+        { x: 100, opacity: 0 },
+        { x: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+        0.9,
+      );
+
+      // --- Transition to Scene 2 (2.0s - 2.4s) ---
+      tl.to("#white-wipe", { xPercent: 0, duration: 0.2, ease: "power2.in" }, 2.0);
+      tl.set("#scene-1", { opacity: 0 }, 2.2);
+      tl.set(video, { opacity: 1 }, 2.2);
+      tl.to("#white-wipe", { xPercent: 100, duration: 0.2, ease: "power2.out" }, 2.2);
+
+      // --- Scene 2: Swiss Style (2.0s - 5.0s) ---
+      tl.to("#scene-2", { opacity: 1, duration: 0.1 }, 2.2);
+      tl.to(".swiss-panel", { x: 0, duration: 0.8, ease: "expo.out" }, 2.3);
+      tl.to(".swiss-title", { opacity: 1, duration: 0.1 }, 2.5);
+      tl.to(".swiss-subtitle", { opacity: 1, y: 0, duration: 0.4 }, 2.7);
+      tl.to(
+        ".swiss-main-text .word",
+        { opacity: 1, y: 0, stagger: 0.15, duration: 0.5, ease: "power2.out" },
+        3.0,
+      );
+      tl.to(".swiss-circle", { opacity: 1, scale: 1.2, duration: 0.6, ease: "back.out" }, 3.2);
+      tl.to(".swiss-square", { opacity: 1, rotation: 45, duration: 0.6, ease: "back.out" }, 3.4);
+      tl.to(".swiss-panel", { x: "120%", duration: 0.7, ease: "expo.in" }, 4.7);
+      tl.to("#scene-2", { opacity: 0, duration: 0.1 }, 5.0);
+
+      // --- Scene 3: Figma Config Style (5.3s - 9.6s) ---
+      tl.to("#scene-3", { opacity: 1, duration: 0.3 }, 5.3);
+      tl.to("#figma-animations", { opacity: 1, y: 0, duration: 0.6 }, 5.5);
+      tl.to(".glyph-diamond", { rotation: 225, duration: 2, repeat: 1, ease: "power2.inOut" }, 5.5);
+
+      tl.to("#figma-transitions", { opacity: 1, y: 0, duration: 0.6 }, 6.2);
+      tl.to(".glyph-wipe", { width: "100%", duration: 1, ease: "power2.inOut" }, 6.2);
+
+      tl.to("#figma-typography", { opacity: 1, y: 0, duration: 0.6 }, 6.9);
+      tl.to(".glyph-lines .line", { width: "100%", stagger: 0.2, duration: 0.5 }, 7.1);
+
+      tl.to(".figma-footer", { opacity: 1, y: -20, duration: 0.8 }, 7.8);
+      tl.to("#scene-3", { opacity: 0, duration: 0.5 }, 9.1);
+
+      // --- Scene 4: David Carson Style (9.6s - 11.7s) ---
+      tl.to("#scene-4", { opacity: 1, duration: 0.1 }, 9.6);
+      tl.to(".carson-line-1", { y: 0, duration: 0.6, ease: "expo.out" }, 9.7);
+      tl.to(".carson-line-2", { opacity: 1, x: -50, duration: 0.5, ease: "back.out" }, 10.2);
+      tl.to(".carson-container", { y: 300, duration: 0.6, ease: "expo.in" }, 11.4);
+      tl.to("#scene-4", { opacity: 0, duration: 0.1 }, 11.7);
+
+      // --- Scene 5: Wes Anderson (11.7s - 13.5s) ---
+      tl.to(video, { opacity: 0, duration: 0.4 }, 11.7);
+      tl.to("#scene-5", { opacity: 1, duration: 0.1 }, 11.7);
+      tl.to(".wes-text-top", { y: 0, duration: 0.6, ease: "back.out(1.2)" }, 12.0);
+      tl.to(".wes-rule", { width: 400, duration: 0.6 }, 12.3);
+      tl.to(".wes-text-bottom", { y: 0, duration: 0.6, ease: "back.out(1.2)" }, 12.6);
+      tl.to("#scene-5", { opacity: 0, duration: 0.5 }, 13.0);
+
+      // --- Scene 6: Vignelli Style (13.5s - 14.72s) ---
+      tl.set(video, { opacity: 1 }, 13.5);
+      tl.set("#scene-6", { opacity: 1 }, 13.5);
+      tl.set("#scene-6-overlay", { opacity: 1 }, 13.5);
+
+      tl.to("#scene-6-overlay", { opacity: 0.6, duration: 0.4 }, 13.5);
+
+      tl.to(".vignelli-title", { opacity: 1, duration: 0.5 }, 13.8);
+      tl.to(".vignelli-subtitle", { opacity: 1, duration: 0.5 }, 14.0);
+      tl.to(".vignelli-rule", { width: 300, duration: 0.4 }, 14.2);
+
+      tl.to("#scene-6-overlay", { opacity: 0, duration: 0.3 }, 14.4);
+
+      tl.set("#black-out", { opacity: 1 }, 14.7);
+
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main-graphics"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/packages/cli/src/templates/kinetic-type/index.html b/packages/cli/src/templates/kinetic-type/index.html
new file mode 100644
index 00000000000..9f76789f7ac
--- /dev/null
+++ b/packages/cli/src/templates/kinetic-type/index.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HyperFrames Promo</title>
+    <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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f; /* Black canvas */
+        font-family:
+          "Inter",
+          -apple-system,
+          sans-serif;
+        position: relative;
+      }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  </head>
+  <body>
+    <div
+      id="root-comp"
+      data-composition-id="promo-video"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="14.72"
+    >
+      <!-- The audio track -->
+      <audio
+        id="main-audio"
+        src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/67cf5a05_e134ec83a57042b38776c952da595870.mp4"
+        data-start="0"
+        data-track-index="0"
+      ></audio>
+
+      <div
+        id="graphics-layer"
+        data-composition-id="main-graphics"
+        data-composition-src="compositions/main-graphics.html"
+        data-start="0"
+        data-track-index="1"
+      ></div>
+
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["promo-video"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html b/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
new file mode 100644
index 00000000000..ffc6e74d44d
--- /dev/null
+++ b/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
@@ -0,0 +1,447 @@
+<template id="nyt-chart-template">
+  <div data-composition-id="nyt-chart" data-width="1920" data-height="1080" data-duration="15">
+    <!-- Google Fonts Import -->
+    <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=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <div class="chart-container">
+      <!-- Header Section -->
+      <div class="header">
+        <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
+        <p class="subtitle">Jan–Jun 2024, in thousands</p>
+        <div class="key">
+          <div class="key-item">
+            <div class="key-box revenue-box"></div>
+            <span class="key-text">Revenue</span>
+          </div>
+          <div class="key-item">
+            <div class="key-line conversion-line"></div>
+            <span class="key-text">Conversion Rate</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- SVG Chart Area -->
+      <svg class="chart-svg" viewBox="0 0 1600 700" preserveAspectRatio="xMidYMid meet">
+        <!-- Gridlines Group -->
+        <g class="gridlines"></g>
+
+        <!-- X-Axis Labels -->
+        <g class="x-axis-labels"></g>
+
+        <!-- Bars Group (Revenue) -->
+        <g class="bars-group"></g>
+
+        <!-- Bar Labels Group -->
+        <g class="bar-labels-group"></g>
+
+        <!-- Line Group (Conversion Rate) -->
+        <g class="line-group">
+          <path class="conversion-path" fill="none" stroke="#326FA8" stroke-width="1.5" />
+          <circle class="line-dot" r="5" fill="#326FA8" style="opacity: 0" />
+        </g>
+
+        <!-- Line Labels Group -->
+        <g class="line-labels-group"></g>
+
+        <!-- Baseline -->
+        <line x1="100" y1="600" x2="1500" y2="600" stroke="black" stroke-width="1" />
+      </svg>
+
+      <!-- Source Line -->
+      <div class="source">Source: Internal analytics</div>
+    </div>
+
+    <style>
+      [data-composition-id="nyt-chart"] {
+        width: 1920px;
+        height: 1080px;
+        background-color: #faf9f6;
+        font-family: "Libre Franklin", sans-serif;
+        color: #333;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      [data-composition-id="nyt-chart"] .chart-container {
+        width: 1600px;
+        height: 900px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        transform: scale(1.15);
+        transform-origin: center center;
+      }
+
+      [data-composition-id="nyt-chart"] .header {
+        margin-bottom: 40px;
+        text-align: left;
+      }
+
+      [data-composition-id="nyt-chart"] .headline {
+        font-family: "Libre Baskerville", serif;
+        font-size: 42px;
+        margin: 0;
+        padding: 0;
+        clip-path: inset(0 100% 0 0);
+        white-space: nowrap;
+      }
+
+      [data-composition-id="nyt-chart"] .subtitle {
+        font-size: 16px;
+        color: #d4d4d4;
+        margin: 8px 0 16px 0;
+        clip-path: inset(0 100% 0 0);
+        white-space: nowrap;
+      }
+
+      [data-composition-id="nyt-chart"] .key {
+        display: flex;
+        gap: 24px;
+        opacity: 0;
+      }
+
+      [data-composition-id="nyt-chart"] .key-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="nyt-chart"] .key-box {
+        width: 10px;
+        height: 10px;
+        background-color: #5c5c5c;
+      }
+
+      [data-composition-id="nyt-chart"] .key-line {
+        width: 16px;
+        height: 1.5px;
+        background-color: #326fa8;
+      }
+
+      [data-composition-id="nyt-chart"] .key-text {
+        font-size: 13px;
+        color: #666;
+      }
+
+      [data-composition-id="nyt-chart"] .chart-svg {
+        width: 100%;
+        height: 600px;
+        overflow: visible;
+      }
+
+      [data-composition-id="nyt-chart"] .source {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        font-size: 11px;
+        color: #999;
+        opacity: 0;
+      }
+
+      [data-composition-id="nyt-chart"] .grid-line {
+        stroke: #e8e8e8;
+        stroke-width: 0.5px;
+        opacity: 0;
+      }
+
+      [data-composition-id="nyt-chart"] .axis-label {
+        font-size: 14px;
+        fill: #666;
+        text-anchor: middle;
+      }
+
+      [data-composition-id="nyt-chart"] .bar {
+        fill: #5c5c5c;
+      }
+
+      [data-composition-id="nyt-chart"] .bar-label {
+        font-size: 14px;
+        fill: #333;
+        text-anchor: middle;
+        opacity: 0;
+      }
+
+      [data-composition-id="nyt-chart"] .line-label {
+        font-size: 14px;
+        fill: #326fa8;
+        font-weight: 600;
+        text-anchor: middle;
+        opacity: 0;
+      }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script>
+      (function () {
+        const compId = "nyt-chart";
+        const tl = gsap.timeline({ paused: true });
+
+        // Data
+        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+        const revenueData = [8, 12, 15, 11, 18, 22]; // in thousands
+        const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2]; // in percentage
+
+        // Chart Dimensions
+        const chartWidth = 1400;
+        const chartHeight = 500;
+        const startX = 100;
+        const startY = 600;
+        const barWidth = 80;
+        const spacing = (chartWidth - barWidth * months.length) / (months.length + 1);
+
+        // Scales
+        const maxRevenue = 25;
+        const maxConversion = 5;
+
+        const getBarY = (val) => startY - (val / maxRevenue) * chartHeight;
+        const getLineY = (val) => startY - (val / maxConversion) * chartHeight;
+        const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;
+
+        // 1. Setup Elements
+        const svg = document.querySelector(`[data-composition-id="${compId}"] .chart-svg`);
+        const gridGroup = svg.querySelector(".gridlines");
+        const xAxisGroup = svg.querySelector(".x-axis-labels");
+        const barsGroup = svg.querySelector(".bars-group");
+        const barLabelsGroup = svg.querySelector(".bar-labels-group");
+        const lineLabelsGroup = svg.querySelector(".line-labels-group");
+        const conversionPath = svg.querySelector(".conversion-path");
+        const lineDot = svg.querySelector(".line-dot");
+
+        // Create Gridlines (5 lines)
+        for (let i = 1; i <= 5; i++) {
+          const y = startY - i * (chartHeight / 5);
+          const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+          line.setAttribute("x1", startX);
+          line.setAttribute("y1", y);
+          line.setAttribute("x2", startX + chartWidth);
+          line.setAttribute("y2", y);
+          line.setAttribute("class", "grid-line");
+          gridGroup.appendChild(line);
+        }
+
+        // Create X-Axis Labels & Bars & Bar Labels
+        const linePoints = [];
+        months.forEach((month, i) => {
+          const x = getX(i);
+
+          // X-Axis Label
+          const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          label.setAttribute("x", x);
+          label.setAttribute("y", startY + 30);
+          label.setAttribute("class", "axis-label");
+          label.textContent = month;
+          xAxisGroup.appendChild(label);
+
+          // Bar
+          const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
+          const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+          bar.setAttribute("x", x - barWidth / 2);
+          bar.setAttribute("y", startY);
+          bar.setAttribute("width", barWidth);
+          bar.setAttribute("height", 0);
+          bar.setAttribute("class", "bar");
+          barsGroup.appendChild(bar);
+
+          // Bar Label
+          const barLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          barLabel.setAttribute("x", x);
+          barLabel.setAttribute("y", getBarY(revenueData[i]) - 10);
+          barLabel.setAttribute("class", "bar-label");
+          barLabel.textContent = `$${revenueData[i]}K`;
+          barLabelsGroup.appendChild(barLabel);
+
+          // Line Point
+          linePoints.push(`${x},${getLineY(conversionData[i])}`);
+
+          // Line Label
+          const lineLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          lineLabel.setAttribute("x", x);
+          lineLabel.setAttribute("y", getLineY(conversionData[i]) - 15);
+          lineLabel.setAttribute("class", "line-label");
+          lineLabel.textContent = `${conversionData[i]}%`;
+          lineLabelsGroup.appendChild(lineLabel);
+        });
+
+        // Set Path Data
+        conversionPath.setAttribute("d", `M ${linePoints.join(" L ")}`);
+        const pathLength = conversionPath.getTotalLength();
+        conversionPath.style.strokeDasharray = pathLength;
+        conversionPath.style.strokeDashoffset = pathLength;
+
+        // --- ANIMATION TIMELINE ---
+
+        // 2. Headline & Subtitle (Draw on left-to-right)
+        tl.to(
+          `[data-composition-id="${compId}"] .headline`,
+          {
+            clipPath: "inset(0 0% 0 0)",
+            duration: 1.2,
+            ease: "power1.inOut",
+          },
+          0,
+        );
+
+        tl.to(
+          `[data-composition-id="${compId}"] .subtitle`,
+          {
+            clipPath: "inset(0 0% 0 0)",
+            duration: 1.2,
+            ease: "power1.inOut",
+          },
+          0.2,
+        );
+
+        // 3. Inline Key
+        tl.to(
+          `[data-composition-id="${compId}"] .key`,
+          {
+            opacity: 1,
+            duration: 0.4,
+            ease: "power2.out",
+          },
+          1.0,
+        );
+
+        // 4. Gridlines (Stagger bottom to top)
+        tl.to(
+          `[data-composition-id="${compId}"] .grid-line`,
+          {
+            opacity: 1,
+            duration: 0.5,
+            stagger: 0.25,
+            ease: "power2.out",
+          },
+          0.5,
+        );
+
+        // 5. Bars (Revenue)
+        const bars = barsGroup.querySelectorAll(".bar");
+        const barLabels = barLabelsGroup.querySelectorAll(".bar-label");
+
+        bars.forEach((bar, i) => {
+          const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
+          const startTime = 1.5 + i * 0.5; // 0.8s duration, 0.3s overlap (0.8 - 0.3 = 0.5 step)
+
+          tl.to(
+            bar,
+            {
+              attr: {
+                height: barHeight,
+                y: startY - barHeight,
+              },
+              duration: 0.8,
+              ease: "power2.out",
+            },
+            startTime,
+          );
+
+          // 6. Bar Labels
+          tl.to(
+            barLabels[i],
+            {
+              opacity: 1,
+              duration: 0.3,
+              ease: "power2.out",
+            },
+            startTime + 0.8,
+          );
+        });
+
+        // 7. Line (Conversion Rate)
+        // Starts 0.5s after the last bar begins
+        const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;
+        const lineStartTime = lastBarStartTime + 0.5;
+
+        tl.to(
+          conversionPath,
+          {
+            strokeDashoffset: 0,
+            duration: 3,
+            ease: "none",
+          },
+          lineStartTime,
+        );
+
+        // 8. Line Dot & 9. Line Labels
+        // We need to sync the dot and labels with the path drawing
+        tl.set(
+          lineDot,
+          { opacity: 1, attr: { cx: getX(0), cy: getLineY(conversionData[0]) } },
+          lineStartTime,
+        );
+
+        const lineLabels = lineLabelsGroup.querySelectorAll(".line-label");
+        months.forEach((_, i) => {
+          if (i > 0) {
+            const x = getX(i);
+            const y = getLineY(conversionData[i]);
+            tl.to(
+              lineDot,
+              {
+                attr: {
+                  cx: x,
+                  cy: y,
+                },
+                duration: 3 / (months.length - 1),
+                ease: "none",
+              },
+              lineStartTime + ((i - 1) / (months.length - 1)) * 3,
+            );
+          }
+
+          const labelTime = lineStartTime + (i / (months.length - 1)) * 3 + 0.2;
+
+          // Set initial text to 0.0%
+          lineLabels[i].textContent = "0.0%";
+
+          // Fade in
+          tl.to(
+            lineLabels[i],
+            {
+              opacity: 1,
+              duration: 0.1,
+              ease: "power2.out",
+            },
+            labelTime,
+          );
+
+          // Animate value
+          const dummy = { val: 0 };
+          tl.to(
+            dummy,
+            {
+              val: conversionData[i],
+              duration: 0.8,
+              ease: "power2.out",
+              onUpdate: () => {
+                lineLabels[i].textContent = dummy.val.toFixed(1) + "%";
+              },
+            },
+            labelTime,
+          );
+        });
+
+        // 11. Source Line
+        tl.to(
+          `[data-composition-id="${compId}"] .source`,
+          {
+            opacity: 1,
+            duration: 0.5,
+            ease: "power2.out",
+          },
+          ">+0.5",
+        );
+
+        // Register timeline
+        window.__timelines[compId] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/cli/src/templates/nyt-graph/index.html b/packages/cli/src/templates/nyt-graph/index.html
new file mode 100644
index 00000000000..4de0bf5eee1
--- /dev/null
+++ b/packages/cli/src/templates/nyt-graph/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>NYT Print Chart</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        background-color: #faf9f6;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #root {
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main-video"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="15"
+    >
+      <div
+        id="chart-1"
+        data-composition-id="nyt-chart"
+        data-composition-src="compositions/nyt-chart.html"
+        data-start="0"
+        data-track-index="0"
+      ></div>
+
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main-video"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/packages/cli/src/templates/product-promo/assets/figma-cursors.svg b/packages/cli/src/templates/product-promo/assets/figma-cursors.svg
new file mode 100644
index 00000000000..65d99f1b00a
--- /dev/null
+++ b/packages/cli/src/templates/product-promo/assets/figma-cursors.svg
@@ -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>
\ No newline at end of file
diff --git a/packages/cli/src/templates/product-promo/assets/figma-logo-pieces.svg b/packages/cli/src/templates/product-promo/assets/figma-logo-pieces.svg
new file mode 100644
index 00000000000..c98cb21c2cb
--- /dev/null
+++ b/packages/cli/src/templates/product-promo/assets/figma-logo-pieces.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>
\ No newline at end of file
diff --git a/packages/cli/src/templates/product-promo/assets/figma-logo-pills.svg b/packages/cli/src/templates/product-promo/assets/figma-logo-pills.svg
new file mode 100644
index 00000000000..0745b168330
--- /dev/null
+++ b/packages/cli/src/templates/product-promo/assets/figma-logo-pills.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>
\ No newline at end of file
diff --git a/packages/cli/src/templates/product-promo/compositions/scene1-logo-intro.html b/packages/cli/src/templates/product-promo/compositions/scene1-logo-intro.html
new file mode 100644
index 00000000000..3e957fb8a47
--- /dev/null
+++ b/packages/cli/src/templates/product-promo/compositions/scene1-logo-intro.html
@@ -0,0 +1,189 @@
+<template id="scene1-logo-intro-template">
+  <div
+    data-composition-id="scene1-logo-intro"
+    data-width="1920"
+    data-height="1080"
+    data-duration="1.5"
+  >
+    <div class="canvas">
+      <!-- Logo Container -->
+      <div class="logo-container">
+        <svg viewBox="0 0 160 240" width="160" height="240">
+          <!-- Figma Logo Pieces -->
+          <!-- Top-left: Red (F24E1E) -->
+          <path
+            class="logo-piece logo-tl"
+            d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
+            fill="#F24E1E"
+          />
+          <!-- Top-right: Purple (A259FF) -->
+          <path
+            class="logo-piece logo-tr"
+            d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
+            fill="#A259FF"
+          />
+          <!-- Middle-left: Pink (FF7262) -->
+          <path
+            class="logo-piece logo-ml"
+            d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
+            fill="#FF7262"
+          />
+          <!-- Middle-right: Blue (1ABCFE) -->
+          <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
+          <!-- Bottom-left: Green (0ACF83) -->
+          <path
+            class="logo-piece logo-bl"
+            d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
+            fill="#0ACF83"
+          />
+        </svg>
+      </div>
+
+      <!-- Expanding Ring -->
+      <div class="ring-container">
+        <svg viewBox="0 0 400 400" width="400" height="400">
+          <circle
+            class="ring"
+            cx="200"
+            cy="200"
+            r="80"
+            fill="none"
+            stroke="#FFFFFF"
+            stroke-width="4"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <style>
+      [data-composition-id="scene1-logo-intro"] .canvas {
+        width: 1920px;
+        height: 1080px;
+        background-color: #0a0a0f;
+        position: relative;
+        overflow: hidden;
+      }
+
+      [data-composition-id="scene1-logo-intro"] .logo-container {
+        position: absolute;
+        left: 880px; /* Center X: 960 - 80 */
+        top: 420px; /* Center Y: 540 - 120 */
+        width: 160px;
+        height: 240px;
+        transform-origin: center center;
+      }
+
+      [data-composition-id="scene1-logo-intro"] .ring-container {
+        position: absolute;
+        left: 760px; /* 960 - 200 */
+        top: 340px; /* 540 - 200 */
+        width: 400px;
+        height: 400px;
+        pointer-events: none;
+      }
+
+      [data-composition-id="scene1-logo-intro"] .ring {
+        transform-origin: center center;
+        opacity: 0;
+      }
+    </style>
+
+    <script>
+      (function () {
+        const tl = gsap.timeline({ paused: true });
+
+        const pieces = {
+          tl: '[data-composition-id="scene1-logo-intro"] .logo-tl',
+          tr: '[data-composition-id="scene1-logo-intro"] .logo-tr',
+          ml: '[data-composition-id="scene1-logo-intro"] .logo-ml',
+          mr: '[data-composition-id="scene1-logo-intro"] .logo-mr',
+          bl: '[data-composition-id="scene1-logo-intro"] .logo-bl',
+        };
+
+        const ring = '[data-composition-id="scene1-logo-intro"] .ring';
+        const logoContainer = '[data-composition-id="scene1-logo-intro"] .logo-container';
+
+        // Initial positions: Corners of the screen
+        // Viewport is 1920x1080. Center is 960, 540.
+        // logo-container is at 880, 420.
+
+        tl.set(pieces.tl, { x: -960, y: -540 });
+        tl.set(pieces.tr, { x: 960, y: -540 });
+        tl.set(pieces.ml, { x: -960, y: 0 });
+        tl.set(pieces.mr, { x: 960, y: 0 });
+        tl.set(pieces.bl, { x: -960, y: 540 });
+
+        // 1. Converge to center with 3-frame stagger (approx 0.05s at 60fps)
+        // 2. Collide with slight bounce (overshoot 1.1x)
+        const convergeDuration = 0.6;
+        const stagger = 0.05;
+
+        const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
+
+        pieceArray.forEach((piece, i) => {
+          tl.to(
+            piece,
+            {
+              x: 0,
+              y: 0,
+              duration: convergeDuration,
+              ease: "back.out(1.1)",
+            },
+            i * stagger,
+          );
+        });
+
+        // 3. On collision (approx at 0.6 + 4*0.05 = 0.8s), white ring expands
+        const collisionTime = convergeDuration + (pieceArray.length - 1) * stagger;
+
+        tl.fromTo(
+          ring,
+          { scale: 0.2, opacity: 1 },
+          {
+            scale: 2.5,
+            opacity: 0,
+            duration: 0.4,
+            ease: "power2.out",
+          },
+          collisionTime,
+        );
+
+        // 4. Logo pulses slightly
+        tl.to(
+          logoContainer,
+          {
+            scale: 1.05,
+            duration: 0.15,
+            ease: "power2.out",
+          },
+          collisionTime,
+        );
+
+        tl.to(
+          logoContainer,
+          {
+            scale: 1,
+            duration: 0.15,
+            ease: "power2.in",
+          },
+          collisionTime + 0.15,
+        );
+
+        // 5. Scale down to 0
+        tl.to(
+          logoContainer,
+          {
+            scale: 0,
+            duration: 0.3,
+            ease: "expo.in",
+            delay: 0.1,
+          },
+          collisionTime + 0.3,
+        );
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["scene1-logo-intro"] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/cli/src/templates/product-promo/compositions/scene2-4-canvas.html b/packages/cli/src/templates/product-promo/compositions/scene2-4-canvas.html
new file mode 100644
index 00000000000..7bba94f3fcb
--- /dev/null
+++ b/packages/cli/src/templates/product-promo/compositions/scene2-4-canvas.html
@@ -0,0 +1,570 @@
+<template id="scene2-4-canvas-template">
+  <div
+    data-composition-id="scene2-4-canvas"
+    data-width="1920"
+    data-height="1080"
+    data-duration="12.5"
+  >
+    <div class="canvas">
+      <div class="dot-grid"></div>
+
+      <!-- Web Frame -->
+      <div class="web-frame">
+        <div class="ui-content">
+          <div class="nav-bar">
+            <div class="nav-logo"></div>
+            <div class="nav-links">
+              <div class="nav-link"></div>
+              <div class="nav-link"></div>
+              <div class="nav-link"></div>
+            </div>
+          </div>
+          <div class="hero-section">
+            <h1 class="hero-heading">Design without limits</h1>
+            <div class="subtitle-lines">
+              <div class="subtitle-line"></div>
+              <div class="subtitle-line"></div>
+            </div>
+            <div class="cta-button">Get Started</div>
+          </div>
+        </div>
+        <!-- Dimension Labels -->
+        <div class="dimension-label width-label">1440</div>
+        <div class="dimension-label height-label">900</div>
+        <!-- Selection Handles (Engineer) -->
+        <div class="selection-handles">
+          <div class="handle tl"></div>
+          <div class="handle tr"></div>
+          <div class="handle bl"></div>
+          <div class="handle br"></div>
+        </div>
+      </div>
+
+      <!-- Assets Panel -->
+      <div class="assets-panel">
+        <div class="panel-header">Assets</div>
+        <div class="asset-list">
+          <div class="asset-item">
+            <span class="asset-icon">◆</span>
+            <span class="asset-text">Button/Primary</span>
+          </div>
+          <div class="asset-item">
+            <span class="asset-icon">◆</span>
+            <span class="asset-text">Card/Product</span>
+          </div>
+          <div class="asset-item">
+            <span class="asset-icon">◆</span>
+            <span class="asset-text">Nav/Header</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Draggable Component (Scene 4) -->
+      <div class="dragged-card">
+        <div class="card-content"></div>
+      </div>
+
+      <!-- Stamped Cards (Scene 4) -->
+      <div class="stamped-cards">
+        <div class="stamped-card card-1"></div>
+        <div class="stamped-card card-2"></div>
+        <div class="stamped-card card-3"></div>
+      </div>
+
+      <!-- Comment Pin & Bubble -->
+      <div class="comment-container">
+        <div class="comment-pin">
+          <div class="checkmark">✓</div>
+        </div>
+        <div class="comment-bubble">
+          <div class="comment-text"></div>
+        </div>
+      </div>
+
+      <!-- Cursors -->
+      <div class="cursor designer-cursor">
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <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="black" />
+        </svg>
+        <div class="cursor-label">Designer</div>
+      </div>
+      <div class="cursor engineer-cursor">
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <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="black" />
+        </svg>
+        <div class="cursor-label">Engineer</div>
+      </div>
+      <div class="cursor pm-cursor">
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <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="black" />
+        </svg>
+        <div class="cursor-label">PM</div>
+      </div>
+    </div>
+
+    <style>
+      [data-composition-id="scene2-4-canvas"] {
+        background-color: #1e1e1e;
+        font-family: "Inter", sans-serif;
+        color: white;
+        overflow: hidden;
+      }
+
+      .canvas {
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+
+      .dot-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: radial-gradient(#2c2c2c 1px, transparent 1px);
+        background-size: 24px 24px;
+      }
+
+      .web-frame {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 1440px;
+        height: 900px;
+        transform: translate(-50%, -50%) scale(0);
+        background: white;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+        overflow: hidden;
+        opacity: 0;
+      }
+
+      .ui-content {
+        width: 100%;
+        height: 100%;
+        background: white;
+        display: flex;
+        flex-direction: column;
+        opacity: 0;
+      }
+
+      .nav-bar {
+        height: 80px;
+        padding: 0 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #e6e6e6;
+      }
+
+      .nav-logo {
+        width: 40px;
+        height: 40px;
+        background: #a259ff;
+        border-radius: 8px;
+        opacity: 0.8;
+      }
+
+      .nav-links {
+        display: flex;
+        gap: 32px;
+      }
+
+      .nav-link {
+        width: 80px;
+        height: 12px;
+        background: #cccccc;
+        border-radius: 6px;
+      }
+
+      .hero-section {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 100px;
+        transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+
+      .hero-heading {
+        font-size: 84px;
+        font-weight: 800;
+        color: #1e1e1e;
+        margin-bottom: 24px;
+        opacity: 0;
+        letter-spacing: -0.02em;
+        transform-origin: center;
+      }
+
+      .subtitle-lines {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 48px;
+        transform-origin: center;
+      }
+
+      .subtitle-line {
+        width: 400px;
+        height: 16px;
+        background: #e6e6e6;
+        border-radius: 8px;
+        opacity: 0;
+      }
+
+      .cta-button {
+        padding: 20px 48px;
+        background: #0acf83;
+        color: white;
+        font-size: 24px;
+        font-weight: 600;
+        border-radius: 12px;
+        opacity: 0;
+        position: relative;
+        transform-origin: center;
+      }
+
+      .dimension-label {
+        position: absolute;
+        background: #1abcfe;
+        color: white;
+        padding: 4px 8px;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius: 4px;
+        transform: scale(0);
+      }
+
+      .width-label {
+        top: -30px;
+        left: 50%;
+        transform: translateX(-50%) scale(0);
+      }
+
+      .height-label {
+        right: -45px;
+        top: 50%;
+        transform: translateY(-50%) rotate(90deg) scale(0);
+      }
+
+      .selection-handles {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        opacity: 0;
+      }
+
+      .handle {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        background: white;
+        border: 2px solid #1abcfe;
+        border-radius: 2px;
+      }
+
+      .handle.tl {
+        top: -6px;
+        left: -6px;
+      }
+      .handle.tr {
+        top: -6px;
+        right: -6px;
+      }
+      .handle.bl {
+        bottom: -6px;
+        left: -6px;
+      }
+      .handle.br {
+        bottom: -6px;
+        right: -6px;
+      }
+
+      .assets-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 320px;
+        height: 100%;
+        background: rgba(44, 44, 44, 0.9);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border-right: 1px solid rgba(255, 255, 255, 0.1);
+        transform: translateX(-320px);
+        padding: 24px;
+        z-index: 10;
+        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
+      }
+
+      .panel-header {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 32px;
+        color: #aaa;
+      }
+
+      .asset-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        border-radius: 8px;
+        margin-bottom: 8px;
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      .asset-icon {
+        color: #a259ff;
+        font-size: 18px;
+      }
+
+      .asset-text {
+        font-size: 14px;
+        color: #eee;
+      }
+
+      .dragged-card {
+        position: absolute;
+        width: 300px;
+        height: 200px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        opacity: 0;
+        transform: scale(0.9);
+        z-index: 20;
+        pointer-events: none;
+      }
+
+      .card-content {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, #f0f0f0, #fff);
+        border-radius: 12px;
+      }
+
+      .stamped-cards {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 1440px;
+        height: 900px;
+        pointer-events: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 40px;
+      }
+
+      .stamped-card {
+        position: relative;
+        width: 300px;
+        height: 200px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        opacity: 0;
+        transform: translateY(50px);
+      }
+
+      .card-1,
+      .card-2,
+      .card-3 {
+        top: auto;
+        left: auto;
+      }
+
+      .comment-container {
+        position: absolute;
+        top: 420px;
+        left: 960px;
+        z-index: 30;
+        opacity: 0;
+      }
+
+      .comment-pin {
+        width: 32px;
+        height: 32px;
+        background: #f24e1e;
+        border-radius: 16px 16px 16px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+        transform-origin: bottom left;
+      }
+
+      .checkmark {
+        color: white;
+        font-size: 18px;
+        font-weight: bold;
+        transform: scale(0);
+      }
+
+      .comment-bubble {
+        position: absolute;
+        left: 40px;
+        top: -20px;
+        background: white;
+        padding: 12px 16px;
+        border-radius: 12px;
+        color: #1e1e1e;
+        font-size: 14px;
+        font-weight: 500;
+        white-space: nowrap;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        opacity: 0;
+        transform: translateX(-10px);
+      }
+
+      .cursor {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        z-index: 100;
+        pointer-events: none;
+      }
+
+      .cursor-label {
+        padding: 4px 8px;
+        font-size: 12px;
+        font-weight: 600;
+        color: white;
+        border-radius: 0 4px 4px 4px;
+        margin-top: -4px;
+        margin-left: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      }
+
+      .designer-cursor .cursor-label {
+        background: #a259ff;
+      }
+      .engineer-cursor .cursor-label {
+        background: #1abcfe;
+      }
+      .pm-cursor .cursor-label {
+        background: #f24e1e;
+      }
+    </style>
+
+    <script>
+      (function () {
+        const tl = gsap.timeline({ paused: true });
+
+        // Organic Cursor Ease
+        const cursorEase = "back.out(1.2)";
+
+        gsap.set(".designer-cursor", { x: 200, y: 200 });
+        gsap.set(".engineer-cursor", { x: -100, y: 500 });
+        gsap.set(".pm-cursor", { x: 2000, y: 1100 });
+
+        // Designer enters
+        tl.to(".designer-cursor", { x: 960, y: 540, duration: 1.0, ease: cursorEase }, 0);
+
+        // Frame appears
+        tl.to(".web-frame", { opacity: 1, scale: 1, duration: 0.6, ease: "back.out(1.4)" }, 0.5);
+
+        // UI Stagger
+        tl.to(".ui-content", { opacity: 1, duration: 0.4 }, 1.0);
+        tl.to(".hero-heading", { opacity: 1, y: 0, duration: 0.7, ease: "back.out(1.2)" }, 1.2);
+        tl.to(
+          ".subtitle-line",
+          { opacity: 1, y: 0, duration: 0.5, stagger: 0.08, ease: "power2.out" },
+          1.4,
+        );
+        tl.to(".cta-button", { opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.7)" }, 1.7);
+
+        // Labels
+        tl.to(".width-label", { scale: 1, duration: 0.4, ease: "back.out(2)" }, 1.9);
+        tl.to(".height-label", { scale: 1, rotation: 90, duration: 0.4, ease: "back.out(2)" }, 2.0);
+
+        // Collaboration
+        tl.to(".engineer-cursor", { x: 400, y: 400, duration: 1.2, ease: cursorEase }, 3.5);
+        tl.to(".pm-cursor", { x: 1500, y: 800, duration: 1.5, ease: cursorEase }, 3.7);
+        tl.to(".engineer-cursor", { x: 960, y: 680, duration: 0.9, ease: cursorEase }, 4.5);
+        tl.to(".selection-handles", { opacity: 1, duration: 0.2 }, 5.3);
+        tl.to(".cta-button", { outline: "2px solid #1ABCFE", duration: 0.1 }, 5.3);
+
+        tl.to(".pm-cursor", { x: 960, y: 420, duration: 1.1, ease: cursorEase }, 5.5);
+        tl.to(".comment-container", { opacity: 1, duration: 0.1 }, 6.5);
+        tl.from(".comment-pin", { scale: 0, duration: 0.5, ease: "back.out(1.2)" }, 6.5);
+        tl.to(".comment-bubble", { opacity: 1, x: 0, duration: 0.4, ease: "back.out(1.5)" }, 6.9);
+
+        const commentText = "Let's use the product shot here";
+        const textObj = { val: 0 };
+        tl.to(
+          textObj,
+          {
+            val: commentText.length,
+            duration: commentText.length / 30,
+            ease: "none",
+            onUpdate: () => {
+              const el = document.querySelector(
+                '[data-composition-id="scene2-4-canvas"] .comment-text',
+              );
+              if (el) el.innerText = commentText.substring(0, Math.ceil(textObj.val));
+            },
+          },
+          7.1,
+        );
+
+        // Assets Panel
+        tl.to(".assets-panel", { x: 0, duration: 0.4, ease: "power3.out" }, 8.0);
+        tl.to(".engineer-cursor", { x: 160, y: 150, duration: 0.7, ease: cursorEase }, 8.3);
+        tl.to(".dragged-card", { opacity: 1, scale: 1, x: 160, y: 150, duration: 0.2 }, 8.9);
+        tl.to(
+          [".engineer-cursor", ".dragged-card"],
+          { x: 960, y: 700, duration: 0.9, ease: cursorEase },
+          9.1,
+        );
+
+        // Reformat UI as card is dragged in
+        tl.to(".hero-section", { y: -150, duration: 0.8, ease: "power3.inOut" }, 9.1);
+        tl.to(".hero-heading", { scale: 0.8, duration: 0.8, ease: "power3.inOut" }, 9.1);
+        tl.to(".subtitle-lines", { scale: 0.8, duration: 0.8, ease: "power3.inOut" }, 9.1);
+        tl.to(".cta-button", { scale: 0.8, duration: 0.8, ease: "power3.inOut" }, 9.1);
+
+        // Stamping into Grid/Row
+        tl.to(".stamped-cards", { y: 200, duration: 0.1 }, 9.1); // Position the container
+        tl.to(".card-1", { opacity: 1, y: 0, duration: 0.6, ease: "back.out(1.5)" }, 9.9);
+        tl.to(".card-2", { opacity: 1, y: 0, duration: 0.6, ease: "back.out(1.5)" }, 10.1);
+        tl.to(".card-3", { opacity: 1, y: 0, duration: 0.6, ease: "back.out(1.5)" }, 10.3);
+
+        tl.to(".dragged-card", { opacity: 0, scale: 0.8, duration: 0.2 }, 10.5);
+        tl.to(".checkmark", { scale: 1, duration: 0.4, ease: "back.out(1.8)" }, 10.7);
+        tl.to(".comment-pin", { backgroundColor: "#0ACF83", duration: 0.3 }, 10.7);
+        tl.to(".assets-panel", { x: -320, duration: 0.4, ease: "power3.in" }, 11.5);
+
+        // Scene 5 Transition: Wipe everything to the left
+        tl.to(
+          [
+            ".web-frame",
+            ".cursor",
+            ".dragged-card",
+            ".stamped-cards",
+            ".comment-container",
+            ".assets-panel",
+          ],
+          {
+            x: -2000,
+            duration: 0.5,
+            ease: "expo.in",
+            stagger: 0.02,
+          },
+          12.0,
+        );
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["scene2-4-canvas"] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/cli/src/templates/product-promo/compositions/scene5-logo-outro.html b/packages/cli/src/templates/product-promo/compositions/scene5-logo-outro.html
new file mode 100644
index 00000000000..85ed4c8eb46
--- /dev/null
+++ b/packages/cli/src/templates/product-promo/compositions/scene5-logo-outro.html
@@ -0,0 +1,226 @@
+<template id="scene5-logo-outro-template">
+  <div
+    data-composition-id="scene5-logo-outro"
+    data-width="1920"
+    data-height="1080"
+    data-duration="6"
+  >
+    <div class="canvas">
+      <!-- Glow effect behind the logo -->
+      <div class="logo-glow"></div>
+
+      <!-- Logo Container -->
+      <div class="logo-container">
+        <svg viewBox="0 0 160 240" width="160" height="240" class="logo-svg">
+          <!-- Figma Logo Pieces -->
+          <!-- Top-left: Red (#F24E1E) -->
+          <path
+            class="logo-piece logo-tl"
+            d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
+            fill="#F24E1E"
+          />
+          <!-- Top-right: Purple (#A259FF) -->
+          <path
+            class="logo-piece logo-tr"
+            d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
+            fill="#A259FF"
+          />
+          <!-- Middle-left: Pink (#FF7262) -->
+          <path
+            class="logo-piece logo-ml"
+            d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
+            fill="#FF7262"
+          />
+          <!-- Middle-right: Blue (#1ABCFE) -->
+          <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
+          <!-- Bottom-left: Green (#0ACF83) -->
+          <path
+            class="logo-piece logo-bl"
+            d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
+            fill="#0ACF83"
+          />
+        </svg>
+      </div>
+
+      <div class="text-container">
+        <div class="tagline">Nothing great is made alone.</div>
+        <div class="url-pill">
+          <span class="url-text">figma.com</span>
+        </div>
+      </div>
+    </div>
+
+    <style>
+      [data-composition-id="scene5-logo-outro"] .canvas {
+        width: 1920px;
+        height: 1080px;
+        background: #0a0a0f;
+        position: relative;
+        overflow: hidden;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="scene5-logo-outro"] .logo-container {
+        position: absolute;
+        left: 880px; /* Center X: 960 - 80 */
+        top: 380px; /* Adjusted for tagline space: 540 - 120 - 40 */
+        width: 160px;
+        height: 240px;
+        z-index: 2;
+      }
+
+      [data-composition-id="scene5-logo-outro"] .logo-piece {
+        transform-origin: center center;
+        opacity: 0;
+      }
+
+      [data-composition-id="scene5-logo-outro"] .logo-glow {
+        position: absolute;
+        left: 760px; /* 960 - 200 */
+        top: 300px; /* 500 - 200 */
+        width: 400px;
+        height: 400px;
+        background: radial-gradient(circle, rgba(162, 89, 255, 0.25) 0%, rgba(10, 10, 15, 0) 70%);
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 1;
+      }
+
+      [data-composition-id="scene5-logo-outro"] .text-container {
+        position: absolute;
+        top: 720px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        z-index: 3;
+      }
+
+      [data-composition-id="scene5-logo-outro"] .tagline {
+        font-size: 44px;
+        font-weight: 500;
+        color: white;
+        opacity: 0;
+        margin-bottom: 32px;
+        text-align: center;
+      }
+
+      [data-composition-id="scene5-logo-outro"] .url-pill {
+        background: #1a1a1f;
+        border: 1px solid #2c2c2c;
+        border-radius: 100px;
+        padding: 8px 24px;
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-composition-id="scene5-logo-outro"] .url-text {
+        font-size: 18px;
+        color: #666;
+        letter-spacing: 0.5px;
+      }
+    </style>
+
+    <script>
+      (function () {
+        const tl = gsap.timeline({ paused: true });
+
+        const pieces = {
+          tl: '[data-composition-id="scene5-logo-outro"] .logo-tl',
+          tr: '[data-composition-id="scene5-logo-outro"] .logo-tr',
+          ml: '[data-composition-id="scene5-logo-outro"] .logo-ml',
+          mr: '[data-composition-id="scene5-logo-outro"] .logo-mr',
+          bl: '[data-composition-id="scene5-logo-outro"] .logo-bl',
+        };
+
+        const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
+        const logoGlow = '[data-composition-id="scene5-logo-outro"] .logo-glow';
+        const tagline = '[data-composition-id="scene5-logo-outro"] .tagline';
+        const urlPill = '[data-composition-id="scene5-logo-outro"] .url-pill';
+
+        // 1. Pieces slide in from the RIGHT (x: 1920 -> 0) with a ripple stagger (0.08s). Duration: 1.2s.
+        pieceArray.forEach((piece, i) => {
+          tl.fromTo(
+            piece,
+            { x: 1920, opacity: 0 },
+            { x: 0, opacity: 1, duration: 1.2, ease: "power4.out" },
+            i * 0.08,
+          );
+        });
+
+        // 2. Once at the center (960, 540), the pieces should simply EXPAND (scale 1 -> 1.15)
+        // and then CLOSE back to their done state (scale 1.15 -> 1).
+        // NO positional 'explode' or pushing to corners.
+        const expandTime = 1.2; // Start right after the first piece arrives, or after all?
+        // Let's start it after the last piece has arrived or is near arrival for a fluid motion.
+        // The last piece starts at 0.32s and takes 1.2s to arrive (1.52s total).
+        // Let's trigger the expand at 1.2s so it feels like a continuous flow.
+
+        tl.to(
+          pieceArray,
+          {
+            scale: 1.15,
+            duration: 0.5,
+            ease: "back.out(1.7)",
+            stagger: 0.02,
+          },
+          expandTime,
+        );
+
+        tl.to(
+          pieceArray,
+          {
+            scale: 1,
+            duration: 0.4,
+            ease: "power2.inOut",
+          },
+          expandTime + 0.3,
+        );
+
+        // 3. Subtle glow bloom effect (optional but adds polish, keeping it from original as it fits the 'expand')
+        tl.fromTo(
+          logoGlow,
+          { opacity: 0, scale: 0.5 },
+          { opacity: 1, scale: 1.2, duration: 0.4, ease: "power2.out" },
+          expandTime,
+        );
+        tl.to(
+          logoGlow,
+          {
+            opacity: 0,
+            scale: 1.8,
+            duration: 1.2,
+            ease: "power2.out",
+          },
+          expandTime + 0.4,
+        );
+
+        // 4. Tagline and URL pill fade in as before.
+        const textStartTime = expandTime + 0.8;
+        tl.fromTo(
+          tagline,
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 1, ease: "power3.out" },
+          textStartTime,
+        );
+
+        tl.fromTo(
+          urlPill,
+          { opacity: 0, y: 15 },
+          { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" },
+          textStartTime + 0.4,
+        );
+
+        // 5. Remove the final pulse animation. (Omitted)
+        // 6. After they return to the done state, there should be NO MORE movement for the logo. (Ensured)
+
+        // Register timeline
+        window.__timelines = window.__timelines || {};
+        window.__timelines["scene5-logo-outro"] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/cli/src/templates/product-promo/index.html b/packages/cli/src/templates/product-promo/index.html
new file mode 100644
index 00000000000..4666223c6e4
--- /dev/null
+++ b/packages/cli/src/templates/product-promo/index.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080, initial-scale=1.0" />
+    <title>Figma Promo - Collaborate</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0f;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="root"] {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+      }
+
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      /* Lower Third Caption - Centered and Prominent */
+      [data-composition-id="captions"] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 100;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        padding-bottom: 150px;
+        pointer-events: none;
+        box-sizing: border-box;
+      }
+
+      .caption-text-wrapper {
+        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 data-composition-id="root" data-width="1920" data-height="1080" data-duration="20">
+      <!-- Scene 1: Logo Intro -->
+      <div
+        id="scene-1"
+        class="scene"
+        data-composition-src="compositions/scene1-logo-intro.html"
+        data-start="0"
+        data-duration="1.5"
+        data-track-index="1"
+      ></div>
+
+      <!-- Scene 2-4: Continuous Canvas -->
+      <div
+        id="scene-2-4"
+        class="scene"
+        data-composition-src="compositions/scene2-4-canvas.html"
+        data-start="1.5"
+        data-duration="12.5"
+        data-track-index="1"
+      ></div>
+
+      <!-- Scene 5: Logo Outro -->
+      <div
+        id="scene-5"
+        class="scene"
+        data-composition-src="compositions/scene5-logo-outro.html"
+        data-start="14"
+        data-duration="6"
+        data-track-index="1"
+      ></div>
+
+      <!-- Captions Composition -->
+      <div
+        data-composition-id="captions"
+        data-width="1920"
+        data-height="1080"
+        data-start="1.5"
+        data-duration="12.5"
+        data-track-index="2"
+      >
+        <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");
+
+            // Scene 2 start - Slide up reveal
+            tl.to(text, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0);
+
+            // Scene 3 crossfade (at 3.5s into this comp, which is 5s total)
+            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);
+
+            // Scene 4 crossfade (at 8.0s into this comp, which is 9.5s total)
+            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);
+
+            // Exit
+            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 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script>
+      // Main orchestration timeline
+      const mainTl = gsap.timeline({ paused: true });
+
+      // Scene 2-4 transition effects (blur/scale)
+      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 = window.__timelines || {};
+      window.__timelines["root"] = mainTl;
+    </script>
+  </body>
+</html>

From fd71d4d6c77d89cc4cc4869b8ce68d1bc9c8cddb Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Fri, 27 Mar 2026 17:07:49 -0700
Subject: [PATCH 2/3] fix(templates): gsap 3.14.2, composition structure,
 bundler compat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update GSAP from 3.12.2 to 3.14.2 across all templates
- Fix new template index.html structure: proper root wrapper div
  with data-duration, sub-composition refs with data-composition-id
  and data-width/data-height
- Fix nyt-chart: replace template literal variables with hardcoded
  string in querySelector — cheerio css-what parser crashes on them
- Fix nyt-chart: add DOM readiness check for dynamic SVG elements
- Remove external S3 audio URL from kinetic-type
- Move GSAP script to head before usage in all templates
---
 .../src/templates/decision-tree/index.html    | 51 +++++++-----
 .../cli/src/templates/kinetic-type/index.html | 43 +++++-----
 .../nyt-graph/compositions/nyt-chart.html     | 26 ++++---
 .../cli/src/templates/nyt-graph/index.html    | 43 +++++-----
 .../cli/src/templates/play-mode/index.html    |  2 +-
 .../src/templates/product-promo/index.html    | 78 +++++++++----------
 .../swiss-grid/compositions/graphics.html     |  2 +-
 .../cli/src/templates/swiss-grid/index.html   |  2 +-
 .../cli/src/templates/vignelli/index.html     |  2 +-
 .../cli/src/templates/warm-grain/index.html   |  2 +-
 10 files changed, 126 insertions(+), 125 deletions(-)

diff --git a/packages/cli/src/templates/decision-tree/index.html b/packages/cli/src/templates/decision-tree/index.html
index fb6ca2a5775..4695aacaaf8 100644
--- a/packages/cli/src/templates/decision-tree/index.html
+++ b/packages/cli/src/templates/decision-tree/index.html
@@ -2,46 +2,55 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080, initial-scale=1.0" />
+    <meta name="viewport" content="width=1920, height=1080" />
     <title>Decision Tree</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      body,
-      html {
+      * {
         margin: 0;
         padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
+        background: #ffffff;
         font-family: "Inter", sans-serif;
-        background-color: #ffffff;
-      }
-      #composition-container {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
       }
     </style>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <div
-      id="composition-container"
+      id="root"
       data-composition-id="main"
-      data-composition-src="compositions/decision_tree.html"
       data-start="0"
-      data-track-index="0"
+      data-duration="15"
       data-width="1920"
       data-height="1080"
-    ></div>
+    >
+      <div
+        id="decision-tree-comp"
+        data-composition-id="decision-tree"
+        data-composition-src="compositions/decision_tree.html"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
     <script>
       window.__timelines = window.__timelines || {};
-      window.__timelines["main"] = gsap.timeline();
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
     </script>
   </body>
 </html>
diff --git a/packages/cli/src/templates/kinetic-type/index.html b/packages/cli/src/templates/kinetic-type/index.html
index 9f76789f7ac..a00ea20108e 100644
--- a/packages/cli/src/templates/kinetic-type/index.html
+++ b/packages/cli/src/templates/kinetic-type/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HyperFrames Promo</title>
+    <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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;0,900;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=block"
       rel="stylesheet"
     />
     <style>
@@ -16,51 +17,45 @@
         margin: 0;
         padding: 0;
       }
-
+      html,
       body {
+        margin: 0;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background-color: #0a0a0f; /* Black canvas */
+        background-color: #0a0a0f;
         font-family:
           "Inter",
           -apple-system,
           sans-serif;
-        position: relative;
       }
     </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
   </head>
   <body>
     <div
-      id="root-comp"
-      data-composition-id="promo-video"
+      id="root"
+      data-composition-id="main"
       data-start="0"
+      data-duration="15"
       data-width="1920"
       data-height="1080"
-      data-duration="14.72"
     >
-      <!-- The audio track -->
-      <audio
-        id="main-audio"
-        src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/67cf5a05_e134ec83a57042b38776c952da595870.mp4"
-        data-start="0"
-        data-track-index="0"
-      ></audio>
-
       <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"
       ></div>
-
-      <script>
-        const tl = gsap.timeline({ paused: true });
-        window.__timelines = window.__timelines || {};
-        window.__timelines["promo-video"] = tl;
-      </script>
     </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+    </script>
   </body>
 </html>
diff --git a/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html b/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
index ffc6e74d44d..37a8e535b66 100644
--- a/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
+++ b/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
@@ -177,10 +177,15 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
       }
     </style>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script>
-      (function () {
-        const compId = "nyt-chart";
+      (function initChart() {
+        
+        // Wait for DOM — the runtime may not have cloned the template content yet
+        const svg = document.querySelector(`[data-composition-id="nyt-chart"] .chart-svg`);
+        if (!svg) {
+          setTimeout(initChart, 50);
+          return;
+        }
         const tl = gsap.timeline({ paused: true });
 
         // Data
@@ -204,8 +209,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
         const getLineY = (val) => startY - (val / maxConversion) * chartHeight;
         const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;
 
-        // 1. Setup Elements
-        const svg = document.querySelector(`[data-composition-id="${compId}"] .chart-svg`);
+        // 1. Setup Elements (svg already found above)
         const gridGroup = svg.querySelector(".gridlines");
         const xAxisGroup = svg.querySelector(".x-axis-labels");
         const barsGroup = svg.querySelector(".bars-group");
@@ -279,7 +283,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
 
         // 2. Headline & Subtitle (Draw on left-to-right)
         tl.to(
-          `[data-composition-id="${compId}"] .headline`,
+          `[data-composition-id="nyt-chart"] .headline`,
           {
             clipPath: "inset(0 0% 0 0)",
             duration: 1.2,
@@ -289,7 +293,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
         );
 
         tl.to(
-          `[data-composition-id="${compId}"] .subtitle`,
+          `[data-composition-id="nyt-chart"] .subtitle`,
           {
             clipPath: "inset(0 0% 0 0)",
             duration: 1.2,
@@ -300,7 +304,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
 
         // 3. Inline Key
         tl.to(
-          `[data-composition-id="${compId}"] .key`,
+          `[data-composition-id="nyt-chart"] .key`,
           {
             opacity: 1,
             duration: 0.4,
@@ -311,7 +315,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
 
         // 4. Gridlines (Stagger bottom to top)
         tl.to(
-          `[data-composition-id="${compId}"] .grid-line`,
+          `[data-composition-id="nyt-chart"] .grid-line`,
           {
             opacity: 1,
             duration: 0.5,
@@ -430,7 +434,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
 
         // 11. Source Line
         tl.to(
-          `[data-composition-id="${compId}"] .source`,
+          `[data-composition-id="nyt-chart"] .source`,
           {
             opacity: 1,
             duration: 0.5,
@@ -440,7 +444,7 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
         );
 
         // Register timeline
-        window.__timelines[compId] = tl;
+        window.__timelines["nyt-chart"] = tl;
       })();
     </script>
   </div>
diff --git a/packages/cli/src/templates/nyt-graph/index.html b/packages/cli/src/templates/nyt-graph/index.html
index 4de0bf5eee1..70bcd666f81 100644
--- a/packages/cli/src/templates/nyt-graph/index.html
+++ b/packages/cli/src/templates/nyt-graph/index.html
@@ -3,50 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
-    <title>NYT Print Chart</title>
+    <title>NYT Graph</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      body {
+      * {
         margin: 0;
         padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
         width: 1920px;
         height: 1080px;
-        background-color: #faf9f6;
         overflow: hidden;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #root {
-        width: 100%;
-        height: 100%;
-        position: relative;
+        background-color: #faf9f6;
       }
     </style>
   </head>
   <body>
     <div
       id="root"
-      data-composition-id="main-video"
+      data-composition-id="main"
       data-start="0"
+      data-duration="15"
       data-width="1920"
       data-height="1080"
-      data-duration="15"
     >
       <div
-        id="chart-1"
+        id="nyt-chart-comp"
         data-composition-id="nyt-chart"
         data-composition-src="compositions/nyt-chart.html"
         data-start="0"
+        data-duration="15"
         data-track-index="0"
+        data-width="1920"
+        data-height="1080"
       ></div>
-
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-      <script>
-        const tl = gsap.timeline({ paused: true });
-        window.__timelines = window.__timelines || {};
-        window.__timelines["main-video"] = tl;
-      </script>
     </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+    </script>
   </body>
 </html>
diff --git a/packages/cli/src/templates/play-mode/index.html b/packages/cli/src/templates/play-mode/index.html
index 6b120786257..ba1f0b5ac11 100644
--- a/packages/cli/src/templates/play-mode/index.html
+++ b/packages/cli/src/templates/play-mode/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hyperframes - Play Mode</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       body,
       html {
diff --git a/packages/cli/src/templates/product-promo/index.html b/packages/cli/src/templates/product-promo/index.html
index 4666223c6e4..7c336612730 100644
--- a/packages/cli/src/templates/product-promo/index.html
+++ b/packages/cli/src/templates/product-promo/index.html
@@ -2,30 +2,28 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080, initial-scale=1.0" />
-    <title>Figma Promo - Collaborate</title>
+    <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=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=block"
       rel="stylesheet"
     />
     <style>
-      body,
-      html {
+      * {
         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;
       }
-
-      [data-composition-id="root"] {
-        width: 1920px;
-        height: 1080px;
-        position: relative;
-      }
-
       .scene {
         position: absolute;
         top: 0;
@@ -33,28 +31,17 @@
         width: 100%;
         height: 100%;
       }
-
-      /* Lower Third Caption - Centered and Prominent */
-      [data-composition-id="captions"] {
+      .caption-text-wrapper {
         position: absolute;
-        top: 0;
+        bottom: 150px;
         left: 0;
-        width: 1920px;
-        height: 1080px;
-        z-index: 100;
+        right: 0;
         display: flex;
         justify-content: center;
-        align-items: flex-end;
-        padding-bottom: 150px;
         pointer-events: none;
-        box-sizing: border-box;
-      }
-
-      .caption-text-wrapper {
         overflow: hidden;
         padding: 10px 0;
       }
-
       .caption-line {
         color: white;
         font-size: 48px;
@@ -68,45 +55,62 @@
     </style>
   </head>
   <body>
-    <div data-composition-id="root" data-width="1920" data-height="1080" data-duration="20">
+    <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"
         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"
         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"
         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 Composition -->
+      <!-- Captions -->
       <div
+        id="captions-comp"
         data-composition-id="captions"
-        data-width="1920"
-        data-height="1080"
         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>
@@ -117,15 +121,10 @@
             const tl = gsap.timeline({ paused: true });
             const text = document.querySelector("#caption-text");
 
-            // Scene 2 start - Slide up reveal
             tl.to(text, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0);
-
-            // Scene 3 crossfade (at 3.5s into this comp, which is 5s total)
             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);
-
-            // Scene 4 crossfade (at 8.0s into this comp, which is 9.5s total)
             tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 7.7);
             tl.set(
               text,
@@ -133,8 +132,6 @@
               8.0,
             );
             tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 8.0);
-
-            // Exit
             tl.to(text, { opacity: 0, y: -20, duration: 0.4, ease: "power3.in" }, 12.1);
 
             window.__timelines = window.__timelines || {};
@@ -144,12 +141,10 @@
       </div>
     </div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script>
-      // Main orchestration timeline
+      window.__timelines = window.__timelines || {};
       const mainTl = gsap.timeline({ paused: true });
 
-      // Scene 2-4 transition effects (blur/scale)
       mainTl.set("#scene-2-4", { scale: 1, filter: "blur(0px)" }, 1.5);
       mainTl.to(
         "#scene-2-4",
@@ -157,8 +152,7 @@
         13.75,
       );
 
-      window.__timelines = window.__timelines || {};
-      window.__timelines["root"] = mainTl;
+      window.__timelines["main"] = mainTl;
     </script>
   </body>
 </html>
diff --git a/packages/cli/src/templates/swiss-grid/compositions/graphics.html b/packages/cli/src/templates/swiss-grid/compositions/graphics.html
index b1e48eb211e..11195546abc 100644
--- a/packages/cli/src/templates/swiss-grid/compositions/graphics.html
+++ b/packages/cli/src/templates/swiss-grid/compositions/graphics.html
@@ -132,7 +132,7 @@
       }
     </style>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script>
       (function () {
         const tl = gsap.timeline({ paused: true });
diff --git a/packages/cli/src/templates/swiss-grid/index.html b/packages/cli/src/templates/swiss-grid/index.html
index 0f41976b0d2..bef52653cb4 100644
--- a/packages/cli/src/templates/swiss-grid/index.html
+++ b/packages/cli/src/templates/swiss-grid/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Swiss Grid - Hyperframes</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       body,
       html {
diff --git a/packages/cli/src/templates/vignelli/index.html b/packages/cli/src/templates/vignelli/index.html
index f0dbe5b361d..afa3a93a3d8 100644
--- a/packages/cli/src/templates/vignelli/index.html
+++ b/packages/cli/src/templates/vignelli/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>Massimo Vignelli Video</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       body,
       html {
diff --git a/packages/cli/src/templates/warm-grain/index.html b/packages/cli/src/templates/warm-grain/index.html
index a9ae4b53986..2c557c0b0e2 100644
--- a/packages/cli/src/templates/warm-grain/index.html
+++ b/packages/cli/src/templates/warm-grain/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Warm Grain - Hyperframes</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       body,
       html {

From 9d2734c25492a33e838415b6a24fc35490652a0d Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Fri, 27 Mar 2026 17:27:01 -0700
Subject: [PATCH 3/3] fix(templates): composition-id mismatch, null guards,
 font display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- product-promo: fix composition-id mismatch (scene1 → scene1-logo-intro,
  scene2-4 → scene2-4-canvas, scene5 → scene5-logo-outro)
- decision-tree: add null guards on querySelector calls
- nyt-chart: font display=swap → display=block for deterministic rendering
---
 .../decision-tree/compositions/decision_tree.html        | 9 ++++++---
 .../src/templates/nyt-graph/compositions/nyt-chart.html  | 3 +--
 packages/cli/src/templates/product-promo/index.html      | 6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/cli/src/templates/decision-tree/compositions/decision_tree.html b/packages/cli/src/templates/decision-tree/compositions/decision_tree.html
index 1381f1343a6..f3b4b216378 100644
--- a/packages/cli/src/templates/decision-tree/compositions/decision_tree.html
+++ b/packages/cli/src/templates/decision-tree/compositions/decision_tree.html
@@ -348,6 +348,7 @@
         // 10. Cursor clicks. Selection border appears.
         tl.add(() => {
           const node = document.querySelector("#node-python");
+          if (!node) return;
           if (!node.querySelector(".selection-border")) {
             const border = document.createElement("div");
             border.className = "selection-border";
@@ -366,6 +367,7 @@
         tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3 }, "hold4");
         tl.add(() => {
           const textEl = document.querySelector("#python-text");
+          if (!textEl) return;
           textEl.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
         }, "hold4+=0.1");
 
@@ -379,8 +381,8 @@
         words.forEach((word, i) => {
           tl.add(
             () => {
-              document.querySelector("#python-text").innerHTML =
-                `Start with <span class="text-highlight">${word}</span>`;
+              const el = document.querySelector("#python-text");
+              if (el) el.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
             },
             typingStart + i * 0.05,
           );
@@ -389,7 +391,8 @@
         // Remove highlight and squiggle at the end of typing
         const typingEnd = typingStart + words.length * 0.05;
         tl.add(() => {
-          document.querySelector("#python-text").innerHTML = "Start with Python";
+          const pyEl = document.querySelector("#python-text");
+          if (pyEl) pyEl.innerHTML = "Start with Python";
           gsap.set(".squiggle-container", { opacity: 0 });
         }, typingEnd);
 
diff --git a/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html b/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
index 37a8e535b66..af035fab3f0 100644
--- a/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
+++ b/packages/cli/src/templates/nyt-graph/compositions/nyt-chart.html
@@ -4,7 +4,7 @@
     <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=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=block"
       rel="stylesheet"
     />
 
@@ -179,7 +179,6 @@ <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
 
     <script>
       (function initChart() {
-        
         // Wait for DOM — the runtime may not have cloned the template content yet
         const svg = document.querySelector(`[data-composition-id="nyt-chart"] .chart-svg`);
         if (!svg) {
diff --git a/packages/cli/src/templates/product-promo/index.html b/packages/cli/src/templates/product-promo/index.html
index 7c336612730..938af4c5221 100644
--- a/packages/cli/src/templates/product-promo/index.html
+++ b/packages/cli/src/templates/product-promo/index.html
@@ -67,7 +67,7 @@
       <div
         id="scene-1"
         class="scene"
-        data-composition-id="scene1"
+        data-composition-id="scene1-logo-intro"
         data-composition-src="compositions/scene1-logo-intro.html"
         data-start="0"
         data-duration="1.5"
@@ -80,7 +80,7 @@
       <div
         id="scene-2-4"
         class="scene"
-        data-composition-id="scene2-4"
+        data-composition-id="scene2-4-canvas"
         data-composition-src="compositions/scene2-4-canvas.html"
         data-start="1.5"
         data-duration="12.5"
@@ -93,7 +93,7 @@
       <div
         id="scene-5"
         class="scene"
-        data-composition-id="scene5"
+        data-composition-id="scene5-logo-outro"
         data-composition-src="compositions/scene5-logo-outro.html"
         data-start="14"
         data-duration="6"