diff --git a/registry/blocks/data-chart/data-chart.html b/registry/blocks/data-chart/data-chart.html
new file mode 100644
index 000000000..6d53ee34f
--- /dev/null
+++ b/registry/blocks/data-chart/data-chart.html
@@ -0,0 +1,460 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Data Chart</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=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&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: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #faf9f6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="data-chart"
+      data-composition-id="data-chart"
+      data-width="1920"
+      data-height="1080"
+      data-duration="15"
+    >
+      <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="data-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="data-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="data-chart"] .header {
+          margin-bottom: 40px;
+          text-align: left;
+        }
+
+        [data-composition-id="data-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="data-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="data-chart"] .key {
+          display: flex;
+          gap: 24px;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .key-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="data-chart"] .key-box {
+          width: 10px;
+          height: 10px;
+          background-color: #5c5c5c;
+        }
+
+        [data-composition-id="data-chart"] .key-line {
+          width: 16px;
+          height: 1.5px;
+          background-color: #326fa8;
+        }
+
+        [data-composition-id="data-chart"] .key-text {
+          font-size: 13px;
+          color: #666;
+        }
+
+        [data-composition-id="data-chart"] .chart-svg {
+          width: 100%;
+          height: 600px;
+          overflow: visible;
+        }
+
+        [data-composition-id="data-chart"] .source {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          font-size: 11px;
+          color: #999;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .grid-line {
+          stroke: #e8e8e8;
+          stroke-width: 0.5px;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .axis-label {
+          font-size: 14px;
+          fill: #666;
+          text-anchor: middle;
+        }
+
+        [data-composition-id="data-chart"] .bar {
+          fill: #5c5c5c;
+        }
+
+        [data-composition-id="data-chart"] .bar-label {
+          font-size: 14px;
+          fill: #333;
+          text-anchor: middle;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .line-label {
+          font-size: 14px;
+          fill: #326fa8;
+          font-weight: 600;
+          text-anchor: middle;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function initChart() {
+          const svg = document.querySelector('[data-composition-id="data-chart"] .chart-svg');
+          if (!svg) {
+            setTimeout(initChart, 50);
+            return;
+          }
+          const tl = gsap.timeline({ paused: true });
+
+          // Data
+          const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+          const revenueData = [8, 12, 15, 11, 18, 22];
+          const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2];
+
+          // 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;
+
+          // Setup Elements
+          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
+          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);
+
+            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);
+
+            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);
+
+            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);
+
+            linePoints.push(`${x},${getLineY(conversionData[i])}`);
+
+            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 ---
+
+          tl.to(
+            '[data-composition-id="data-chart"] .headline',
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1.2,
+              ease: "power1.inOut",
+            },
+            0,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .subtitle',
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1.2,
+              ease: "power1.inOut",
+            },
+            0.2,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .key',
+            {
+              opacity: 1,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            1.0,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .grid-line',
+            {
+              opacity: 1,
+              duration: 0.5,
+              stagger: 0.25,
+              ease: "power2.out",
+            },
+            0.5,
+          );
+
+          // Bars
+          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;
+
+            tl.to(
+              bar,
+              {
+                attr: { height: barHeight, y: startY - barHeight },
+                duration: 0.8,
+                ease: "power2.out",
+              },
+              startTime,
+            );
+
+            tl.to(
+              barLabels[i],
+              {
+                opacity: 1,
+                duration: 0.3,
+                ease: "power2.out",
+              },
+              startTime + 0.8,
+            );
+          });
+
+          // Line
+          const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;
+          const lineStartTime = lastBarStartTime + 0.5;
+
+          tl.to(
+            conversionPath,
+            {
+              strokeDashoffset: 0,
+              duration: 3,
+              ease: "none",
+            },
+            lineStartTime,
+          );
+
+          // Line Dot & Labels
+          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;
+
+            lineLabels[i].textContent = "0.0%";
+
+            tl.to(
+              lineLabels[i],
+              {
+                opacity: 1,
+                duration: 0.1,
+                ease: "power2.out",
+              },
+              labelTime,
+            );
+
+            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,
+            );
+          });
+
+          // Source Line
+          tl.to(
+            '[data-composition-id="data-chart"] .source',
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            ">+0.5",
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["data-chart"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/data-chart/registry-item.json b/registry/blocks/data-chart/registry-item.json
new file mode 100644
index 000000000..efeb32115
--- /dev/null
+++ b/registry/blocks/data-chart/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "data-chart",
+  "type": "hyperframes:block",
+  "title": "Data Chart",
+  "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
+  "tags": ["data", "chart", "statistics"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 15,
+  "files": [
+    {
+      "path": "data-chart.html",
+      "target": "compositions/data-chart.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/flowchart/flowchart.html b/registry/blocks/flowchart/flowchart.html
new file mode 100644
index 000000000..a1d1dec30
--- /dev/null
+++ b/registry/blocks/flowchart/flowchart.html
@@ -0,0 +1,441 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Flowchart</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: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="flowchart"
+      data-composition-id="flowchart"
+      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 yellow" style="left: 960px; top: 100px">
+          Should I learn to code?
+        </div>
+
+        <!-- Level 2 -->
+        <div id="node-yes" class="node green" style="left: 600px; top: 300px">Yes</div>
+        <div id="node-not-sure" class="node peach" style="left: 1320px; top: 300px">Not sure</div>
+
+        <!-- Level 3 -->
+        <div id="node-python" class="node 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 blue" style="left: 800px; top: 500px">
+          Try no-code first
+        </div>
+        <div id="node-website" class="node pink" style="left: 1120px; top: 500px">
+          Build a personal website
+        </div>
+        <div id="node-course" class="node 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="flowchart"] {
+          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="flowchart"] .canvas {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          transform: scale(1.2);
+          transform-origin: 960px 300px;
+        }
+
+        [data-composition-id="flowchart"] .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="flowchart"] .node.yellow {
+          background-color: #e8d44d;
+        }
+        [data-composition-id="flowchart"] .node.green {
+          background-color: #c2e8a0;
+        }
+        [data-composition-id="flowchart"] .node.peach {
+          background-color: #f5c5a3;
+        }
+        [data-composition-id="flowchart"] .node.lavender {
+          background-color: #d4c5f9;
+        }
+        [data-composition-id="flowchart"] .node.blue {
+          background-color: #a8d8f0;
+        }
+        [data-composition-id="flowchart"] .node.pink {
+          background-color: #f8b4c8;
+        }
+
+        [data-composition-id="flowchart"] .connectors {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 5;
+          pointer-events: none;
+        }
+
+        [data-composition-id="flowchart"] .connector {
+          stroke-dasharray: 1000;
+          stroke-dashoffset: 1000;
+        }
+
+        [data-composition-id="flowchart"] .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%);
+        }
+
+        [data-composition-id="flowchart"] #label-yes {
+          left: 780px;
+          top: 230px;
+        }
+        [data-composition-id="flowchart"] #label-not-sure {
+          left: 1140px;
+          top: 230px;
+        }
+
+        [data-composition-id="flowchart"] .cursor-container {
+          position: absolute;
+          left: 1920px;
+          top: 1080px;
+          z-index: 100;
+          pointer-events: none;
+          display: flex;
+          align-items: flex-start;
+        }
+
+        [data-composition-id="flowchart"] .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="flowchart"] .squiggle-container {
+          position: absolute;
+          right: 0;
+          bottom: -4px;
+          opacity: 0;
+        }
+
+        [data-composition-id="flowchart"] .emoji {
+          position: absolute;
+          font-size: 32px;
+          left: 510px;
+          top: 500px;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 20;
+        }
+
+        [data-composition-id="flowchart"] #fade-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: white;
+          opacity: 0;
+          z-index: 1000;
+          pointer-events: none;
+        }
+
+        [data-composition-id="flowchart"] .selection-border {
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          right: -4px;
+          bottom: -4px;
+          border: 2px solid #0b84f3;
+          border-radius: 16px;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        [data-composition-id="flowchart"] .text-highlight {
+          background-color: #d0e4ff;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+          const nodePython = document.querySelector("#node-python");
+          const pythonText = document.querySelector("#python-text");
+
+          // 1. Root node scales in
+          tl.to("#node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+
+          // 2. Hold
+          tl.addLabel("hold1", "+=0.6");
+
+          // 3. Connectors draw
+          tl.to(
+            ".connector#path-1-L, .connector#path-1-R",
+            { strokeDashoffset: 0, duration: 0.5, ease: "none" },
+            "hold1",
+          );
+
+          tl.to("#label-yes, #label-not-sure", { opacity: 1, duration: 0.2 }, "hold1+=0.25");
+
+          // 4. Level 2 nodes
+          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
+          tl.addLabel("hold2", "+=0.5");
+
+          // 6. Level 2→3 connectors
+          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. Leaf nodes
+          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}`,
+            );
+          });
+
+          tl.to(".squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+
+          // 8. Hold
+          tl.addLabel("hold3", "+=0.8");
+
+          // 9. Cursor drifts in
+          tl.to("#cursor", { left: 450, top: 540, 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(".selection-border", { opacity: 1 });
+          }, "hold3+=1");
+
+          tl.to(
+            "#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(
+            "#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(".squiggle-container", { opacity: 0 });
+          }, typingEnd);
+
+          // 15. Hold
+          tl.addLabel("hold6", typingEnd + 0.5);
+
+          // 16. Cursor clicks away to deselect
+          tl.to("#cursor", { left: 500, top: 580, duration: 0.3, overwrite: "auto" }, "hold6");
+          tl.to(
+            "#cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold6+=0.3",
+          );
+          tl.to(".selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+
+          // 17. Emoji pop
+          tl.to("#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("#fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["flowchart"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/flowchart/registry-item.json b/registry/blocks/flowchart/registry-item.json
new file mode 100644
index 000000000..66a9556ce
--- /dev/null
+++ b/registry/blocks/flowchart/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "flowchart",
+  "type": "hyperframes:block",
+  "title": "Flowchart",
+  "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+  "tags": ["diagram", "flowchart", "interactive"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "flowchart.html",
+      "target": "compositions/flowchart.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/logo-outro/logo-outro.html b/registry/blocks/logo-outro/logo-outro.html
new file mode 100644
index 000000000..f5fcca74a
--- /dev/null
+++ b/registry/blocks/logo-outro/logo-outro.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Logo Outro</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: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="logo-outro"
+      data-composition-id="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">
+            <!-- Replace these paths with your own logo SVG -->
+            <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"
+            />
+            <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"
+            />
+            <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"
+            />
+            <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
+            <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="logo-outro"] .canvas {
+          width: 1920px;
+          height: 1080px;
+          background: #0a0a0f;
+          position: relative;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="logo-outro"] .logo-container {
+          position: absolute;
+          left: 880px;
+          top: 380px;
+          width: 160px;
+          height: 240px;
+          z-index: 2;
+        }
+
+        [data-composition-id="logo-outro"] .logo-piece {
+          transform-origin: center center;
+          opacity: 0;
+        }
+
+        [data-composition-id="logo-outro"] .logo-glow {
+          position: absolute;
+          left: 760px;
+          top: 300px;
+          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="logo-outro"] .text-container {
+          position: absolute;
+          top: 720px;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          z-index: 3;
+        }
+
+        [data-composition-id="logo-outro"] .tagline {
+          font-size: 44px;
+          font-weight: 500;
+          color: white;
+          opacity: 0;
+          margin-bottom: 32px;
+          text-align: center;
+        }
+
+        [data-composition-id="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="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="logo-outro"] .logo-tl',
+            tr: '[data-composition-id="logo-outro"] .logo-tr',
+            ml: '[data-composition-id="logo-outro"] .logo-ml',
+            mr: '[data-composition-id="logo-outro"] .logo-mr',
+            bl: '[data-composition-id="logo-outro"] .logo-bl',
+          };
+
+          const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
+          const logoGlow = '[data-composition-id="logo-outro"] .logo-glow';
+          const tagline = '[data-composition-id="logo-outro"] .tagline';
+          const urlPill = '[data-composition-id="logo-outro"] .url-pill';
+
+          // 1. Pieces slide in from the right with ripple stagger
+          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. Expand and close
+          const expandTime = 1.2;
+
+          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. Glow bloom
+          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
+          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,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["logo-outro"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/logo-outro/registry-item.json b/registry/blocks/logo-outro/registry-item.json
new file mode 100644
index 000000000..728da5925
--- /dev/null
+++ b/registry/blocks/logo-outro/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "logo-outro",
+  "type": "hyperframes:block",
+  "title": "Logo Outro",
+  "description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
+  "tags": ["branding", "outro", "logo"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "logo-outro.html",
+      "target": "compositions/logo-outro.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 990035395..b320d91a6 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -34,6 +34,18 @@
     {
       "name": "nyt-graph",
       "type": "hyperframes:example"
+    },
+    {
+      "name": "data-chart",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "flowchart",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "logo-outro",
+      "type": "hyperframes:block"
     }
   ]
 }
