diff --git a/registry/blocks/flowchart-vertical/flowchart-vertical.html b/registry/blocks/flowchart-vertical/flowchart-vertical.html
new file mode 100644
index 000000000..718d215d5
--- /dev/null
+++ b/registry/blocks/flowchart-vertical/flowchart-vertical.html
@@ -0,0 +1,475 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1440, height=2560" />
+    <title>Flowchart Vertical</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:wght@400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1440px;
+        height: 2560px;
+        overflow: hidden;
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="flowchart-vertical"
+      data-composition-id="flowchart-vertical"
+      data-width="1440"
+      data-height="2560"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="canvas">
+        <svg class="connectors" width="1440" height="2560" viewBox="0 0 1440 2560">
+          <!-- Level 1 to 2 -->
+          <path
+            id="path-1-L"
+            class="connector"
+            d="M 720 210 L 720 360 L 440 360 L 440 530"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-1-R"
+            class="connector"
+            d="M 720 210 L 720 360 L 1000 360 L 1000 530"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Left side) -->
+          <path
+            id="path-2-LL"
+            class="connector"
+            d="M 440 590 L 440 760 L 280 760 L 280 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-LR"
+            class="connector"
+            d="M 440 590 L 440 760 L 600 760 L 600 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Right side) -->
+          <path
+            id="path-2-RL"
+            class="connector"
+            d="M 1000 590 L 1000 760 L 840 760 L 840 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-RR"
+            class="connector"
+            d="M 1000 590 L 1000 760 L 1160 760 L 1160 930"
+            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 yellow" style="left: 720px; top: 180px">
+          Should I learn to code?
+        </div>
+
+        <!-- Level 2 -->
+        <div id="node-yes" class="node green" style="left: 440px; top: 560px">Yes</div>
+        <div id="node-not-sure" class="node peach" style="left: 1000px; top: 560px">Not sure</div>
+
+        <!-- Level 3 -->
+        <div id="node-python" class="node lavender" style="left: 280px; top: 960px">
+          <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 blue" style="left: 600px; top: 960px">
+          Try no-code first
+        </div>
+        <div id="node-website" class="node pink" style="left: 840px; top: 960px">
+          Build a personal website
+        </div>
+        <div id="node-course" class="node yellow" style="left: 1160px; top: 960px">
+          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>
+        #flowchart-vertical {
+          width: 1440px;
+          height: 2560px;
+          background-color: #ffffff;
+          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
+          background-size: 20px 20px;
+          position: absolute;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        #flowchart-vertical .canvas {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          transform: none;
+          transform-origin: 720px 640px;
+        }
+
+        #flowchart-vertical .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;
+        }
+
+        #flowchart-vertical .node.yellow {
+          background-color: #e8d44d;
+        }
+        #flowchart-vertical .node.green {
+          background-color: #c2e8a0;
+        }
+        #flowchart-vertical .node.peach {
+          background-color: #f5c5a3;
+        }
+        #flowchart-vertical .node.lavender {
+          background-color: #d4c5f9;
+        }
+        #flowchart-vertical .node.blue {
+          background-color: #a8d8f0;
+        }
+        #flowchart-vertical .node.pink {
+          background-color: #f8b4c8;
+        }
+
+        #flowchart-vertical .connectors {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 5;
+          pointer-events: none;
+        }
+
+        #flowchart-vertical .connector {
+          stroke-dasharray: 1000;
+          stroke-dashoffset: 1000;
+        }
+
+        #flowchart-vertical .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%);
+        }
+
+        #flowchart-vertical #label-yes {
+          left: 580px;
+          top: 420px;
+        }
+        #flowchart-vertical #label-not-sure {
+          left: 860px;
+          top: 420px;
+        }
+
+        #flowchart-vertical .cursor-container {
+          position: absolute;
+          left: 1440px;
+          top: 2560px;
+          z-index: 100;
+          pointer-events: none;
+          display: flex;
+          align-items: flex-start;
+        }
+
+        #flowchart-vertical .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;
+        }
+
+        #flowchart-vertical .squiggle-container {
+          position: absolute;
+          right: 0;
+          bottom: -4px;
+          opacity: 0;
+        }
+
+        #flowchart-vertical .emoji {
+          position: absolute;
+          font-size: 32px;
+          left: 390px;
+          top: 960px;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 20;
+        }
+
+        #flowchart-vertical #fade-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: white;
+          opacity: 0;
+          z-index: 1000;
+          pointer-events: none;
+        }
+
+        #flowchart-vertical .selection-border {
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          right: -4px;
+          bottom: -4px;
+          border: 2px solid #0b84f3;
+          border-radius: 16px;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        #flowchart-vertical .text-highlight {
+          background-color: #d0e4ff;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+          const S = "#flowchart-vertical";
+          const nodePython = document.querySelector(S + " #node-python");
+          const pythonText = document.querySelector(S + " #python-text");
+
+          // 1. Root node scales in
+          tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+
+          // 2. Hold
+          tl.addLabel("hold1", "+=0.6");
+
+          // 3. Connectors draw
+          tl.to(
+            S + " .connector#path-1-L, " + S + " .connector#path-1-R",
+            { strokeDashoffset: 0, duration: 0.5, ease: "none" },
+            "hold1",
+          );
+
+          tl.to(
+            S + " #label-yes, " + S + " #label-not-sure",
+            { opacity: 1, duration: 0.2 },
+            "hold1+=0.25",
+          );
+
+          // 4. Level 2 nodes
+          tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+          tl.to(
+            S + " #node-not-sure",
+            { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+            "hold1+=0.6",
+          );
+
+          // 5. Hold
+          tl.addLabel("hold2", "+=0.5");
+
+          // 6. Level 2→3 connectors
+          tl.to(
+            S +
+              " .connector#path-2-LL, " +
+              S +
+              " .connector#path-2-LR, " +
+              S +
+              " .connector#path-2-RL, " +
+              S +
+              " .connector#path-2-RR",
+            { strokeDashoffset: 0, duration: 0.4, ease: "none" },
+            "hold2",
+          );
+
+          // 7. Leaf nodes
+          const leafNodes = [
+            S + " #node-python",
+            S + " #node-nocode",
+            S + " #node-website",
+            S + " #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}`,
+            );
+          });
+
+          tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+
+          // 8. Hold
+          tl.addLabel("hold3", "+=0.8");
+
+          // 9. Cursor drifts in
+          tl.to(
+            S + " #cursor",
+            { left: 330, top: 1000, duration: 1, ease: "power1.inOut" },
+            "hold3",
+          );
+
+          // 10. Cursor clicks — selection border
+          tl.add(() => {
+            if (!nodePython) return;
+            if (!nodePython.querySelector(".selection-border")) {
+              const border = document.createElement("div");
+              border.className = "selection-border";
+              nodePython.appendChild(border);
+            }
+            gsap.set(S + " .selection-border", { opacity: 1 });
+          }, "hold3+=1");
+
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold3+=1",
+          );
+
+          // 11. Hold
+          tl.addLabel("hold4", "+=0.3");
+
+          // 12. Double-click to highlight "Pythom"
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
+            "hold4",
+          );
+          tl.add(() => {
+            if (!pythonText) return;
+            pythonText.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
+          }, "hold4+=0.1");
+
+          // 13. Hold
+          tl.addLabel("hold5", "+=0.2");
+
+          // 14. Type correction: "Pythom" → "Python"
+          const typingStart = tl.labels["hold5"];
+          const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
+          words.forEach((word, i) => {
+            tl.add(
+              () => {
+                if (pythonText)
+                  pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
+              },
+              typingStart + i * 0.05,
+            );
+          });
+
+          const typingEnd = typingStart + words.length * 0.05;
+          tl.add(() => {
+            if (pythonText) pythonText.innerHTML = "Start with Python";
+            gsap.set(S + " .squiggle-container", { opacity: 0 });
+          }, typingEnd);
+
+          // 15. Hold
+          tl.addLabel("hold6", typingEnd + 0.5);
+
+          // 16. Cursor clicks away to deselect
+          tl.to(
+            S + " #cursor",
+            { left: 390, top: 1040, duration: 0.3, overwrite: "auto" },
+            "hold6",
+          );
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold6+=0.3",
+          );
+          tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+
+          // 17. Emoji pop
+          tl.to(
+            S + " #emoji-thumb",
+            { scale: 1, duration: 0.15, ease: "back.out(2)" },
+            "hold6+=0.4",
+          );
+
+          // 18. Hold
+          tl.addLabel("hold7", "+=2");
+
+          // 19. Fade out
+          tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["flowchart-vertical"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/flowchart-vertical/registry-item.json b/registry/blocks/flowchart-vertical/registry-item.json
new file mode 100644
index 000000000..9b8fa32c3
--- /dev/null
+++ b/registry/blocks/flowchart-vertical/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "flowchart-vertical",
+  "type": "hyperframes:block",
+  "title": "Flowchart Vertical",
+  "description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+  "tags": ["diagram", "flowchart", "interactive", "portrait"],
+  "dimensions": {
+    "width": 1440,
+    "height": 2560
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "flowchart-vertical.html",
+      "target": "compositions/flowchart-vertical.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
