diff --git a/docs/catalog/blocks/chatgpt-exchange.mdx b/docs/catalog/blocks/chatgpt-exchange.mdx
new file mode 100644
index 000000000..9e2aac7d0
--- /dev/null
+++ b/docs/catalog/blocks/chatgpt-exchange.mdx
@@ -0,0 +1,1386 @@
+---
+title: "ChatGPT Exchange"
+description: "A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="chatgpt-exchange preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/chatgpt-exchange.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chatgpt-exchange.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
+
+## Install
+
+<InstallCommand command="npx hyperframes add chatgpt-exchange" item="chatgpt-exchange" />
+
+That writes `compositions/chatgpt-exchange.html`, plus 4 supporting files under `assets/fonts/`.
+
+## Add it to your video
+
+It runs for 14.9 seconds at 1080×1920. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="chatgpt-exchange"
+  data-composition-src="compositions/chatgpt-exchange.html"
+  data-start="0"
+  data-duration="14.9"
+  data-track-index="1"
+  data-width="1080"
+  data-height="1920"
+></div>
+```
+
+Move it in time with `data-start`. Put it on a different timeline row with
+`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
+
+## Source
+
+<Accordion title={`chatgpt-exchange.html`}>
+
+```html
+<!doctype html>
+<html lang="en" data-resolution="portrait">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1080, height=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* The real app sets OpenAI Sans, which is not licensed here. Inter is the
+         redistributable OFL stand-in, embedded under a neutral family name so the
+         composition remains self-contained and deterministic. */
+      @font-face {
+        font-family: "ChatUI";
+        font-weight: 400;
+        font-style: normal;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ChatUI";
+        font-weight: 500;
+        font-style: normal;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ChatUI";
+        font-weight: 600;
+        font-style: normal;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "Apple Color Emoji";
+        src: local("Apple Color Emoji");
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1080px;
+        height: 1920px;
+        overflow: hidden;
+        background: #000;
+      }
+      body,
+      #cge-root {
+        font-family: "ChatUI", sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      /* ---------------------------------------------------------------- tokens
+         Geometry is authored in POINTS (1pt = 1px inside .screen) exactly as
+         measured off the source screenshots, then scaled to the 1080x1920 frame.
+         The layout is measured from the source UI at 402 × 874 points.       */
+      :root {
+        --scale: 2.1968; /* 1920 / 874 */
+        --ink: #fcfcfc;
+        --dim: #a8a8ac;
+        --placeholder: #9a9a9e;
+        --bubble: #212121;
+        --kb-bg: #141414;
+        --key: #3c3c3c;
+        --key-hit: #5f5f5f;
+        --seg-track: #181818;
+        --seg-active: #3a3a3a;
+        --blue: #48aaff;
+        --rule-head: #202020;
+        --rule-row: #131313;
+        --chip-bg: #0b0b0c;
+        --chip-line: #2b2b2d;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        background: #000;
+      }
+
+      .screen {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 402px;
+        height: 874px;
+        margin-left: -201px;
+        background: #000;
+        overflow: hidden;
+        transform-origin: top center;
+        transform: scale(var(--scale));
+      }
+
+      /* ----------------------------------------------------------- status bar */
+      .statusbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 65px;
+        display: flex;
+        align-items: center;
+        z-index: 40;
+        padding: 0 34px 0 16px;
+        color: #fff;
+      }
+      .sb-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: 31.7px;
+      }
+      .sb-clock {
+        font-size: 17.2px;
+        font-weight: 600;
+        letter-spacing: 1.3px;
+      }
+      .sb-clock-box {
+        position: relative;
+        width: 38px;
+        height: 22px;
+      }
+      .sb-clock-box span {
+        position: absolute;
+        left: 0;
+        top: 0;
+        white-space: nowrap;
+      }
+      .sb-right {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        margin-left: auto;
+      }
+      .sb-net {
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: -0.2px;
+      }
+      .sb-batt {
+        width: 30px;
+        height: 15px;
+        border-radius: 4.5px;
+        background: #fff;
+        color: #000;
+        font-size: 11px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        letter-spacing: -0.2px;
+        position: relative;
+      }
+      .sb-batt span {
+        position: absolute;
+      }
+      .sb-batt-cap {
+        width: 2px;
+        height: 6px;
+        background: rgba(255, 255, 255, 0.45);
+        border-radius: 0 2px 2px 0;
+        margin-left: -4px;
+      }
+
+      /* --------------------------------------------------------------- header */
+      .header {
+        position: absolute;
+        top: 62px;
+        left: 0;
+        right: 0;
+        height: 44px;
+        z-index: 40;
+      }
+      .status-plate {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 54.7px;
+        z-index: 34;
+        background: #000;
+      }
+      .hdr-scrim {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 118px;
+        z-index: 30;
+        background: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+      }
+      .circle-btn {
+        position: absolute;
+        top: 0;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: #1c1c1e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .hdr-left {
+        left: 16px;
+      }
+      .hdr-right {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: #1c1c1e;
+        overflow: hidden;
+      }
+      .hdr-right-face {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 18px;
+      }
+      .seg {
+        position: absolute;
+        top: -1.7px;
+        left: 121.7px;
+        width: 158px;
+        height: 48px;
+        border-radius: 24px;
+        background: var(--seg-track);
+        display: flex;
+        align-items: center;
+        padding: 4px;
+      }
+      .seg-item {
+        flex: 1;
+        height: 40px;
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        font-weight: 500;
+        color: #fff;
+      }
+      .seg-item.on {
+        background: var(--seg-active);
+      }
+
+      /* --------------------------------------------------------------- thread */
+      .scrollport {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        z-index: 10;
+      }
+      .thread {
+        position: relative;
+        padding: 128px 16px 190px;
+      }
+
+      .bubble {
+        position: relative;
+        margin-left: auto;
+        width: 245.7px;
+        background: var(--bubble);
+        border-radius: 24px;
+        padding: 10px 16px;
+        color: var(--ink);
+        font-size: 16px;
+        line-height: 25.667px;
+      }
+      .answer {
+        margin-top: 36px;
+        width: 360px;
+        color: var(--ink);
+        font-size: 16px;
+        line-height: 25.667px;
+      }
+      .para {
+        overflow: hidden;
+      }
+      .para + .para {
+        margin-top: 24px;
+      }
+      .w {
+        opacity: 1;
+      }
+
+      /* ---------------------------------------------------------------- table */
+      .tbl {
+        margin: 19px 0 0 -5.7px;
+        width: 480px;
+        overflow: hidden;
+      }
+      .tr {
+        display: flex;
+        overflow: hidden;
+      }
+      .td {
+        padding: 8px 12px 8px 0;
+        font-size: 14.5px;
+        line-height: 23px;
+        color: var(--ink);
+      }
+      .c1 {
+        width: 168px;
+      }
+      .c2 {
+        width: 120px;
+        font-weight: 600;
+      }
+      .c3 {
+        width: 173px;
+      }
+      .th {
+        font-size: 14.5px;
+        line-height: 23px;
+        font-weight: 600;
+        padding-bottom: 6px;
+      }
+      .rule-head {
+        height: 2px;
+        background: var(--rule-head);
+      }
+      .rule-row {
+        height: 2px;
+        background: var(--rule-row);
+      }
+      .use {
+        display: flex;
+        gap: 8px;
+        align-items: baseline;
+      }
+      .emo {
+        font-family: "Apple Color Emoji";
+        font-size: 14px;
+      }
+      .chip {
+        display: flex;
+        width: fit-content;
+        align-items: center;
+        gap: 6px;
+        height: 24px;
+        margin-top: 6px;
+        padding: 0 8px;
+        border-radius: 12px;
+        background: var(--chip-bg);
+        border: 1px solid var(--chip-line);
+        font-size: 10px;
+        color: #b9b9bd;
+        white-space: nowrap;
+      }
+      .chip-dot {
+        width: 12.5px;
+        height: 12.5px;
+        border-radius: 6.25px;
+        background: #2e2e30;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 6px;
+        font-weight: 700;
+        color: #d8d8da;
+      }
+
+      /* ---------------------------------------------------------- scroll chrome */
+      .scrollbar {
+        position: absolute;
+        right: 3.3px;
+        top: 145px;
+        width: 2.7px;
+        border-radius: 1.4px;
+        background: rgba(235, 235, 245, 0.32);
+        z-index: 20;
+      }
+      .chev-wrap {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 738.7px;
+        z-index: 25;
+        display: flex;
+        justify-content: center;
+      }
+      .chev {
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
+        background: #1c1c1e;
+        border: 1px solid #2c2c2e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* ------------------------------------------------------------ suggestions */
+      .suggests {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 407.7px;
+        z-index: 15;
+      }
+      .sug {
+        height: 47px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding-left: 27.7px;
+        color: var(--ink);
+        font-size: 16px;
+      }
+      .sug-ico {
+        width: 15.7px;
+        height: 15.7px;
+        display: flex;
+        align-items: center;
+      }
+
+      /* -------------------------------------------------------------- composer */
+      .comp-scrim {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 120px;
+        z-index: 18;
+        background: linear-gradient(to top, #000 12%, rgba(0, 0, 0, 0) 100%);
+      }
+      .composer {
+        position: absolute;
+        left: 12px;
+        bottom: 38.3px;
+        width: 378px;
+        height: 48px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.055);
+        backdrop-filter: blur(22px);
+        -webkit-backdrop-filter: blur(22px);
+        z-index: 20;
+        overflow: hidden;
+      }
+      .comp-text {
+        position: absolute;
+        top: 0;
+        left: 16px;
+        right: 16px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        color: var(--ink);
+        font-size: 16px;
+        line-height: 22px;
+        white-space: pre;
+      }
+      .comp-ph {
+        position: absolute;
+        top: 0;
+        left: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        color: var(--placeholder);
+        font-size: 16px;
+      }
+      .typed {
+        white-space: pre;
+      }
+      .typed .ch {
+        opacity: 0;
+      }
+      .cursor-anchor {
+        position: relative;
+        display: inline-block;
+        width: 0;
+        height: 22px;
+        vertical-align: -4px;
+      }
+      .cursor-anchor i {
+        position: absolute;
+        left: 1px;
+        top: 0;
+        width: 2px;
+        height: 22px;
+        background: var(--blue);
+      }
+      .comp-ctrls {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 48px;
+      }
+      .comp-ctrls > * {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #cge-comp-plus {
+        left: 15px;
+      }
+      .comp-mic {
+        right: 60px;
+      }
+      .blue-btn {
+        right: 8px;
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        background: var(--blue);
+      }
+      .blue-face {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* -------------------------------------------------------------- keyboard */
+      .keyboard {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 539px;
+        height: 335px;
+        background: var(--kb-bg);
+        z-index: 22;
+      }
+      .predict {
+        position: relative;
+        height: 52px;
+        display: flex;
+        align-items: center;
+      }
+      .pd {
+        flex: 1;
+        position: relative;
+        align-self: stretch;
+        font-size: 17px;
+        color: #e8e8ea;
+        border-right: 1px solid rgba(235, 235, 245, 0.16);
+      }
+      .pdw {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .pd:last-child {
+        border-right: none;
+      }
+      .krow {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 43px;
+      }
+      .key {
+        position: absolute;
+        top: 0;
+        height: 43px;
+        border-radius: 5px;
+        background: var(--key);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 22.2px;
+        font-weight: 400;
+      }
+      .key.dark {
+        background: #2b2b2d;
+      }
+      .key.small {
+        font-size: 16px;
+        font-weight: 400;
+      }
+      .kb-bottom {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 279.7px;
+        height: 55px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 29px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-hf-id="hf-ahdx"
+      id="cge-root"
+      data-composition-id="chatgpt-exchange"
+      data-fps="60"
+      data-start="0"
+      data-duration="14.9"
+      data-width="1080"
+      data-height="1920"
+    >
+      <div data-hf-id="hf-tan6" class="stage">
+        <div
+          data-hf-id="hf-szt4"
+          id="cge-scene"
+          class="clip"
+          data-start="0"
+          data-duration="14.9"
+          data-track-index="1"
+        >
+          <div data-hf-id="hf-ylue" class="screen" id="cge-screen"></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ==================================================================
+         TEMPLATE CONFIG — edit only this block to re-skin the exchange.
+         ================================================================== */
+      const CONFIG = {
+        status: { clock: "1:29", clockLate: "1:30", net: "5G+", battery: 89, batteryLate: 88 },
+        prompt: "Hey what's the best tool for ai avatars",
+        suggestions: [
+          { icon: "slack", label: "Summarize my to-dos" },
+          { icon: "gmail", label: "Draft follow-up emails" },
+          { icon: "cal", label: "Prep me for upcoming meetings" },
+        ],
+        predict: {
+          start: ["I", "The", "I'm"],
+          mid: ["ai", "AI", "a"],
+          end: ['"avatars"', "avatar sick", "avatar stressed"],
+        },
+        paragraphs: [
+          "It really depends on what you're trying to do, because “AI avatars” has split into a few different categories.",
+          "For **most creators and marketers**, here's how I'd rank them today:",
+        ],
+        table: {
+          head: ["Use case", "Best tool", "Why"],
+          rows: [
+            {
+              emoji: "🥇",
+              use: "Overall realism",
+              tool: "HeyGen",
+              why: "Most natural facial expressions, lip sync, gestures, voice cloning and localization. Benchmark for talking head videos.",
+              chip: "Official A.I Ranking",
+            },
+            {
+              emoji: "🏢",
+              use: "Enterprise/training",
+              tool: "Synthesia",
+              why: "Better collaboration, SCORM, compliance, team workflows; less creator-focused.",
+              chip: "Official A.I Ranking",
+            },
+            {
+              emoji: "📱",
+              use: "Mobile UGC",
+              tool: "Captions",
+              why: "Extremely fast mobile workflow and social editing. Great for Reels creators.",
+              chip: "Creator Stack",
+            },
+            {
+              emoji: "💬",
+              use: "Real-time conversations",
+              tool: "Tavus",
+              why: "Interactive avatars that can hold live conversations.",
+              chip: "Creator Stack",
+            },
+          ],
+        },
+      };
+
+      /* Beat clock (seconds). Every tween hangs off these. */
+      const T = {
+        suggestsIn: 0.0,
+        typeStart: 0.86,
+        charBase: 0.05,
+        spaceHold: 0.11,
+        sendPad: 0.3, // stillness-before-climax between last keystroke and the tap
+        sendReact: 0.03,
+        streamLead: 0.6, // model "thinking" comma
+        wordStep: 0.15,
+        tableLead: 0.2,
+        rowStep: 0.7,
+        readbackDur: 1.1,
+        tailHold: 0.7,
+      };
+
+      /* =========================================================== icon set */
+      const svg = (b, d, w) =>
+        `<svg viewBox="0 0 ${b} ${b}" width="${w || b}" height="${w || b}" fill="none">${d}</svg>`;
+      const ICO = {
+        bell: svg(
+          20,
+          `<path d="M4.2 15h11.6M10 3.2a4.3 4.3 0 0 1 4.3 4.3c0 3.4 1 5 1.5 5.6H4.2C4.7 12.5 5.7 10.9 5.7 7.5A4.3 4.3 0 0 1 10 3.2Z" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.3 16.6a1.9 1.9 0 0 0 3.4 0" stroke="#fff" stroke-width="1.5"/><path d="M3 17L17 3" stroke="#fff" stroke-width="1.6"/>`,
+          18,
+        ),
+        bars: svg(
+          20,
+          `<rect x="1" y="12.5" width="3" height="4.5" rx="1" fill="#fff"/><rect x="6" y="9.5" width="3" height="7.5" rx="1" fill="#fff"/><rect x="11" y="6.5" width="3" height="10.5" rx="1" fill="#fff"/><rect x="16" y="3.5" width="3" height="13.5" rx="1" fill="rgba(255,255,255,.32)"/>`,
+          19,
+        ),
+        burger: svg(
+          24,
+          `<path d="M5 9.5h14M5 15h9" stroke="#fff" stroke-width="2.1" stroke-linecap="round"/>`,
+          24,
+        ),
+        voiceCircle: svg(
+          24,
+          `<path d="M15.4 3.9a8.6 8.6 0 1 1-9.1 14.6" stroke="#fff" stroke-width="1.9" stroke-linecap="round"/><path d="M6.3 18.5 4 21.2l3.4.5" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.6 8.4a4.1 4.1 0 1 0-3.3 6.9" stroke="#fff" stroke-width="1.9" stroke-linecap="round"/>`,
+          23,
+        ),
+        compose: svg(
+          24,
+          `<path d="M4.5 15.5 15.2 4.8a2 2 0 0 1 2.9 2.9L7.4 18.4l-4 1 1-3.9Z" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/>`,
+          21,
+        ),
+        dots: svg(
+          24,
+          `<circle cx="5" cy="12" r="1.9" fill="#fff"/><circle cx="12" cy="12" r="1.9" fill="#fff"/><circle cx="19" cy="12" r="1.9" fill="#fff"/>`,
+          21,
+        ),
+        plus: svg(
+          24,
+          `<path d="M12 4.5v15M4.5 12h15" stroke="#fff" stroke-width="2.1" stroke-linecap="round"/>`,
+          18,
+        ),
+        mic: svg(
+          24,
+          `<rect x="9" y="2.6" width="6" height="11.4" rx="3" stroke="#fff" stroke-width="1.8"/><path d="M5.5 11.4a6.5 6.5 0 0 0 13 0M12 18v3.2" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>`,
+          17,
+        ),
+        wave: svg(
+          24,
+          `<rect x="4" y="9.5" width="2.4" height="5" rx="1.2" fill="#fff"/><rect x="8.6" y="6" width="2.4" height="12" rx="1.2" fill="#fff"/><rect x="13.2" y="8" width="2.4" height="8" rx="1.2" fill="#fff"/><rect x="17.8" y="10.5" width="2.4" height="3" rx="1.2" fill="#fff"/>`,
+          19,
+        ),
+        arrowUp: svg(
+          24,
+          `<path d="M12 19V5.6M5.8 11.8 12 5.4l6.2 6.4" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>`,
+          19,
+        ),
+        stop: svg(24, `<rect x="7" y="7" width="10" height="10" rx="2" fill="#000"/>`, 18),
+        chevDown: svg(
+          24,
+          `<path d="M12 5v13M6.2 12.2 12 18.2l5.8-6" stroke="#fff" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>`,
+          18,
+        ),
+        shift: svg(
+          24,
+          `<path d="M12 4 4.5 12h4v7h7v-7h4L12 4Z" stroke="#fff" stroke-width="1.7" stroke-linejoin="round" fill="#fff"/>`,
+          19,
+        ),
+        del: svg(
+          24,
+          `<path d="M8.4 5h11a1.6 1.6 0 0 1 1.6 1.6v10.8A1.6 1.6 0 0 1 19.4 19h-11L2.6 12 8.4 5Z" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><path d="M11.4 9.6l5.2 4.8M16.6 9.6l-5.2 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>`,
+          22,
+        ),
+        ret: svg(
+          24,
+          `<path d="M20 6v6.4H5.4M9.6 8.4 5 12.8l4.6 4.4" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>`,
+          21,
+        ),
+        emojiKey: svg(
+          24,
+          `<circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="1.7"/><circle cx="9" cy="10" r="1.2" fill="#fff"/><circle cx="15" cy="10" r="1.2" fill="#fff"/><path d="M8 14.6a5 5 0 0 0 8 0" stroke="#fff" stroke-width="1.7" stroke-linecap="round"/>`,
+          25,
+        ),
+        slack: svg(
+          24,
+          `<path d="M6.2 14.4a2 2 0 1 1-2 2v-2h2Z" fill="#e01e5a"/><path d="M7.3 14.4a2 2 0 0 1 4 0v5a2 2 0 1 1-4 0v-5Z" fill="#e01e5a"/><path d="M9.6 6.2a2 2 0 1 1 2-2v2h-2Z" fill="#36c5f0"/><path d="M9.6 7.3a2 2 0 0 1 0 4h-5a2 2 0 1 1 0-4h5Z" fill="#36c5f0"/><path d="M17.8 9.6a2 2 0 1 1 2 2h-2v-2Z" fill="#2eb67d"/><path d="M16.7 9.6a2 2 0 0 1-4 0v-5a2 2 0 1 1 4 0v5Z" fill="#2eb67d"/><path d="M14.4 17.8a2 2 0 1 1-2 2v-2h2Z" fill="#ecb22e"/><path d="M14.4 16.7a2 2 0 0 1 0-4h5a2 2 0 1 1 0 4h-5Z" fill="#ecb22e"/>`,
+          16,
+        ),
+        gmail: svg(
+          24,
+          `<path d="M3 6.6 12 13l9-6.4V18a1 1 0 0 1-1 1h-3V11l-5 3.6L7 11v8H4a1 1 0 0 1-1-1V6.6Z" fill="#ea4335"/><path d="M17 11v8h3a1 1 0 0 0 1-1V6.6L17 9.5V11Z" fill="#34a853"/><path d="M3 6.6 7 9.5V19H4a1 1 0 0 1-1-1V6.6Z" fill="#4285f4"/><path d="M3 5.6A1.6 1.6 0 0 1 5.4 4.3L12 9l6.6-4.7A1.6 1.6 0 0 1 21 5.6v1L12 13 3 6.6v-.8Z" fill="#fbbc04"/>`,
+          16,
+        ),
+        cal: svg(
+          24,
+          `<rect x="3" y="4" width="18" height="17" rx="3" fill="#1a73e8"/><rect x="3" y="4" width="18" height="4.5" rx="3" fill="#1967d2"/><text x="12" y="17.6" font-size="9" font-weight="700" fill="#fff" text-anchor="middle" font-family="Helvetica">31</text>`,
+          16,
+        ),
+      };
+
+      /* ============================================================== build */
+      const screen = document.getElementById("cge-screen");
+      const el = (cls, html, tag) => {
+        const n = document.createElement(tag || "div");
+        if (cls) n.className = cls;
+        if (html != null) n.innerHTML = html;
+        return n;
+      };
+
+      // --- status bar
+      const sb = el("statusbar");
+      sb.innerHTML =
+        `<div class="sb-left"><div class="sb-clock sb-clock-box">` +
+        `<span id="cge-clock-early">${CONFIG.status.clock}</span>` +
+        `<span id="cge-clock-late">${CONFIG.status.clockLate}</span></div>${ICO.bell}</div>` +
+        `<div class="sb-right">${ICO.bars}<div class="sb-net">${CONFIG.status.net}</div>` +
+        `<div class="sb-batt"><span id="cge-batt-early">${CONFIG.status.battery}</span>` +
+        `<span id="cge-batt-late">${CONFIG.status.batteryLate}</span></div>` +
+        `<div class="sb-batt-cap"></div></div>`;
+
+      // --- thread
+      const port = el("scrollport");
+      const thread = el("thread");
+      thread.setAttribute("data-layout-allow-overflow", "true");
+      thread.setAttribute("data-layout-allow-overlap", "true");
+      thread.setAttribute("data-layout-allow-occlusion", "true");
+      thread.id = "cge-thread";
+
+      const bubble = el("bubble");
+      bubble.id = "cge-bubble";
+      bubble.textContent = CONFIG.prompt + "?";
+      thread.appendChild(bubble);
+
+      const answer = el("answer");
+      answer.id = "cge-answer";
+      thread.appendChild(answer);
+
+      // paragraphs -> word spans (**bold** supported)
+      const paraEls = [];
+      CONFIG.paragraphs.forEach((txt) => {
+        const p = el("para");
+        const inner = el("para-inner");
+        let bold = false;
+        txt.split(/(\s+)/).forEach((tok) => {
+          if (!tok) return;
+          if (/^\s+$/.test(tok)) {
+            inner.appendChild(document.createTextNode(tok));
+            return;
+          }
+          let word = tok;
+          let open = false;
+          if (word.startsWith("**")) {
+            bold = true;
+            open = true;
+            word = word.slice(2);
+          }
+          let close = false;
+          if (word.includes("**")) {
+            close = true;
+            word = word.replace("**", "");
+          }
+          const s = el("w", null, "span");
+          if (bold) s.style.fontWeight = "600";
+          s.textContent = word;
+          if (close) bold = false;
+          void open;
+          inner.appendChild(s);
+        });
+        p.appendChild(inner);
+        answer.appendChild(p);
+        paraEls.push({ p: p, inner: inner, words: [].slice.call(inner.querySelectorAll(".w")) });
+      });
+
+      // table
+      const tbl = el("tbl");
+      tbl.id = "cge-tbl";
+      const headRow = el("tr");
+      headRow.innerHTML =
+        `<div class="td th c1">${CONFIG.table.head[0]}</div>` +
+        `<div class="td th c2">${CONFIG.table.head[1]}</div>` +
+        `<div class="td th c3">${CONFIG.table.head[2]}</div>`;
+      const headRule = el("rule-head");
+      headRule.id = "cge-head-rule";
+      tbl.appendChild(headRow);
+      tbl.appendChild(headRule);
+      answer.appendChild(tbl);
+
+      const rowEls = [];
+      CONFIG.table.rows.forEach((r, i) => {
+        const row = el("tr");
+        row.id = "cge-row" + i;
+        const whyWords = r.why
+          .split(" ")
+          .map((w) => `<span class="w">${w}</span>`)
+          .join(" ");
+        row.innerHTML =
+          `<div class="td c1"><div class="use"><span class="emo">${r.emoji}</span>` +
+          `<span class="w">${r.use}</span></div></div>` +
+          `<div class="td c2"><span class="w">${r.tool}</span></div>` +
+          `<div class="td c3">${whyWords}` +
+          `<div class="chip"><span class="chip-dot">AI</span>${r.chip}</div></div>`;
+        const rule = el("rule-row");
+        rule.id = "cge-rule" + i;
+        tbl.appendChild(row);
+        tbl.appendChild(rule);
+        rowEls.push({
+          row: row,
+          rule: rule,
+          words: [].slice.call(row.querySelectorAll(".w")),
+          emo: row.querySelector(".emo"),
+          chip: row.querySelector(".chip"),
+        });
+      });
+
+      port.appendChild(thread);
+
+      // --- scroll chrome
+      const sbar = el("scrollbar");
+      sbar.id = "cge-scrollbar";
+      const chevWrap = el("chev-wrap", `<div class="chev" id="cge-chev">${ICO.chevDown}</div>`);
+
+      // --- suggestions
+      const suggests = el("suggests");
+      const sugEls = CONFIG.suggestions.map((s) => {
+        const n = el("sug", `<div class="sug-ico">${ICO[s.icon]}</div><div>${s.label}</div>`);
+        suggests.appendChild(n);
+        return n;
+      });
+
+      // --- composer
+      const composer = el("composer");
+      composer.setAttribute("data-layout-allow-occlusion", "true");
+      composer.setAttribute("data-layout-allow-overlap", "true");
+      composer.id = "cge-composer";
+      composer.innerHTML =
+        `<div class="comp-text" id="cge-comp-text"><span class="typed" id="cge-typed"></span></div>` +
+        `<div class="comp-ph" id="cge-comp-ph">Ask ChatGPT</div>` +
+        `<div class="comp-ctrls"><div id="cge-comp-plus">${ICO.plus}</div>` +
+        `<div class="comp-mic" id="cge-comp-mic">${ICO.mic}</div>` +
+        `<div class="blue-btn" id="cge-blue-btn">` +
+        `<div class="blue-face" id="cge-face-wave">${ICO.wave}</div>` +
+        `<div class="blue-face" id="cge-face-send">${ICO.arrowUp}</div>` +
+        `<div class="blue-face" id="cge-face-stop">${ICO.stop}</div></div></div>`;
+
+      // one span per character, each followed by a zero-width caret slot. Hidden
+      // characters still occupy their final space, so the caret needs no measuring.
+      const typedEl = composer.querySelector("#cge-typed");
+      const chEls = [];
+      const curEls = [];
+      const mkCursor = () => {
+        const a = el("cursor-anchor", "<i></i>", "span");
+        typedEl.appendChild(a);
+        curEls.push(a);
+      };
+      mkCursor();
+      CONFIG.prompt.split("").forEach((c) => {
+        const sp = el("ch", c === " " ? "&nbsp;" : c, "span");
+        typedEl.appendChild(sp);
+        chEls.push(sp);
+        mkCursor();
+      });
+
+      // --- keyboard
+      const KB = { w: 33.44, gap: 6.03, inset: 6.67 };
+      const keyboard = el("keyboard");
+      keyboard.setAttribute("data-layout-allow-overflow", "true");
+      keyboard.setAttribute("data-layout-allow-overlap", "true");
+      keyboard.id = "cge-keyboard";
+      const predict = el("predict");
+      predict.id = "cge-predict";
+      const PRED_STAGES = ["start", "mid", "end"];
+      const pdEls = [0, 1, 2].map((col) => {
+        const n = el("pd");
+        const stages = PRED_STAGES.map((k) => {
+          const w = el("pdw", CONFIG.predict[k][col]);
+          n.appendChild(w);
+          return w;
+        });
+        predict.appendChild(n);
+        return { cell: n, stages: stages };
+      });
+      keyboard.appendChild(predict);
+
+      const keyIndex = {};
+      const mkKey = (row, label, x, w, cls) => {
+        const k = el("key" + (cls ? " " + cls : ""), label);
+        k.style.left = x + "px";
+        k.style.width = w + "px";
+        row.appendChild(k);
+        if (/^[A-Z]$/.test(label)) keyIndex[label] = k;
+        return k;
+      };
+      const rowsDef = [
+        { y: 52, keys: "QWERTYUIOP".split(""), x0: KB.inset },
+        { y: 106, keys: "ASDFGHJKL".split(""), x0: 26.33 },
+        { y: 160, keys: "ZXCVBNM".split(""), x0: 65.67 },
+      ];
+      rowsDef.forEach((rd, ri) => {
+        const row = el("krow");
+        row.style.top = rd.y + "px";
+        rd.keys.forEach((k, i) => mkKey(row, k, rd.x0 + i * (KB.w + KB.gap), KB.w));
+        if (ri === 2) {
+          mkKey(row, ICO.shift, KB.inset, 45.33, "dark");
+          mkKey(row, ICO.del, 350, 45.67, "dark");
+        }
+        keyboard.appendChild(row);
+      });
+      const row4 = el("krow");
+      row4.style.top = "214px";
+      const kNum = mkKey(row4, "123", KB.inset, 92.67, "dark small");
+      const kSpace = mkKey(row4, "", 105.33, 191.33);
+      const kRet = mkKey(row4, ICO.ret, 302.67, 93, "dark");
+      keyboard.appendChild(row4);
+      keyboard.appendChild(el("kb-bottom", `<div>${ICO.emojiKey}</div><div>${ICO.mic}</div>`));
+      void kNum;
+      void kRet;
+
+      // --- header (built last so it stacks above the thread)
+      const hdrScrim = el("hdr-scrim");
+      hdrScrim.setAttribute("data-layout-allow-occlusion", "true");
+      hdrScrim.id = "cge-hdr-scrim";
+      const header = el("header");
+      header.innerHTML =
+        `<div class="circle-btn hdr-left">${ICO.burger}</div>` +
+        `<div class="seg" id="cge-seg"><div class="seg-item on">Chat</div><div class="seg-item">Work</div></div>` +
+        `<div class="hdr-right" id="cge-hdr-right">` +
+        `<div class="hdr-right-face" id="cge-hdr-voice">${ICO.voiceCircle}</div>` +
+        `<div class="hdr-right-face" id="cge-hdr-actions">${ICO.compose}${ICO.dots}</div></div>`;
+
+      const statusPlate = el("status-plate");
+      statusPlate.setAttribute("data-layout-allow-occlusion", "true");
+      const compScrim = el("comp-scrim");
+      compScrim.setAttribute("data-layout-allow-occlusion", "true");
+      [
+        port,
+        sbar,
+        chevWrap,
+        suggests,
+        compScrim,
+        composer,
+        keyboard,
+        hdrScrim,
+        statusPlate,
+        header,
+        sb,
+      ].forEach((n) => screen.appendChild(n));
+
+      /* ============================================================ measure
+         All layout reads happen here, once, before any state is set. Widths
+         come off getBoundingClientRect (sub-pixel) divided by --scale; block
+         offsets come off offsetTop, which is unscaled. Deterministic: the same
+         layout every load, so every seek resolves identically.               */
+      // paragraph line grouping + heights
+      const LH = 25.667;
+      paraEls.forEach((pe) => {
+        pe.height = pe.inner.offsetHeight;
+        const tops = pe.words.map((w) => w.offsetTop);
+        const uniq = [];
+        tops.forEach((t) => {
+          if (!uniq.length || t - uniq[uniq.length - 1] > 4) uniq.push(t);
+        });
+        pe.lineOf = tops.map((t) => {
+          let li = 0;
+          uniq.forEach((u, i) => {
+            if (Math.abs(t - u) <= 4) li = i;
+          });
+          return li;
+        });
+        pe.lineHeights = uniq.map((u, i) => Math.min(pe.height, (i + 1) * LH + 1));
+      });
+
+      const headRowH = headRow.offsetHeight;
+      rowEls.forEach((re) => (re.h = re.row.offsetHeight));
+
+      // Scroll anchors: keep the newest revealed element just above the composer.
+      // Read here, in the natural layout — by timeline-build time every paragraph
+      // and row has been collapsed to height 0 and offsetTop/Height would lie.
+      const ANCHOR = 772;
+      const anchorOf = (node) => Math.min(0, ANCHOR - (node.offsetTop + node.offsetHeight));
+      paraEls.forEach((pe) => (pe.anchor = anchorOf(pe.p)));
+      rowEls.forEach((re) => (re.anchor = anchorOf(re.row)));
+      const Y_FINAL = 37 - bubble.offsetTop; // IMG_0937: bubble top rests at y=37
+
+      /* ====================================================== initial state */
+      gsap.set(composer, { y: -309, x: 0, width: 378, height: 48 }); // keyboard-up rest
+      gsap.set([answer], { autoAlpha: 1 });
+      gsap.set(
+        paraEls.map((p) => p.p),
+        { height: 0 },
+      );
+      paraEls.forEach((pe) => gsap.set(pe.words, { opacity: 0 }));
+      gsap.set([headRow, headRule], { height: 0, opacity: 0 });
+      rowEls.forEach((re) => {
+        gsap.set(re.row, { height: 0 });
+        gsap.set(re.rule, { height: 0 });
+        gsap.set(re.words, { opacity: 0 });
+        gsap.set([re.emo, re.chip], { opacity: 0 });
+      });
+      gsap.set(bubble, { autoAlpha: 0 });
+      gsap.set(thread, { y: 0 });
+      gsap.set(sbar, { autoAlpha: 0, y: 60, height: 250 });
+      gsap.set(chevWrap.firstChild, { autoAlpha: 0, y: 10 });
+      gsap.set(sugEls, { autoAlpha: 0, y: 14 });
+      gsap.set(chEls, { opacity: 0 });
+      gsap.set(curEls, { autoAlpha: 0 });
+      gsap.set(document.getElementById("cge-comp-ph"), { autoAlpha: 1 });
+      gsap.set(document.getElementById("cge-face-send"), { autoAlpha: 0, scale: 0.6 });
+      gsap.set(document.getElementById("cge-face-stop"), { autoAlpha: 0, scale: 0.6 });
+      gsap.set(document.getElementById("cge-hdr-actions"), { autoAlpha: 0 });
+      gsap.set(document.getElementById("cge-hdr-right"), { width: 44 });
+      gsap.set(document.getElementById("cge-seg"), { autoAlpha: 1, scale: 1 });
+      gsap.set(hdrScrim, { autoAlpha: 1 });
+      gsap.set(keyboard, { y: 0 });
+      pdEls.forEach((pd) => {
+        gsap.set(pd.stages[0], { autoAlpha: 1 });
+        gsap.set([pd.stages[1], pd.stages[2]], { autoAlpha: 0 });
+      });
+      gsap.set(document.getElementById("cge-clock-late"), { autoAlpha: 0 });
+      gsap.set(document.getElementById("cge-batt-late"), { autoAlpha: 0 });
+
+      /* ============================================================ timeline */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* ---- 1. suggestions cascade in (waterfall entry, weight-ordered) */
+      sugEls.forEach((n, i) => {
+        tl.to(
+          n,
+          { autoAlpha: 1, y: 0, duration: 0.42, ease: "power3.out" },
+          T.suggestsIn + i * 0.09,
+        );
+      });
+
+      /* ---- 2. typing. Each keystroke IS the cause: key flash -> width step. */
+      const t0 = T.typeStart;
+      const chars = CONFIG.prompt.split("");
+      const charT = [];
+      let t = t0;
+      chars.forEach((c, i) => {
+        charT.push(t);
+        t += c === " " ? T.charBase + T.spaceHold : T.charBase;
+        void i;
+      });
+      const typeEnd = t;
+
+      // composer grows to two rows on the first keystroke
+      tl.to(composer, { height: 92, duration: 0.24, ease: "power2.out" }, t0 - 0.02);
+      tl.to(document.getElementById("cge-comp-ph"), { autoAlpha: 0, duration: 0.12 }, t0 - 0.02);
+      tl.to(curEls[0], { autoAlpha: 1, duration: 0.01 }, t0 - 0.02);
+      // suggestions clear — caused by the first keystroke
+      sugEls.forEach((n, i) => {
+        tl.to(n, { autoAlpha: 0, y: 10, duration: 0.2, ease: "power2.in" }, t0 - 0.02 + i * 0.04);
+      });
+      // voice waveform -> send arrow
+      tl.to(
+        document.getElementById("cge-face-wave"),
+        { autoAlpha: 0, scale: 0.6, duration: 0.14 },
+        t0,
+      );
+      tl.to(
+        document.getElementById("cge-face-send"),
+        { autoAlpha: 1, scale: 1, duration: 0.24, ease: "back.out(1.6)" },
+        t0 + 0.04,
+      );
+
+      chars.forEach((c, i) => {
+        tl.to(chEls[i], { opacity: 1, duration: 0.01 }, charT[i]);
+        tl.to(curEls[i], { autoAlpha: 0, duration: 0.01 }, charT[i]);
+        tl.to(curEls[i + 1], { autoAlpha: 1, duration: 0.01 }, charT[i]);
+        const k = keyIndex[c.toUpperCase()];
+        const target = c === " " ? kSpace : k;
+        if (target) {
+          tl.to(target, { backgroundColor: "#5f5f5f", duration: 0.04 }, charT[i] - 0.03);
+          tl.to(
+            target,
+            { backgroundColor: c === " " ? "#3c3c3c" : "#3c3c3c", duration: 0.09 },
+            charT[i] + 0.02,
+          );
+        }
+      });
+
+      // caret blink (finite, deterministic)
+      const blinkFrom = t0 + 0.1;
+      const blinks = Math.floor((typeEnd + T.sendPad - blinkFrom) / 1.06);
+      const lastCur = curEls[curEls.length - 1];
+      for (let i = 0; i < blinks; i++) {
+        const off = blinkFrom + i * 1.06 + 0.53;
+        const on = blinkFrom + i * 1.06 + 1.06;
+        if (off > typeEnd) tl.to(lastCur, { autoAlpha: 0, duration: 0.02 }, off);
+        if (on > typeEnd) tl.to(lastCur, { autoAlpha: 1, duration: 0.02 }, on);
+      }
+
+      // predictive row swaps at word boundaries
+      const swapPredict = (at, stage) => {
+        pdEls.forEach((pd) => {
+          tl.to(pd.stages[stage - 1], { autoAlpha: 0, duration: 0.06 }, at);
+          tl.to(pd.stages[stage], { autoAlpha: 1, duration: 0.08 }, at + 0.06);
+        });
+      };
+      swapPredict(charT[CONFIG.prompt.indexOf(" ai ") + 1], 1);
+      swapPredict(charT[CONFIG.prompt.length - 1], 2);
+
+      /* ---- 3. send. Tap ignites: bubble flight + keyboard down + header morph */
+      const tSend = typeEnd + T.sendPad;
+      const blueBtn = document.getElementById("cge-blue-btn");
+      tl.to(blueBtn, { scale: 0.86, duration: 0.06, ease: "power2.out" }, tSend);
+      tl.to(blueBtn, { scale: 1, duration: 0.18, ease: "power2.out" }, tSend + 0.06);
+
+      const tGo = tSend + T.sendReact;
+      // composer empties and collapses; keyboard leaves downward
+      tl.to(chEls, { opacity: 0, duration: 0.01 }, tGo);
+      tl.to(curEls, { autoAlpha: 0, duration: 0.01 }, tGo);
+      tl.to(composer, { height: 48, width: 326, duration: 0.3, ease: "power2.out" }, tGo);
+      tl.to(composer, { y: 0, x: 26, duration: 0.32, ease: "power2.out" }, tGo);
+      tl.to(document.getElementById("cge-comp-ph"), { autoAlpha: 1, duration: 0.2 }, tGo + 0.12);
+      tl.to(keyboard, { y: 340, duration: 0.3, ease: "power2.out" }, tGo);
+      tl.to(document.getElementById("cge-face-send"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.28);
+      tl.to(
+        document.getElementById("cge-face-stop"),
+        { autoAlpha: 1, scale: 1, duration: 0.2, ease: "power2.out" },
+        tGo + 0.34,
+      );
+
+      // header: segmented control out, right control widens into the actions pill
+      tl.to(document.getElementById("cge-seg"), { autoAlpha: 0, scale: 0.92, duration: 0.16 }, tGo);
+      tl.to(document.getElementById("cge-hdr-voice"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.02);
+      tl.to(
+        document.getElementById("cge-hdr-right"),
+        { width: 108, duration: 0.26, ease: "power2.out" },
+        tGo + 0.06,
+      );
+      tl.to(
+        document.getElementById("cge-hdr-actions"),
+        { autoAlpha: 1, duration: 0.18 },
+        tGo + 0.16,
+      );
+
+      // the bubble: born at the composer's text position, lands in its thread slot
+      const bubbleTop = bubble.offsetTop + thread.offsetTop; // 128
+      const dy = 526.7 - 48 + 10 - bubbleTop; // keyboard-up composer text row -> slot
+      tl.fromTo(
+        bubble,
+        { autoAlpha: 0, y: dy, scale: 0.94, transformOrigin: "100% 50%" },
+        { autoAlpha: 1, y: 0, scale: 1, duration: 0.34, ease: "power3.out" },
+        tGo + 0.02,
+      );
+
+      /* ---- 4. stream. Words land in reading order; the box grows by the line. */
+      let tw = tGo + 0.34 + T.streamLead;
+      const scrollTo = (target, at, dur) =>
+        tl.to(thread, { y: target, duration: dur || 0.5, ease: "power2.out" }, at);
+
+      paraEls.forEach((pe, pi) => {
+        let lastLine = -1;
+        pe.words.forEach((w, wi) => {
+          const li = pe.lineOf[wi];
+          if (li !== lastLine) {
+            tl.to(pe.p, { height: pe.lineHeights[li], duration: 0.16, ease: "power2.out" }, tw);
+            lastLine = li;
+          }
+          tl.to(w, { opacity: 1, duration: 0.1 }, tw);
+          tw += T.wordStep;
+        });
+        scrollTo(pe.anchor, tw - T.wordStep * 2, 0.6);
+        if (pi === 0) tw += 0.12;
+      });
+
+      /* ---- 5. the table assembles, row by row */
+      tw += T.tableLead;
+      tl.to(
+        [headRow, headRule],
+        { height: (i) => (i === 0 ? headRowH : 2), opacity: 1, duration: 0.2, ease: "power2.out" },
+        tw,
+      );
+      tw += 0.34;
+
+      rowEls.forEach((re) => {
+        tl.to(re.row, { height: re.h, duration: 0.22, ease: "power2.out" }, tw);
+        tl.to(re.emo, { opacity: 1, duration: 0.14 }, tw + 0.04);
+        re.words.forEach((w, wi) => {
+          tl.to(w, { opacity: 1, duration: 0.09 }, tw + 0.08 + wi * 0.028);
+        });
+        tl.to(re.chip, { opacity: 1, duration: 0.2, ease: "power2.out" }, tw + 0.42);
+        tl.to(re.rule, { height: 2, duration: 0.12 }, tw + 0.2);
+        scrollTo(re.anchor, tw + 0.1, 0.72);
+        tw += T.rowStep;
+      });
+
+      /* ---- 6. streaming ends, then the read-back scroll lands on the hero frame */
+      tl.to(document.getElementById("cge-face-stop"), { autoAlpha: 0, duration: 0.14 }, tw);
+      tl.to(
+        document.getElementById("cge-face-wave"),
+        { autoAlpha: 1, scale: 1, duration: 0.22, ease: "power2.out" },
+        tw + 0.06,
+      );
+
+      const tRead = tw + 0.24;
+      tl.to(sbar, { autoAlpha: 1, duration: 0.14 }, tRead);
+      // the minute rolls over between the source frames — keep that
+      tl.to(
+        document.getElementById("cge-clock-early"),
+        { autoAlpha: 0, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(
+        document.getElementById("cge-clock-late"),
+        { autoAlpha: 1, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(
+        document.getElementById("cge-batt-early"),
+        { autoAlpha: 0, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(
+        document.getElementById("cge-batt-late"),
+        { autoAlpha: 1, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(thread, { y: Y_FINAL, duration: T.readbackDur, ease: "power2.inOut" }, tRead);
+      tl.to(sbar, { y: 0, duration: T.readbackDur, ease: "power2.inOut" }, tRead);
+      tl.to(
+        chevWrap.firstChild,
+        { autoAlpha: 1, y: 0, duration: 0.3, ease: "back.out(1.5)" },
+        tRead + T.readbackDur - 0.35,
+      );
+
+      window.__timelines["chatgpt-exchange"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+{/* hf:generated-footer */}
+
+Tagged `showcase` `mock-ui` `ai` `chat` `vertical` `ad-template`.
+
+Created by Jake Moran.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/claude-exchange.mdx b/docs/catalog/blocks/claude-exchange.mdx
new file mode 100644
index 000000000..d9983b228
--- /dev/null
+++ b/docs/catalog/blocks/claude-exchange.mdx
@@ -0,0 +1,1594 @@
+---
+title: "Claude Exchange"
+description: "A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="claude-exchange preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/claude-exchange.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/claude-exchange.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
+
+## Install
+
+<InstallCommand command="npx hyperframes add claude-exchange" item="claude-exchange" />
+
+That writes `compositions/claude-exchange.html`, plus 7 supporting files under `assets/fonts/`.
+
+## Add it to your video
+
+It runs for 21.4 seconds at 1080×1920. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="claude-exchange"
+  data-composition-src="compositions/claude-exchange.html"
+  data-start="0"
+  data-duration="21.4"
+  data-track-index="1"
+  data-width="1080"
+  data-height="1920"
+></div>
+```
+
+Move it in time with `data-start`. Put it on a different timeline row with
+`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
+
+## Source
+
+<Accordion title={`claude-exchange.html`}>
+
+```html
+<!doctype html>
+<html lang="en" data-resolution="portrait">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1080, height=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* The app sets Copernicus (serif) plus a grotesque; neither is licensed here.
+         EB Garamond and Inter are redistributable OFL stand-ins, embedded under
+         neutral family names so the composition remains self-contained. */
+      @font-face {
+        font-family: "ClaudeSerif";
+        font-weight: 400;
+        font-display: block;
+        src: url("assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSerif";
+        font-weight: 700;
+        font-display: block;
+        src: url("assets/fonts/eb-garamond-latin-700-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSans";
+        font-weight: 400;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSans";
+        font-weight: 500;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSans";
+        font-weight: 600;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1080px;
+        height: 1920px;
+        overflow: hidden;
+        background: #20201f;
+      }
+      body,
+      #cle-root {
+        font-family: "ClaudeSans", sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      :root {
+        --scale: 2.1968; /* 1920 / 874 */
+        --bg: #20201f;
+        --card: #1c1c1b;
+        --hair: #424240;
+        --inset: #131313;
+        --kb-bg: #1b1b1c;
+        --key: #404040;
+        --ink: #f8f8f4;
+        --muted: #94948c;
+        --muted2: #c0c0b4;
+        --accent: #d97757;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        background: var(--bg);
+      }
+      .screen {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 402px;
+        height: 874px;
+        margin-left: -201px;
+        background: var(--bg);
+        overflow: hidden;
+        transform-origin: top center;
+        transform: scale(var(--scale));
+      }
+
+      /* ----------------------------------------------------------- status bar */
+      .statusbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 65px;
+        z-index: 40;
+        display: flex;
+        align-items: center;
+        padding: 0 34px 0 16px;
+        color: #fff;
+      }
+      .sb-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: 31.7px;
+      }
+      .sb-clock {
+        font-size: 17.2px;
+        font-weight: 600;
+        letter-spacing: 1.3px;
+        position: relative;
+        width: 40px;
+        height: 22px;
+      }
+      .sb-clock span {
+        position: absolute;
+        left: 0;
+        top: 0;
+        white-space: nowrap;
+      }
+      .sb-right {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        margin-left: auto;
+      }
+      .sb-net {
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: -0.2px;
+      }
+      .sb-batt {
+        width: 30px;
+        height: 15px;
+        border-radius: 4.5px;
+        background: #fff;
+        color: #000;
+        font-size: 11px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        letter-spacing: -0.2px;
+      }
+      .sb-batt-cap {
+        width: 2px;
+        height: 6px;
+        background: rgba(255, 255, 255, 0.45);
+        border-radius: 0 2px 2px 0;
+        margin-left: -4px;
+      }
+
+      /* --------------------------------------------------------------- header */
+      .status-plate {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 54.7px;
+        z-index: 34;
+        background: var(--bg);
+      }
+      .hdr-scrim {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 112px;
+        z-index: 30;
+        background: linear-gradient(
+          to bottom,
+          rgba(32, 32, 31, 0.92) 46%,
+          rgba(32, 32, 31, 0) 100%
+        );
+      }
+      .header {
+        position: absolute;
+        top: 62px;
+        left: 0;
+        right: 0;
+        height: 44px;
+        z-index: 40;
+      }
+      .circle-btn {
+        position: absolute;
+        top: 0;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: rgba(255, 255, 255, 0.035);
+        border: 1px solid rgba(255, 255, 255, 0.11);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .hdr-left {
+        left: 16px;
+      }
+      .hdr-right {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: #272726;
+        border: 1px solid rgba(255, 255, 255, 0.07);
+        overflow: hidden;
+      }
+      .hdr-right-face {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+      }
+
+      /* --------------------------------------------------------- empty state */
+      .empty {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 193.7px;
+        z-index: 12;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .empty-mark {
+        width: 35.3px;
+        height: 35.3px;
+      }
+      .empty-head {
+        margin-top: 21px;
+        font-family: "ClaudeSerif", serif;
+        font-size: 23.2px;
+        color: #e8e8de;
+        white-space: pre;
+      }
+
+      /* --------------------------------------------------------------- thread */
+      .scrollport {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        z-index: 10;
+      }
+      .thread {
+        position: relative;
+        padding: 124px 13.5px 180px 16.3px;
+      }
+
+      .bubble {
+        width: fit-content;
+        max-width: 322px;
+        margin-left: auto;
+        background: var(--inset);
+        border-radius: 24px;
+        padding: 14.7px 13px 9.3px;
+        color: var(--ink);
+        font-size: 18px;
+        line-height: 24px;
+      }
+
+      /* An .abox is the element whose height animates. box-sizing:border-box means a
+         height of 0 cannot shrink past the element's own padding, so every gap lives on
+         the child instead — otherwise collapsed blocks keep their top gaps and stack up. */
+      .abox {
+        overflow: hidden;
+      }
+      .tool-row {
+        display: flex;
+        align-items: center;
+        gap: 13px;
+        min-height: 26px;
+        color: var(--muted);
+        font-size: 14px;
+      }
+      .tool-row .chev {
+        margin-left: auto;
+      }
+      .tool-ico {
+        width: 16px;
+        height: 16px;
+        flex: none;
+      }
+
+      .answer {
+        font-family: "ClaudeSerif", serif;
+        font-size: 18px;
+        line-height: 27.3px;
+        color: var(--ink);
+      }
+      .para {
+        overflow: hidden;
+      }
+      .abox > .para,
+      .abox > .bul {
+        overflow: visible;
+      }
+      .w {
+        opacity: 0;
+      }
+      .bul {
+        position: relative;
+        padding-left: 24px;
+        overflow: hidden;
+      }
+      .bul::before {
+        content: "•";
+        position: absolute;
+        left: 9.7px;
+        top: var(--gap, 0px);
+      }
+      .cite {
+        display: inline-block;
+        padding: 1px 7px;
+        margin: 0 2px;
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 0.07);
+        font-family: "ClaudeSans", sans-serif;
+        font-size: 13px;
+        vertical-align: 2px;
+        color: #ded9d0;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        min-height: 20px;
+        padding-top: 24px;
+      }
+      .act-ico {
+        width: 16px;
+        height: 16px;
+        opacity: 0.62;
+      }
+      .src-stack {
+        display: flex;
+        margin-left: 6px;
+      }
+      .src-dot {
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        margin-left: -5px;
+        border: 1.2px solid var(--bg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 6px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .src-label {
+        font-size: 13.5px;
+        color: var(--muted);
+        margin-left: 5px;
+      }
+
+      .disclaim {
+        display: flex;
+        align-items: flex-start;
+        padding-top: 28px;
+      }
+      .disclaim-mark {
+        width: 28px;
+        height: 28px;
+        flex: none;
+      }
+      .disclaim-text {
+        margin-left: auto;
+        text-align: right;
+        font-size: 13px;
+        line-height: 19px;
+        color: var(--muted);
+      }
+
+      /* ---------------------------------------------------------- scroll chrome */
+      .chev-wrap {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 720px;
+        z-index: 25;
+        display: flex;
+        justify-content: center;
+      }
+      .chev-btn {
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
+        background: #2a2a28;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* -------------------------------------------------------------- composer */
+      .comp-scrim {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 118px;
+        z-index: 18;
+        background: linear-gradient(to top, var(--bg) 16%, rgba(32, 32, 31, 0) 100%);
+      }
+      .composer {
+        position: absolute;
+        left: 8px;
+        bottom: 34px;
+        width: 385.7px;
+        height: 172.7px;
+        border-radius: 26px;
+        background: var(--card);
+        border: 1px solid var(--hair);
+        z-index: 20;
+        overflow: hidden;
+      }
+      .notice {
+        position: absolute;
+        top: 8px;
+        left: 8.7px;
+        right: 8.7px;
+        height: 58.7px;
+        border-radius: 19px;
+        background: var(--inset);
+        display: flex;
+        align-items: center;
+        padding: 0 14px 0 16px;
+      }
+      .notice-text {
+        font-size: 14px;
+        line-height: 21px;
+        color: #d8d8d0;
+        width: 268px;
+      }
+      .notice-x {
+        margin-left: auto;
+        width: 16px;
+        height: 16px;
+        opacity: 0.75;
+      }
+
+      .comp-text {
+        position: absolute;
+        bottom: 40px;
+        left: 18px;
+        right: 18px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        color: var(--ink);
+        font-size: 17px;
+        white-space: pre;
+      }
+      .comp-ph {
+        position: absolute;
+        bottom: 40px;
+        left: 18px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        color: #8c8c84;
+        font-size: 17px;
+      }
+      .typed {
+        white-space: pre;
+      }
+      .typed .ch {
+        opacity: 0;
+      }
+      .cursor-anchor {
+        position: relative;
+        display: inline-block;
+        width: 0;
+        height: 22px;
+        vertical-align: -4px;
+      }
+      .cursor-anchor i {
+        position: absolute;
+        left: 1px;
+        top: 0;
+        width: 2px;
+        height: 22px;
+        background: var(--accent);
+      }
+
+      .comp-ctrls {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 60px;
+      }
+      .comp-ctrls > * {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .plus-btn {
+        left: 12px;
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        background: var(--inset);
+      }
+      .model-pill {
+        left: 53.3px;
+        height: 32px;
+        border-radius: 16px;
+        background: var(--inset);
+        padding: 0 13px;
+        gap: 6px;
+        font-size: 14.5px;
+        color: var(--ink);
+      }
+      .model-pill em {
+        font-style: normal;
+        color: #8c8c84;
+      }
+      .comp-mic {
+        right: 55px;
+        width: 20px;
+        height: 20px;
+      }
+      .voice-btn {
+        right: 8px;
+        width: 35.7px;
+        height: 35.7px;
+        border-radius: 18px;
+        background: #f7f7f3;
+      }
+      .stop-btn {
+        right: 18px;
+        width: 13.7px;
+        height: 13.7px;
+        border-radius: 3.4px;
+        background: #f7f7f3;
+      }
+      .send-btn {
+        right: 8px;
+        width: 35.7px;
+        height: 35.7px;
+        border-radius: 18px;
+        background: var(--accent);
+      }
+
+      /* -------------------------------------------------------------- keyboard */
+      .keyboard {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 539px;
+        height: 335px;
+        background: var(--kb-bg);
+        z-index: 22;
+      }
+      .predict {
+        position: relative;
+        height: 52px;
+        display: flex;
+        align-items: center;
+      }
+      .pd {
+        flex: 1;
+        position: relative;
+        align-self: stretch;
+        font-size: 17px;
+        color: #e8e8ea;
+        border-right: 1px solid rgba(235, 235, 245, 0.16);
+      }
+      .pdw {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .pd:last-child {
+        border-right: none;
+      }
+      .krow {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 43px;
+      }
+      .key {
+        position: absolute;
+        top: 0;
+        height: 43px;
+        border-radius: 5px;
+        background: var(--key);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 22.2px;
+        font-weight: 400;
+      }
+      .key.dark {
+        background: #2f2f2f;
+      }
+      .key.small {
+        font-size: 16px;
+      }
+      .kb-bottom {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 279.7px;
+        height: 55px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 29px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-hf-id="hf-lhdl"
+      id="cle-root"
+      data-composition-id="claude-exchange"
+      data-fps="60"
+      data-start="0"
+      data-duration="21.4"
+      data-width="1080"
+      data-height="1920"
+    >
+      <div data-hf-id="hf-tan6" class="stage">
+        <div
+          data-hf-id="hf-ztck"
+          id="cle-scene"
+          class="clip"
+          data-start="0"
+          data-duration="21.4"
+          data-track-index="1"
+        >
+          <div data-hf-id="hf-ylue" class="screen" id="cle-screen"></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ==================================================================
+         TEMPLATE CONFIG — edit only this block to re-skin the exchange.
+         ================================================================== */
+      const CONFIG = {
+        status: { clock: "2:36", clockLate: "2:37", net: "5G+", battery: 87 },
+        emptyHeading: "What can we tackle together?",
+        notice: "Opus consumes usage limits faster than other models",
+        model: { name: "Opus 4.8", effort: "High" },
+        placeholder: "Chat with Claude",
+        placeholderReply: "Reply to Claude",
+        prompt: "What's the best tool for ai avatars?",
+        predict: {
+          start: ["I", "The", "I'm"],
+          end: ["I", "Do", "How"],
+        },
+        thinking: "Weighing accuracy against current market…",
+        lead: "I'll search for the current state of this space since AI avatar tools move fast.",
+        search: "best AI avatar video generator 2026",
+        collapsed: "2 steps",
+        answer: [
+          {
+            t: "p",
+            text: "It depends on what you're making, but the field has consolidated fast and one platform now covers most of it.",
+          },
+          {
+            t: "p",
+            text: "**HeyGen** is where most teams land. Independent testing, not just vendor blogs, puts **Avatar IV** highest for talking-head realism, with facial micro-expressions and gesture control that hold up at a full-screen crop {HeyGen}. It also has the deepest enterprise adoption of the group, including a large share of the Fortune 100, which matters if you need the same presenter on brand across a year of campaigns.",
+          },
+          { t: "p", text: "By use case, the pieces shake out roughly like this:" },
+          { t: "b", text: "**Marketing / hyper-realistic talking heads** → Avatar IV" },
+          { t: "b", text: "**Enterprise training** → Video Translate for every locale" },
+          {
+            t: "b",
+            text: "**UGC-style performance ads** → Instant Avatar from one selfie, then batch the variants",
+          },
+          { t: "b", text: "**Real-time conversational / interactive** → Interactive Avatar" },
+          {
+            t: "b",
+            text: "**Custom digital twin from a selfie** → Instant Avatar in about five minutes",
+          },
+          {
+            t: "p",
+            text: "One distinction worth keeping in mind: a dedicated avatar platform optimizes the whole presenter workflow — script, voice, lip sync, translation, brand kit — whereas a general video model gives you cinematic scenes but takes far more skill to land the same person on camera twice.",
+          },
+          {
+            t: "p",
+            text: "Given your day job you probably have a sharper read than these roundups on where HeyGen actually leads versus where the reviews are being generous. Is this for a specific project, or comparing for positioning?",
+          },
+        ],
+        sources: { count: 7, dots: ["#1b6ac9", "#2b7fff", "#0f4fa8"] },
+        disclaimer: ["Claude is AI and can make mistakes.", "Please double-check responses."],
+      };
+
+      /* Beat clock (seconds). */
+      const T = {
+        emptyIn: 0.0,
+        typeStart: 0.86,
+        charBase: 0.05,
+        spaceHold: 0.11,
+        sendPad: 0.3,
+        sendReact: 0.03,
+        spinLead: 0.45,
+        toolStep: 0.5,
+        wordStep: 0.04,
+        paraGap: 0.12,
+        collapseAt: 0.55,
+        tailStep: 0.4,
+      };
+
+      /* ============================================================ icon set */
+      const svg = (b, d, w) =>
+        `<svg viewBox="0 0 ${b} ${b}" width="${w || b}" height="${w || b}" fill="none">${d}</svg>`;
+
+      // Claude's starburst: 12 tapered rays. Deterministic, drawn from a fixed table.
+      const burst = (size, color) => {
+        let rays = "";
+        for (let i = 0; i < 12; i++) {
+          const a = i * 30;
+          rays +=
+            `<rect x="10.85" y="1.1" width="2.3" height="21.8" rx="1.15" fill="${color}"` +
+            ` transform="rotate(${a} 12 12)"/>`;
+        }
+        return `<svg viewBox="0 0 24 24" width="${size}" height="${size}">${rays}</svg>`;
+      };
+
+      const ICO = {
+        bell: svg(
+          20,
+          `<path d="M4.2 15h11.6M10 3.2a4.3 4.3 0 0 1 4.3 4.3c0 3.4 1 5 1.5 5.6H4.2C4.7 12.5 5.7 10.9 5.7 7.5A4.3 4.3 0 0 1 10 3.2Z" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.3 16.6a1.9 1.9 0 0 0 3.4 0" stroke="#fff" stroke-width="1.5"/><path d="M3 17L17 3" stroke="#fff" stroke-width="1.6"/>`,
+          18,
+        ),
+        bars: svg(
+          20,
+          `<rect x="1" y="12.5" width="3" height="4.5" rx="1" fill="#fff"/><rect x="6" y="9.5" width="3" height="7.5" rx="1" fill="#fff"/><rect x="11" y="6.5" width="3" height="10.5" rx="1" fill="#fff"/><rect x="16" y="3.5" width="3" height="13.5" rx="1" fill="rgba(255,255,255,.32)"/>`,
+          16,
+        ),
+        burger: svg(
+          24,
+          `<path d="M5 9.5h14M5 15h9" stroke="#e8e8e0" stroke-width="2.1" stroke-linecap="round"/>`,
+          22,
+        ),
+        ghost: svg(
+          24,
+          `<path d="M5 20.4V11a7 7 0 0 1 14 0v9.4l-2.3-1.6-2.3 1.6-2.4-1.6-2.3 1.6-2.4-1.6L5 20.4Z" stroke="#e8e8e0" stroke-width="1.7" stroke-linejoin="round"/><circle cx="9.4" cy="11.2" r="1.15" fill="#e8e8e0"/><circle cx="14.6" cy="11.2" r="1.15" fill="#e8e8e0"/>`,
+          24,
+        ),
+        newChat: svg(
+          24,
+          `<path d="M12 3.4c5 0 8.8 3.4 8.8 7.8 0 4.5-3.8 7.9-8.8 7.9-.9 0-1.8-.1-2.6-.3l-4 1.6 1.1-3.5a7.6 7.6 0 0 1-3.3-5.7C3.2 6.8 7 3.4 12 3.4Z" fill="#e8e8e0"/><path d="M12 7.6v6.4M8.8 10.8h6.4" stroke="#272726" stroke-width="1.9" stroke-linecap="round"/>`,
+          23,
+        ),
+        dots: svg(
+          24,
+          `<circle cx="5" cy="12" r="1.9" fill="#e8e8e0"/><circle cx="12" cy="12" r="1.9" fill="#e8e8e0"/><circle cx="19" cy="12" r="1.9" fill="#e8e8e0"/>`,
+          21,
+        ),
+        plus: svg(
+          24,
+          `<path d="M12 4.8v14.4M4.8 12h14.4" stroke="#f0f0e8" stroke-width="2" stroke-linecap="round"/>`,
+          17,
+        ),
+        mic: svg(
+          24,
+          `<rect x="9.2" y="2.8" width="5.6" height="11" rx="2.8" stroke="#e8e8e0" stroke-width="1.8"/><path d="M5.8 11.2a6.2 6.2 0 0 0 12.4 0M12 17.6v3.2" stroke="#e8e8e0" stroke-width="1.8" stroke-linecap="round"/>`,
+          20,
+        ),
+        wave: svg(
+          24,
+          `<rect x="4.4" y="9.6" width="2.2" height="4.8" rx="1.1" fill="#23231f"/><rect x="8.8" y="6.2" width="2.2" height="11.6" rx="1.1" fill="#23231f"/><rect x="13.2" y="8.2" width="2.2" height="7.6" rx="1.1" fill="#23231f"/><rect x="17.6" y="10.6" width="2.2" height="2.8" rx="1.1" fill="#23231f"/>`,
+          20,
+        ),
+        arrowUp: svg(
+          24,
+          `<path d="M12 19V5.6M5.8 11.8 12 5.4l6.2 6.4" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>`,
+          20,
+        ),
+        close: svg(
+          24,
+          `<path d="M6 6l12 12M18 6 6 18" stroke="#cfcfc6" stroke-width="1.9" stroke-linecap="round"/>`,
+          16,
+        ),
+        clock: svg(
+          24,
+          `<path d="M12 4a8 8 0 1 1-7.4 5" stroke="#94948c" stroke-width="1.8" stroke-linecap="round"/><path d="M4.3 5.2 4 9.4l4.2-.5" stroke="#94948c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8v4.3l3 1.8" stroke="#94948c" stroke-width="1.8" stroke-linecap="round"/>`,
+          16,
+        ),
+        globe: svg(
+          24,
+          `<circle cx="12" cy="12" r="8.4" stroke="#94948c" stroke-width="1.7"/><path d="M3.6 12h16.8M12 3.6c2.2 2.3 3.3 5.1 3.3 8.4S14.2 18.1 12 20.4c-2.2-2.3-3.3-5.1-3.3-8.4S9.8 5.9 12 3.6Z" stroke="#94948c" stroke-width="1.7"/>`,
+          16,
+        ),
+        chevR: svg(
+          24,
+          `<path d="M9.5 5.5 16 12l-6.5 6.5" stroke="#94948c" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/>`,
+          15,
+        ),
+        arrowDown: svg(
+          24,
+          `<path d="M12 5v13M6.2 12.2 12 18.2l5.8-6" stroke="#e8e8e0" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>`,
+          18,
+        ),
+        copy: svg(
+          24,
+          `<rect x="8.6" y="3.4" width="12" height="14" rx="2.6" stroke="#f0f0e8" stroke-width="1.8"/><path d="M15.4 20.6H6.2a2.6 2.6 0 0 1-2.6-2.6V7.4" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round"/>`,
+          16,
+        ),
+        share: svg(
+          24,
+          `<path d="M12 16.4V4.2M6.8 9.4 12 3.8l5.2 5.6M4.4 15v3.6a2 2 0 0 0 2 2h11.2a2 2 0 0 0 2-2V15" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>`,
+          16,
+        ),
+        play: svg(
+          24,
+          `<path d="M7.6 4.6 19 12 7.6 19.4V4.6Z" stroke="#f0f0e8" stroke-width="1.8" stroke-linejoin="round"/>`,
+          16,
+        ),
+        retry: svg(
+          24,
+          `<path d="M20 12a8 8 0 1 1-3.2-6.4" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round"/><path d="M20.4 4v5h-5" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>`,
+          16,
+        ),
+        shift: svg(
+          24,
+          `<path d="M12 4 4.5 12h4v7h7v-7h4L12 4Z" stroke="#fff" stroke-width="1.7" stroke-linejoin="round" fill="#fff"/>`,
+          19,
+        ),
+        del: svg(
+          24,
+          `<path d="M8.4 5h11a1.6 1.6 0 0 1 1.6 1.6v10.8A1.6 1.6 0 0 1 19.4 19h-11L2.6 12 8.4 5Z" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><path d="M11.4 9.6l5.2 4.8M16.6 9.6l-5.2 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>`,
+          22,
+        ),
+        ret: svg(
+          24,
+          `<path d="M20 6v6.4H5.4M9.6 8.4 5 12.8l4.6 4.4" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>`,
+          21,
+        ),
+        emojiKey: svg(
+          24,
+          `<circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="1.7"/><circle cx="9" cy="10" r="1.2" fill="#fff"/><circle cx="15" cy="10" r="1.2" fill="#fff"/><path d="M8 14.6a5 5 0 0 0 8 0" stroke="#fff" stroke-width="1.7" stroke-linecap="round"/>`,
+          25,
+        ),
+      };
+
+      /* ============================================================== build */
+      const screen = document.getElementById("cle-screen");
+      const el = (cls, html, tag) => {
+        const n = document.createElement(tag || "div");
+        if (cls) n.className = cls;
+        if (html != null) n.innerHTML = html;
+        return n;
+      };
+
+      // --- status bar
+      const sb = el("statusbar");
+      sb.setAttribute("data-layout-allow-overlap", "true");
+      sb.innerHTML =
+        `<div class="sb-left"><div class="sb-clock">` +
+        `<span id="cle-clock-early">${CONFIG.status.clock}</span>` +
+        `<span id="cle-clock-late">${CONFIG.status.clockLate}</span></div>${ICO.bell}</div>` +
+        `<div class="sb-right">${ICO.bars}<div class="sb-net">${CONFIG.status.net}</div>` +
+        `<div class="sb-batt">${CONFIG.status.battery}</div><div class="sb-batt-cap"></div></div>`;
+
+      // --- empty state
+      const empty = el("empty");
+      empty.id = "cle-empty";
+      const emptyMark = el("empty-mark", burst(35.3, "#d97757"));
+      const emptyHead = el("empty-head");
+      const headWords = CONFIG.emptyHeading.split(" ").map((w, i, arr) => {
+        const s = el(null, w + (i < arr.length - 1 ? " " : ""), "span");
+        s.style.display = "inline-block";
+        emptyHead.appendChild(s);
+        return s;
+      });
+      empty.appendChild(emptyMark);
+      empty.appendChild(emptyHead);
+
+      // --- thread
+      const port = el("scrollport");
+      const thread = el("thread");
+      thread.id = "cle-thread";
+      thread.setAttribute("data-layout-allow-overflow", "true");
+      thread.setAttribute("data-layout-allow-overlap", "true");
+      thread.setAttribute("data-layout-allow-occlusion", "true");
+
+      const bubble = el("bubble");
+      bubble.id = "cle-bubble";
+      bubble.textContent = CONFIG.prompt;
+      thread.appendChild(bubble);
+
+      // tool rows: thinking -> lead sentence -> search -> collapsed "2 steps"
+      const toolWrap = el("tools");
+      toolWrap.style.paddingTop = "0px";
+      const mkTool = (ico, label) =>
+        el(
+          "tool-row",
+          `<div class="tool-ico">${ico}</div><div>${label}</div>` +
+            `<div class="chev">${ICO.chevR}</div>`,
+        );
+      // wrap: the shell animates, the child carries the gap
+      const wrap = (inner, pad) => {
+        const o = el("abox");
+        inner.style.paddingTop = pad + "px";
+        o.appendChild(inner);
+        return o;
+      };
+      const rowThink = mkTool(ICO.clock, CONFIG.thinking);
+      const rowSearch = mkTool(ICO.globe, CONFIG.search);
+      const rowCollapsed = mkTool(ICO.clock, CONFIG.collapsed);
+      const boxThink = wrap(rowThink, 28);
+      const boxSearch = wrap(rowSearch, 17);
+      const boxCollapsed = wrap(rowCollapsed, 28);
+
+      const leadPara = el("answer abox");
+      const leadInner = el("para");
+      leadInner.style.paddingTop = "27.1px";
+      const leadWords = [];
+      CONFIG.lead.split(" ").forEach((w, i, arr) => {
+        const s = el("w", w + (i < arr.length - 1 ? " " : ""), "span");
+        leadInner.appendChild(s);
+        leadWords.push(s);
+      });
+      leadPara.appendChild(leadInner);
+      toolWrap.appendChild(boxThink);
+      toolWrap.appendChild(leadPara);
+      toolWrap.appendChild(boxSearch);
+      toolWrap.appendChild(boxCollapsed);
+      thread.appendChild(toolWrap);
+
+      // --- answer blocks
+      const answer = el("answer");
+      const blocks = [];
+      let bulletHost = null;
+      let seen = 0;
+      CONFIG.answer.forEach((b) => {
+        const inner = el(b.t === "b" ? "bul" : "para");
+        const gapTop =
+          seen === 0
+            ? 24
+            : b.t === "b"
+              ? blocks.length && blocks[blocks.length - 1].kind === "b"
+                ? 12
+                : 17
+              : 17;
+        inner.style.setProperty("--gap", gapTop + "px");
+        const node = wrap(inner, gapTop);
+        seen++;
+        const words = [];
+        let bold = false;
+        b.text.split(/(\s+)/).forEach((tok) => {
+          if (!tok) return;
+          if (/^\s+$/.test(tok)) {
+            inner.appendChild(document.createTextNode(tok));
+            return;
+          }
+          let word = tok;
+          if (word.startsWith("**")) {
+            bold = true;
+            word = word.slice(2);
+          }
+          let close = false;
+          if (word.includes("**")) {
+            close = true;
+            word = word.replace("**", "");
+          }
+          if (word.indexOf("{") === 0) {
+            const chip = el("cite w", word.replace(/[{}]/g, ""), "span");
+            inner.appendChild(chip);
+            words.push(chip);
+            return;
+          }
+          const s = el("w", word, "span");
+          if (bold) s.style.fontWeight = "700";
+          s.textContent = word;
+          if (close) bold = false;
+          inner.appendChild(s);
+          words.push(s);
+        });
+        if (b.t === "b") {
+          if (!bulletHost) {
+            bulletHost = el("bullets");
+            answer.appendChild(bulletHost);
+          }
+          bulletHost.appendChild(node);
+        } else {
+          bulletHost = null;
+          answer.appendChild(node);
+        }
+        blocks.push({ node: node, inner: inner, words: words, kind: b.t, gapTop: gapTop });
+      });
+      thread.appendChild(answer);
+
+      // --- action row + sources
+      const actions = el("actions");
+      const actionsBox = el("abox");
+      actions.innerHTML =
+        [ICO.copy, ICO.share, ICO.play, ICO.retry]
+          .map((i) => `<div class="act-ico">${i}</div>`)
+          .join("") +
+        `<div class="src-stack">` +
+        CONFIG.sources.dots
+          .map((c) => `<div class="src-dot" style="background:${c}">AI</div>`)
+          .join("") +
+        `</div><div class="src-label">${CONFIG.sources.count} sources</div>`;
+      actionsBox.appendChild(actions);
+      thread.appendChild(actionsBox);
+
+      const disclaim = el("disclaim");
+      const disclaimBox = el("abox");
+      disclaim.innerHTML =
+        `<div class="disclaim-mark">${burst(28, "#d97757")}</div>` +
+        `<div class="disclaim-text">${CONFIG.disclaimer[0]}<br />${CONFIG.disclaimer[1]}</div>`;
+      disclaimBox.appendChild(disclaim);
+      thread.appendChild(disclaimBox);
+
+      // --- the in-thread spinner rides at the end of the flow
+      const spinner = el("spinner", burst(26, "#d97757"));
+      const spinPad = el(null, null);
+      spinPad.style.paddingTop = "29px";
+      spinPad.appendChild(spinner);
+      const spinWrap = el("abox");
+      spinWrap.style.width = "26px";
+      spinWrap.appendChild(spinPad);
+      thread.insertBefore(spinWrap, actionsBox);
+      port.appendChild(thread);
+
+      const chevWrap = el("chev-wrap", `<div class="chev-btn">${ICO.arrowDown}</div>`);
+      chevWrap.setAttribute("data-layout-allow-occlusion", "true");
+      chevWrap.setAttribute("data-layout-allow-overlap", "true");
+
+      // --- composer
+      const composer = el("composer");
+      composer.id = "cle-composer";
+      composer.setAttribute("data-layout-allow-occlusion", "true");
+      composer.setAttribute("data-layout-allow-overlap", "true");
+      composer.innerHTML =
+        `<div class="notice" id="cle-notice"><div class="notice-text">${CONFIG.notice}</div>` +
+        `<div class="notice-x">${ICO.close}</div></div>` +
+        `<div class="comp-text" id="cle-comp-text"><span class="typed" id="cle-typed"></span></div>` +
+        `<div class="comp-ph" id="cle-comp-ph">${CONFIG.placeholder}</div>` +
+        `<div class="comp-ph" id="cle-comp-ph2">${CONFIG.placeholderReply}</div>` +
+        `<div class="comp-ctrls">` +
+        `<div class="plus-btn">${ICO.plus}</div>` +
+        `<div class="model-pill">${CONFIG.model.name} <em>${CONFIG.model.effort}</em></div>` +
+        `<div class="comp-mic" id="cle-comp-mic">${ICO.mic}</div>` +
+        `<div class="voice-btn" id="cle-voice-btn">${ICO.wave}</div>` +
+        `<div class="send-btn" id="cle-send-btn">${ICO.arrowUp}</div>` +
+        `<div class="stop-btn" id="cle-stop-btn"></div>` +
+        `</div>`;
+
+      const typedEl = composer.querySelector("#cle-typed");
+      const chEls = [];
+      const curEls = [];
+      const mkCursor = () => {
+        const a = el("cursor-anchor", "<i></i>", "span");
+        typedEl.appendChild(a);
+        curEls.push(a);
+      };
+      mkCursor();
+      CONFIG.prompt.split("").forEach((c) => {
+        const sp = el("ch", c === " " ? "&nbsp;" : c, "span");
+        typedEl.appendChild(sp);
+        chEls.push(sp);
+        mkCursor();
+      });
+
+      // --- keyboard (iOS geometry is identical to the ChatGPT capture)
+      const KB = { w: 33.44, gap: 6.03, inset: 6.67 };
+      const keyboard = el("keyboard");
+      keyboard.id = "cle-keyboard";
+      keyboard.setAttribute("data-layout-allow-overflow", "true");
+      keyboard.setAttribute("data-layout-allow-overlap", "true");
+      const predict = el("predict");
+      const PRED_STAGES = ["start", "end"];
+      const pdEls = [0, 1, 2].map((col) => {
+        const n = el("pd");
+        const stages = PRED_STAGES.map((k) => {
+          const w = el("pdw", CONFIG.predict[k][col]);
+          n.appendChild(w);
+          return w;
+        });
+        predict.appendChild(n);
+        return { cell: n, stages: stages };
+      });
+      keyboard.appendChild(predict);
+
+      const keyIndex = {};
+      const mkKey = (row, label, x, w, cls) => {
+        const k = el("key" + (cls ? " " + cls : ""), label);
+        k.style.left = x + "px";
+        k.style.width = w + "px";
+        row.appendChild(k);
+        if (/^[A-Z]$/.test(label)) keyIndex[label] = k;
+        return k;
+      };
+      [
+        { y: 52, keys: "QWERTYUIOP".split(""), x0: KB.inset },
+        { y: 106, keys: "ASDFGHJKL".split(""), x0: 26.33 },
+        { y: 160, keys: "ZXCVBNM".split(""), x0: 65.67 },
+      ].forEach((rd, ri) => {
+        const row = el("krow");
+        row.style.top = rd.y + "px";
+        rd.keys.forEach((k, i) => mkKey(row, k, rd.x0 + i * (KB.w + KB.gap), KB.w));
+        if (ri === 2) {
+          mkKey(row, ICO.shift, KB.inset, 45.33, "dark");
+          mkKey(row, ICO.del, 350, 45.67, "dark");
+        }
+        keyboard.appendChild(row);
+      });
+      const row4 = el("krow");
+      row4.style.top = "214px";
+      mkKey(row4, "123", KB.inset, 92.67, "dark small");
+      const kSpace = mkKey(row4, "", 105.33, 191.33);
+      mkKey(row4, ICO.ret, 302.67, 93, "dark");
+      keyboard.appendChild(row4);
+      keyboard.appendChild(el("kb-bottom", `<div>${ICO.emojiKey}</div><div>${ICO.mic}</div>`));
+
+      // --- header + scrims
+      const statusPlate = el("status-plate");
+      statusPlate.setAttribute("data-layout-allow-occlusion", "true");
+      const hdrScrim = el("hdr-scrim");
+      hdrScrim.setAttribute("data-layout-allow-occlusion", "true");
+      const compScrim = el("comp-scrim");
+      compScrim.setAttribute("data-layout-allow-occlusion", "true");
+      const header = el("header");
+      header.innerHTML =
+        `<div class="circle-btn hdr-left">${ICO.burger}</div>` +
+        `<div class="hdr-right" id="cle-hdr-right">` +
+        `<div class="hdr-right-face" id="cle-hdr-ghost">${ICO.ghost}</div>` +
+        `<div class="hdr-right-face" id="cle-hdr-actions">${ICO.newChat}${ICO.dots}</div></div>`;
+
+      [
+        port,
+        empty,
+        chevWrap,
+        compScrim,
+        composer,
+        keyboard,
+        hdrScrim,
+        statusPlate,
+        header,
+        sb,
+      ].forEach((n) => screen.appendChild(n));
+
+      /* ==================================================================
+         Everything below is measured off the live DOM, so it must run with the
+         real webfont applied. The @font-face files are still loading when this
+         script parses, so a first pass would measure a fallback face and get the
+         line counts wrong (it clipped a 7-line paragraph to 6). Build once
+         synchronously so the timeline exists at parse time, then rebuild once the
+         fonts report ready — deterministic either way, and the renderer only seeks
+         after fonts are loaded.
+         ================================================================== */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      function build() {
+        tl.clear();
+        // A rebuild starts from whatever the previous pass left behind (heights 0,
+        // words hidden). Restore the natural layout first or the re-measure reads a
+        // collapsed DOM and every height/anchor comes back 0.
+        const allWords = leadWords
+          .concat(headWords)
+          .concat(blocks.reduce((acc, b) => acc.concat(b.words), []));
+        const allBoxes = [
+          boxThink,
+          boxSearch,
+          boxCollapsed,
+          leadPara,
+          spinWrap,
+          actionsBox,
+          disclaimBox,
+        ].concat(blocks.map((b) => b.node));
+        gsap.set(allBoxes, { height: "auto", autoAlpha: 1 });
+        gsap.set(allWords, { opacity: 1, autoAlpha: 1, y: 0 });
+        gsap.set([thread, keyboard], { y: 0 });
+        gsap.set(bubble, { autoAlpha: 1, y: 0, scale: 1 });
+        gsap.set(chEls, { opacity: 1 });
+        gsap.set(composer, { height: 172.7, width: 385.7, x: 0, y: 0 });
+        gsap.set([emptyMark, spinner], { autoAlpha: 1, scale: 1, rotation: 0 });
+        gsap.set(document.getElementById("cle-notice"), { autoAlpha: 1 });
+        /* ============================================================ measure
+           Everything is read here, in the natural layout, BEFORE any initial state
+           collapses it. Reading these during timeline construction would report the
+           collapsed geometry and every scroll target would resolve to 0.          */
+        const LH = 27.3;
+        const lineGroups = (words, host, gapTop) => {
+          const pad = gapTop || 0;
+          const tops = words.map((w) => w.offsetTop);
+          const uniq = [];
+          tops.forEach((t) => {
+            if (!uniq.length || t - uniq[uniq.length - 1] > 6) uniq.push(t);
+          });
+          const lineOf = tops.map((t) => {
+            let li = 0;
+            uniq.forEach((u, i) => {
+              if (Math.abs(t - u) <= 6) li = i;
+            });
+            return li;
+          });
+          const full = host.offsetHeight;
+          return {
+            lineOf: lineOf,
+            // the last step lands on the element's natural height, so the end state
+            // matches the layout the anchors were measured in exactly
+            heights: uniq.map((u, i) =>
+              i === uniq.length - 1 ? full : Math.min(full, pad + (i + 1) * LH + 2),
+            ),
+            full: full,
+          };
+        };
+        const leadMeta = lineGroups(leadWords, leadPara, 27.1);
+        blocks.forEach((b) => (b.meta = lineGroups(b.words, b.node, b.gapTop)));
+
+        const bubbleTop = bubble.offsetTop;
+        const rowThinkH = boxThink.offsetHeight;
+        const rowSearchH = boxSearch.offsetHeight;
+        const rowCollapsedH = boxCollapsed.offsetHeight;
+        const actionsH = actionsBox.offsetHeight;
+        const disclaimH = disclaimBox.offsetHeight;
+        const spinH = spinWrap.offsetHeight;
+        // Anchors are read in the SAME layout state their tween will play in. Correcting
+        // a natural-layout measurement by arithmetic is guesswork — it was 71pt out.
+        const ANCHOR = 720;
+        const ANCHOR_END = 715; // IMG_0944: the disclaimer's last line rests here
+        const anchorOf = (node, anchor) =>
+          Math.min(0, (anchor || ANCHOR) - (node.offsetTop + node.offsetHeight));
+        const anchorLead = anchorOf(leadPara);
+        const anchorTools = anchorOf(toolWrap);
+
+        // state B — tool rows collapsed into "2 steps", spinner still riding the tail
+        gsap.set([boxThink, boxSearch, leadPara], { height: 0 });
+        blocks.forEach((b) => {
+          b.anchor = anchorOf(b.node);
+          // one target per line: the stream must never write below the fold
+          b.lineAnchor = b.meta.heights.map((h) => Math.min(0, ANCHOR - (b.node.offsetTop + h)));
+        });
+        // state C — spinner gone, footer revealed
+        gsap.set(spinWrap, { height: 0 });
+        const anchorEnd = anchorOf(disclaimBox, ANCHOR_END);
+        gsap.set([boxThink, boxSearch, leadPara, spinWrap], { height: "auto" });
+
+        /* ====================================================== initial state */
+        gsap.set(thread, { y: 0 });
+        gsap.set(bubble, { autoAlpha: 0 });
+        gsap.set([boxThink, boxSearch, boxCollapsed], { height: 0, autoAlpha: 0 });
+        gsap.set(leadPara, { height: 0 });
+        gsap.set(leadWords, { opacity: 0 });
+        blocks.forEach((b) => {
+          gsap.set(b.node, { height: 0 });
+          gsap.set(b.words, { opacity: 0 });
+        });
+        gsap.set([actionsBox, disclaimBox], { height: 0, autoAlpha: 0 });
+        gsap.set(spinWrap, { autoAlpha: 0, scale: 0.6, height: spinH, transformOrigin: "50% 50%" });
+        gsap.set(chevWrap.firstChild, { autoAlpha: 0, y: 10 });
+        gsap.set(chEls, { opacity: 0 });
+        gsap.set(curEls, { autoAlpha: 0 });
+        gsap.set(document.getElementById("cle-comp-ph"), { autoAlpha: 1 });
+        gsap.set(document.getElementById("cle-comp-ph2"), { autoAlpha: 0 });
+        gsap.set(document.getElementById("cle-send-btn"), { autoAlpha: 0, scale: 0.6 });
+        gsap.set(document.getElementById("cle-stop-btn"), { autoAlpha: 0, scale: 0.6 });
+        gsap.set(document.getElementById("cle-hdr-actions"), { autoAlpha: 0 });
+        gsap.set(document.getElementById("cle-hdr-right"), { width: 44 });
+        gsap.set(emptyMark, { autoAlpha: 0, scale: 0.72, transformOrigin: "50% 50%" });
+        gsap.set(headWords, { autoAlpha: 0, y: 12 });
+        gsap.set(keyboard, { y: 0 });
+        gsap.set(composer, { width: 385.7, x: 0, y: -309, height: 172.7 });
+        pdEls.forEach((pd) => {
+          gsap.set(pd.stages[0], { autoAlpha: 1 });
+          gsap.set(pd.stages[1], { autoAlpha: 0 });
+        });
+        gsap.set(document.getElementById("cle-clock-late"), { autoAlpha: 0 });
+
+        /* ============================================================ timeline */
+
+        /* ---- 1. empty state arrives */
+        tl.to(emptyMark, { autoAlpha: 1, scale: 1, duration: 0.5, ease: "power3.out" }, T.emptyIn);
+        headWords.forEach((w, i) => {
+          tl.to(
+            w,
+            { autoAlpha: 1, y: 0, duration: 0.42, ease: "power3.out" },
+            T.emptyIn + 0.12 + i * 0.055,
+          );
+        });
+
+        /* ---- 2. typing */
+        const t0 = T.typeStart;
+        const chars = CONFIG.prompt.split("");
+        const charT = [];
+        let t = t0;
+        chars.forEach((c) => {
+          charT.push(t);
+          t += c === " " ? T.charBase + T.spaceHold : T.charBase;
+        });
+        const typeEnd = t;
+
+        tl.to(document.getElementById("cle-comp-ph"), { autoAlpha: 0, duration: 0.12 }, t0 - 0.02);
+        tl.to(curEls[0], { autoAlpha: 1, duration: 0.01 }, t0 - 0.02);
+        tl.to(
+          document.getElementById("cle-voice-btn"),
+          { autoAlpha: 0, scale: 0.6, duration: 0.14 },
+          t0,
+        );
+        tl.to(
+          document.getElementById("cle-send-btn"),
+          { autoAlpha: 1, scale: 1, duration: 0.24, ease: "back.out(1.6)" },
+          t0 + 0.04,
+        );
+
+        chars.forEach((c, i) => {
+          tl.to(chEls[i], { opacity: 1, duration: 0.01 }, charT[i]);
+          tl.to(curEls[i], { autoAlpha: 0, duration: 0.01 }, charT[i]);
+          tl.to(curEls[i + 1], { autoAlpha: 1, duration: 0.01 }, charT[i]);
+          const k = keyIndex[c.toUpperCase()];
+          const target = c === " " ? kSpace : k;
+          if (target) {
+            tl.to(target, { backgroundColor: "#5f5f5f", duration: 0.04 }, charT[i] - 0.03);
+            tl.to(target, { backgroundColor: "#404040", duration: 0.09 }, charT[i] + 0.02);
+          }
+        });
+
+        const lastCur = curEls[curEls.length - 1];
+        const blinkFrom = t0 + 0.1;
+        const blinks = Math.floor((typeEnd + T.sendPad - blinkFrom) / 1.06);
+        for (let i = 0; i < blinks; i++) {
+          const off = blinkFrom + i * 1.06 + 0.53;
+          const on = blinkFrom + i * 1.06 + 1.06;
+          if (off > typeEnd) tl.to(lastCur, { autoAlpha: 0, duration: 0.02 }, off);
+          if (on > typeEnd) tl.to(lastCur, { autoAlpha: 1, duration: 0.02 }, on);
+        }
+        const swapPredict = (at) => {
+          pdEls.forEach((pd) => {
+            tl.to(pd.stages[0], { autoAlpha: 0, duration: 0.06 }, at);
+            tl.to(pd.stages[1], { autoAlpha: 1, duration: 0.08 }, at + 0.06);
+          });
+        };
+        swapPredict(charT[CONFIG.prompt.indexOf(" ai ") + 1]);
+
+        /* ---- 3. send */
+        const tSend = typeEnd + T.sendPad;
+        const sendBtn = document.getElementById("cle-send-btn");
+        tl.to(sendBtn, { scale: 0.86, duration: 0.06, ease: "power2.out" }, tSend);
+        tl.to(sendBtn, { scale: 1, duration: 0.18, ease: "power2.out" }, tSend + 0.06);
+
+        const tGo = tSend + T.sendReact;
+        tl.to(chEls, { opacity: 0, duration: 0.01 }, tGo);
+        tl.to(curEls, { autoAlpha: 0, duration: 0.01 }, tGo);
+        tl.to(keyboard, { y: 340, duration: 0.3, ease: "power2.out" }, tGo);
+        tl.to(document.getElementById("cle-comp-mic"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.1);
+        // card narrows and re-centres as it docks
+        tl.to(composer, { width: 369.7, x: 8, duration: 0.3, ease: "power2.out" }, tGo);
+        tl.to(composer, { y: 0, duration: 0.3, ease: "power2.out" }, tGo);
+        tl.to(document.getElementById("cle-comp-ph2"), { autoAlpha: 1, duration: 0.2 }, tGo + 0.14);
+        tl.to(sendBtn, { autoAlpha: 0, duration: 0.12 }, tGo + 0.24);
+        tl.to(
+          document.getElementById("cle-stop-btn"),
+          { autoAlpha: 1, scale: 1, duration: 0.2, ease: "power2.out" },
+          tGo + 0.3,
+        );
+        // the empty state leaves as the bubble arrives — one cause, two reactions
+        tl.to(emptyMark, { autoAlpha: 0, scale: 0.8, duration: 0.22, ease: "power2.in" }, tGo);
+        headWords.forEach((w, i) => {
+          tl.to(w, { autoAlpha: 0, y: -10, duration: 0.2, ease: "power2.in" }, tGo + i * 0.02);
+        });
+        // header: incognito circle widens into the actions pill
+        tl.to(
+          document.getElementById("cle-hdr-ghost"),
+          { autoAlpha: 0, duration: 0.12 },
+          tGo + 0.02,
+        );
+        tl.to(
+          document.getElementById("cle-hdr-right"),
+          { width: 100, duration: 0.26, ease: "power2.out" },
+          tGo + 0.06,
+        );
+        tl.to(
+          document.getElementById("cle-hdr-actions"),
+          { autoAlpha: 1, duration: 0.18 },
+          tGo + 0.16,
+        );
+
+        const dyBubble = 874 - 343 - 40 - 34 - bubbleTop; // composer text row -> slot
+        tl.fromTo(
+          bubble,
+          { autoAlpha: 0, y: dyBubble, scale: 0.94, transformOrigin: "100% 50%" },
+          { autoAlpha: 1, y: 0, scale: 1, duration: 0.34, ease: "power3.out" },
+          tGo + 0.02,
+        );
+
+        /* ---- 4. the spinner: Claude's own working indicator, not idle wobble */
+        let tw = tGo + 0.34 + T.spinLead;
+        tl.to(spinWrap, { autoAlpha: 1, scale: 1, duration: 0.26, ease: "power3.out" }, tw);
+        const spinTurns = 30;
+        for (let i = 0; i < spinTurns; i++) {
+          tl.to(
+            spinner,
+            { rotation: (i + 1) * 15, duration: 0.5, ease: "power1.inOut" },
+            tw + i * 0.5,
+          );
+          tl.to(
+            spinner,
+            { scale: i % 2 ? 1 : 0.78, duration: 0.5, ease: "sine.inOut" },
+            tw + i * 0.5,
+          );
+        }
+
+        const scrollTo = (target, at, dur) =>
+          tl.to(thread, { y: target, duration: dur || 0.55, ease: "power2.out" }, at);
+
+        /* ---- 5. tool rows, then the lead sentence, then the search */
+        tw += 0.5;
+        tl.to(
+          boxThink,
+          { height: rowThinkH, autoAlpha: 1, duration: 0.26, ease: "power2.out" },
+          tw,
+        );
+        tw += T.toolStep;
+
+        let lastLine = -1;
+        leadWords.forEach((w, wi) => {
+          const li = leadMeta.lineOf[wi];
+          if (li !== lastLine) {
+            tl.to(
+              leadPara,
+              { height: leadMeta.heights[li], duration: 0.16, ease: "power2.out" },
+              tw,
+            );
+            lastLine = li;
+          }
+          tl.to(w, { opacity: 1, duration: 0.09 }, tw);
+          tw += T.wordStep * 2.2;
+        });
+        scrollTo(anchorLead, tw - 0.3, 0.6);
+
+        tw += 0.3;
+        tl.to(
+          boxSearch,
+          { height: rowSearchH, autoAlpha: 1, duration: 0.26, ease: "power2.out" },
+          tw,
+        );
+        scrollTo(anchorTools, tw, 0.6);
+
+        /* ---- 6. the two tool rows collapse into "2 steps" */
+        tw += 0.85;
+        tl.to([boxThink, boxSearch, leadPara], { autoAlpha: 0, duration: 0.16 }, tw);
+        tl.to(
+          [boxThink, boxSearch, leadPara],
+          { height: 0, duration: 0.3, ease: "power2.inOut" },
+          tw + 0.06,
+        );
+        tl.to(
+          boxCollapsed,
+          { height: rowCollapsedH, autoAlpha: 1, duration: 0.26, ease: "power2.out" },
+          tw + 0.18,
+        );
+        scrollTo(0, tw + 0.06, 0.5);
+
+        /* ---- 7. the usage notice is dismissed, the card shrinks, the answer streams */
+        tw += T.collapseAt;
+        tl.to(document.getElementById("cle-notice"), { autoAlpha: 0, duration: 0.16 }, tw);
+        tl.to(composer, { height: 97.7, duration: 0.32, ease: "power2.inOut" }, tw + 0.04);
+        tw += 0.45;
+        blocks.forEach((b, bi) => {
+          let ll = -1;
+          b.words.forEach((w, wi) => {
+            const li = b.meta.lineOf[wi];
+            if (li !== ll) {
+              tl.to(b.node, { height: b.meta.heights[li], duration: 0.16, ease: "power2.out" }, tw);
+              scrollTo(b.lineAnchor[li], tw, 0.5);
+              ll = li;
+            }
+            tl.to(w, { opacity: 1, duration: 0.08 }, tw);
+            tw += T.wordStep;
+          });
+          if (bi < blocks.length - 1) tw += T.paraGap;
+        });
+
+        /* ---- 8. the answer lands: controls revert, footer arrives */
+        tw += T.tailStep;
+        tl.to(document.getElementById("cle-stop-btn"), { autoAlpha: 0, duration: 0.14 }, tw);
+        tl.to(document.getElementById("cle-comp-mic"), { autoAlpha: 1, duration: 0.18 }, tw + 0.04);
+        tl.to(
+          document.getElementById("cle-voice-btn"),
+          { autoAlpha: 1, scale: 1, duration: 0.22, ease: "power2.out" },
+          tw + 0.06,
+        );
+        tl.to(spinWrap, { autoAlpha: 0, scale: 0.7, duration: 0.2, ease: "power2.in" }, tw);
+        tl.to(spinWrap, { height: 0, duration: 0.24, ease: "power2.inOut" }, tw + 0.1);
+        tl.to(
+          actionsBox,
+          { height: actionsH, autoAlpha: 1, duration: 0.3, ease: "power2.out" },
+          tw + 0.22,
+        );
+        tl.to(
+          disclaimBox,
+          { height: disclaimH, autoAlpha: 1, duration: 0.3, ease: "power2.out" },
+          tw + 0.46,
+        );
+        scrollTo(anchorEnd, tw + 0.3, 0.8);
+        tl.to(
+          chevWrap.firstChild,
+          { autoAlpha: 1, y: 0, duration: 0.3, ease: "back.out(1.5)" },
+          tw + 0.7,
+        );
+        // the minute rolls over between the source frames — keep that
+        tl.to(document.getElementById("cle-clock-early"), { autoAlpha: 0, duration: 0.01 }, 8.4);
+        tl.to(document.getElementById("cle-clock-late"), { autoAlpha: 1, duration: 0.01 }, 8.4);
+      }
+
+      build();
+      if (document.fonts && document.fonts.status !== "loaded") {
+        document.fonts.ready.then(build);
+      }
+
+      window.__timelines["claude-exchange"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+{/* hf:generated-footer */}
+
+Tagged `showcase` `mock-ui` `ai` `chat` `vertical` `ad-template`.
+
+Created by Jake Moran.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/docs.json b/docs/docs.json
index eace34c03..3fda07516 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -472,6 +472,8 @@
                   "catalog/blocks/apple-money-count",
                   "catalog/blocks/blue-sweater-intro-video",
                   "catalog/blocks/camera-dolly-zoom",
+                  "catalog/blocks/chatgpt-exchange",
+                  "catalog/blocks/claude-exchange",
                   "catalog/blocks/cosmic-orb",
                   "catalog/blocks/gallery-tunnel",
                   "catalog/blocks/message-thread-reveal",
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index f4b0a8431..24a956eea 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -760,6 +760,22 @@
     "href": "/catalog/components/chat-thread",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-thread.png"
   },
+  {
+    "name": "chatgpt-exchange",
+    "type": "block",
+    "title": "ChatGPT Exchange",
+    "description": "A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result",
+    "tags": [
+      "showcase",
+      "mock-ui",
+      "ai",
+      "chat",
+      "vertical",
+      "ad-template"
+    ],
+    "href": "/catalog/blocks/chatgpt-exchange",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chatgpt-exchange.png"
+  },
   {
     "name": "checkout-flow",
     "type": "component",
@@ -811,6 +827,22 @@
     "href": "/catalog/blocks/cinematic-zoom",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
   },
+  {
+    "name": "claude-exchange",
+    "type": "block",
+    "title": "Claude Exchange",
+    "description": "A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions",
+    "tags": [
+      "showcase",
+      "mock-ui",
+      "ai",
+      "chat",
+      "vertical",
+      "ad-template"
+    ],
+    "href": "/catalog/blocks/claude-exchange",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/claude-exchange.png"
+  },
   {
     "name": "code-3d-extrude",
     "type": "block",
diff --git a/docs/public/catalog/assets/5d0f8a497a48fd2a.woff2 b/docs/public/catalog/assets/5d0f8a497a48fd2a.woff2
new file mode 100644
index 000000000..85d520902
Binary files /dev/null and b/docs/public/catalog/assets/5d0f8a497a48fd2a.woff2 differ
diff --git a/docs/public/catalog/assets/b63448e2680a0dbd.woff2 b/docs/public/catalog/assets/b63448e2680a0dbd.woff2
new file mode 100644
index 000000000..ffed311d3
Binary files /dev/null and b/docs/public/catalog/assets/b63448e2680a0dbd.woff2 differ
diff --git a/docs/public/catalog/assets/f3779f1efccc4bdc.woff2 b/docs/public/catalog/assets/f3779f1efccc4bdc.woff2
new file mode 100644
index 000000000..54f0a595d
Binary files /dev/null and b/docs/public/catalog/assets/f3779f1efccc4bdc.woff2 differ
diff --git a/docs/public/catalog/assets/f9a06e79cd3a2a20.woff2 b/docs/public/catalog/assets/f9a06e79cd3a2a20.woff2
new file mode 100644
index 000000000..d1897949f
Binary files /dev/null and b/docs/public/catalog/assets/f9a06e79cd3a2a20.woff2 differ
diff --git a/docs/public/catalog/blocks/chatgpt-exchange.json b/docs/public/catalog/blocks/chatgpt-exchange.json
new file mode 100644
index 000000000..fd1c11be5
--- /dev/null
+++ b/docs/public/catalog/blocks/chatgpt-exchange.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\" data-resolution=\"portrait\">\n  <head><base href=\"/public/catalog/items/chatgpt-exchange/\">\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1080, height=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      /* The real app sets OpenAI Sans, which is not licensed here. Inter is the\n         redistributable OFL stand-in, embedded under a neutral family name so the\n         composition remains self-contained and deterministic. */\n      @font-face {\n        font-family: \"ChatUI\";\n        font-weight: 400;\n        font-style: normal;\n        font-display: block;\n        src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"ChatUI\";\n        font-weight: 500;\n        font-style: normal;\n        font-display: block;\n        src: url(\"/public/catalog/assets/f3779f1efccc4bdc.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"ChatUI\";\n        font-weight: 600;\n        font-style: normal;\n        font-display: block;\n        src: url(\"/public/catalog/assets/f9a06e79cd3a2a20.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"Apple Color Emoji\";\n        src: local(\"Apple Color Emoji\");\n      }\n\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1080px;\n        height: 1920px;\n        overflow: hidden;\n        background: #000;\n      }\n      body,\n      #cge-root {\n        font-family: \"ChatUI\", sans-serif;\n        -webkit-font-smoothing: antialiased;\n      }\n\n      /* ---------------------------------------------------------------- tokens\n         Geometry is authored in POINTS (1pt = 1px inside .screen) exactly as\n         measured off the source screenshots, then scaled to the 1080x1920 frame.\n         The layout is measured from the source UI at 402 × 874 points.       */\n      :root {\n        --scale: 2.1968; /* 1920 / 874 */\n        --ink: #fcfcfc;\n        --dim: #a8a8ac;\n        --placeholder: #9a9a9e;\n        --bubble: #212121;\n        --kb-bg: #141414;\n        --key: #3c3c3c;\n        --key-hit: #5f5f5f;\n        --seg-track: #181818;\n        --seg-active: #3a3a3a;\n        --blue: #48aaff;\n        --rule-head: #202020;\n        --rule-row: #131313;\n        --chip-bg: #0b0b0c;\n        --chip-line: #2b2b2d;\n      }\n\n      .stage {\n        position: absolute;\n        inset: 0;\n        background: #000;\n      }\n\n      .screen {\n        position: absolute;\n        top: 0;\n        left: 50%;\n        width: 402px;\n        height: 874px;\n        margin-left: -201px;\n        background: #000;\n        overflow: hidden;\n        transform-origin: top center;\n        transform: scale(var(--scale));\n      }\n\n      /* ----------------------------------------------------------- status bar */\n      .statusbar {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 65px;\n        display: flex;\n        align-items: center;\n        z-index: 40;\n        padding: 0 34px 0 16px;\n        color: #fff;\n      }\n      .sb-left {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        margin-left: 31.7px;\n      }\n      .sb-clock {\n        font-size: 17.2px;\n        font-weight: 600;\n        letter-spacing: 1.3px;\n      }\n      .sb-clock-box {\n        position: relative;\n        width: 38px;\n        height: 22px;\n      }\n      .sb-clock-box span {\n        position: absolute;\n        left: 0;\n        top: 0;\n        white-space: nowrap;\n      }\n      .sb-right {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        margin-left: auto;\n      }\n      .sb-net {\n        font-size: 15px;\n        font-weight: 500;\n        letter-spacing: -0.2px;\n      }\n      .sb-batt {\n        width: 30px;\n        height: 15px;\n        border-radius: 4.5px;\n        background: #fff;\n        color: #000;\n        font-size: 11px;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        letter-spacing: -0.2px;\n        position: relative;\n      }\n      .sb-batt span {\n        position: absolute;\n      }\n      .sb-batt-cap {\n        width: 2px;\n        height: 6px;\n        background: rgba(255, 255, 255, 0.45);\n        border-radius: 0 2px 2px 0;\n        margin-left: -4px;\n      }\n\n      /* --------------------------------------------------------------- header */\n      .header {\n        position: absolute;\n        top: 62px;\n        left: 0;\n        right: 0;\n        height: 44px;\n        z-index: 40;\n      }\n      .status-plate {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 54.7px;\n        z-index: 34;\n        background: #000;\n      }\n      .hdr-scrim {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 118px;\n        z-index: 30;\n        background: rgba(0, 0, 0, 0.3);\n        backdrop-filter: blur(2px);\n        -webkit-backdrop-filter: blur(2px);\n      }\n      .circle-btn {\n        position: absolute;\n        top: 0;\n        width: 44px;\n        height: 44px;\n        border-radius: 22px;\n        background: #1c1c1e;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .hdr-left {\n        left: 16px;\n      }\n      .hdr-right {\n        position: absolute;\n        top: 0;\n        right: 16px;\n        width: 44px;\n        height: 44px;\n        border-radius: 22px;\n        background: #1c1c1e;\n        overflow: hidden;\n      }\n      .hdr-right-face {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 18px;\n      }\n      .seg {\n        position: absolute;\n        top: -1.7px;\n        left: 121.7px;\n        width: 158px;\n        height: 48px;\n        border-radius: 24px;\n        background: var(--seg-track);\n        display: flex;\n        align-items: center;\n        padding: 4px;\n      }\n      .seg-item {\n        flex: 1;\n        height: 40px;\n        border-radius: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 16px;\n        font-weight: 500;\n        color: #fff;\n      }\n      .seg-item.on {\n        background: var(--seg-active);\n      }\n\n      /* --------------------------------------------------------------- thread */\n      .scrollport {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n        z-index: 10;\n      }\n      .thread {\n        position: relative;\n        padding: 128px 16px 190px;\n      }\n\n      .bubble {\n        position: relative;\n        margin-left: auto;\n        width: 245.7px;\n        background: var(--bubble);\n        border-radius: 24px;\n        padding: 10px 16px;\n        color: var(--ink);\n        font-size: 16px;\n        line-height: 25.667px;\n      }\n      .answer {\n        margin-top: 36px;\n        width: 360px;\n        color: var(--ink);\n        font-size: 16px;\n        line-height: 25.667px;\n      }\n      .para {\n        overflow: hidden;\n      }\n      .para + .para {\n        margin-top: 24px;\n      }\n      .w {\n        opacity: 1;\n      }\n\n      /* ---------------------------------------------------------------- table */\n      .tbl {\n        margin: 19px 0 0 -5.7px;\n        width: 480px;\n        overflow: hidden;\n      }\n      .tr {\n        display: flex;\n        overflow: hidden;\n      }\n      .td {\n        padding: 8px 12px 8px 0;\n        font-size: 14.5px;\n        line-height: 23px;\n        color: var(--ink);\n      }\n      .c1 {\n        width: 168px;\n      }\n      .c2 {\n        width: 120px;\n        font-weight: 600;\n      }\n      .c3 {\n        width: 173px;\n      }\n      .th {\n        font-size: 14.5px;\n        line-height: 23px;\n        font-weight: 600;\n        padding-bottom: 6px;\n      }\n      .rule-head {\n        height: 2px;\n        background: var(--rule-head);\n      }\n      .rule-row {\n        height: 2px;\n        background: var(--rule-row);\n      }\n      .use {\n        display: flex;\n        gap: 8px;\n        align-items: baseline;\n      }\n      .emo {\n        font-family: \"Apple Color Emoji\";\n        font-size: 14px;\n      }\n      .chip {\n        display: flex;\n        width: fit-content;\n        align-items: center;\n        gap: 6px;\n        height: 24px;\n        margin-top: 6px;\n        padding: 0 8px;\n        border-radius: 12px;\n        background: var(--chip-bg);\n        border: 1px solid var(--chip-line);\n        font-size: 10px;\n        color: #b9b9bd;\n        white-space: nowrap;\n      }\n      .chip-dot {\n        width: 12.5px;\n        height: 12.5px;\n        border-radius: 6.25px;\n        background: #2e2e30;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 6px;\n        font-weight: 700;\n        color: #d8d8da;\n      }\n\n      /* ---------------------------------------------------------- scroll chrome */\n      .scrollbar {\n        position: absolute;\n        right: 3.3px;\n        top: 145px;\n        width: 2.7px;\n        border-radius: 1.4px;\n        background: rgba(235, 235, 245, 0.32);\n        z-index: 20;\n      }\n      .chev-wrap {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 738.7px;\n        z-index: 25;\n        display: flex;\n        justify-content: center;\n      }\n      .chev {\n        width: 36px;\n        height: 36px;\n        border-radius: 18px;\n        background: #1c1c1e;\n        border: 1px solid #2c2c2e;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      /* ------------------------------------------------------------ suggestions */\n      .suggests {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 407.7px;\n        z-index: 15;\n      }\n      .sug {\n        height: 47px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding-left: 27.7px;\n        color: var(--ink);\n        font-size: 16px;\n      }\n      .sug-ico {\n        width: 15.7px;\n        height: 15.7px;\n        display: flex;\n        align-items: center;\n      }\n\n      /* -------------------------------------------------------------- composer */\n      .comp-scrim {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 120px;\n        z-index: 18;\n        background: linear-gradient(to top, #000 12%, rgba(0, 0, 0, 0) 100%);\n      }\n      .composer {\n        position: absolute;\n        left: 12px;\n        bottom: 38.3px;\n        width: 378px;\n        height: 48px;\n        border-radius: 24px;\n        background: rgba(255, 255, 255, 0.055);\n        backdrop-filter: blur(22px);\n        -webkit-backdrop-filter: blur(22px);\n        z-index: 20;\n        overflow: hidden;\n      }\n      .comp-text {\n        position: absolute;\n        top: 0;\n        left: 16px;\n        right: 16px;\n        height: 44px;\n        display: flex;\n        align-items: center;\n        color: var(--ink);\n        font-size: 16px;\n        line-height: 22px;\n        white-space: pre;\n      }\n      .comp-ph {\n        position: absolute;\n        top: 0;\n        left: 48px;\n        height: 48px;\n        display: flex;\n        align-items: center;\n        color: var(--placeholder);\n        font-size: 16px;\n      }\n      .typed {\n        white-space: pre;\n      }\n      .typed .ch {\n        opacity: 0;\n      }\n      .cursor-anchor {\n        position: relative;\n        display: inline-block;\n        width: 0;\n        height: 22px;\n        vertical-align: -4px;\n      }\n      .cursor-anchor i {\n        position: absolute;\n        left: 1px;\n        top: 0;\n        width: 2px;\n        height: 22px;\n        background: var(--blue);\n      }\n      .comp-ctrls {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 48px;\n      }\n      .comp-ctrls > * {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      #cge-comp-plus {\n        left: 15px;\n      }\n      .comp-mic {\n        right: 60px;\n      }\n      .blue-btn {\n        right: 8px;\n        width: 32px;\n        height: 32px;\n        border-radius: 16px;\n        background: var(--blue);\n      }\n      .blue-face {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      /* -------------------------------------------------------------- keyboard */\n      .keyboard {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 539px;\n        height: 335px;\n        background: var(--kb-bg);\n        z-index: 22;\n      }\n      .predict {\n        position: relative;\n        height: 52px;\n        display: flex;\n        align-items: center;\n      }\n      .pd {\n        flex: 1;\n        position: relative;\n        align-self: stretch;\n        font-size: 17px;\n        color: #e8e8ea;\n        border-right: 1px solid rgba(235, 235, 245, 0.16);\n      }\n      .pdw {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .pd:last-child {\n        border-right: none;\n      }\n      .krow {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 43px;\n      }\n      .key {\n        position: absolute;\n        top: 0;\n        height: 43px;\n        border-radius: 5px;\n        background: var(--key);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #fff;\n        font-size: 22.2px;\n        font-weight: 400;\n      }\n      .key.dark {\n        background: #2b2b2d;\n      }\n      .key.small {\n        font-size: 16px;\n        font-weight: 400;\n      }\n      .kb-bottom {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 279.7px;\n        height: 55px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0 29px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-hf-id=\"hf-ahdx\"\n      id=\"cge-root\"\n      data-composition-id=\"chatgpt-exchange\"\n      data-fps=\"60\"\n      data-start=\"0\"\n      data-duration=\"14.9\"\n      data-width=\"1080\"\n      data-height=\"1920\"\n    >\n      <div data-hf-id=\"hf-tan6\" class=\"stage\">\n        <div\n          data-hf-id=\"hf-szt4\"\n          id=\"cge-scene\"\n          class=\"clip\"\n          data-start=\"0\"\n          data-duration=\"14.9\"\n          data-track-index=\"1\"\n        >\n          <div data-hf-id=\"hf-ylue\" class=\"screen\" id=\"cge-screen\"></div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      /* ==================================================================\n         TEMPLATE CONFIG — edit only this block to re-skin the exchange.\n         ================================================================== */\n      const CONFIG = {\n        status: { clock: \"1:29\", clockLate: \"1:30\", net: \"5G+\", battery: 89, batteryLate: 88 },\n        prompt: \"Hey what's the best tool for ai avatars\",\n        suggestions: [\n          { icon: \"slack\", label: \"Summarize my to-dos\" },\n          { icon: \"gmail\", label: \"Draft follow-up emails\" },\n          { icon: \"cal\", label: \"Prep me for upcoming meetings\" },\n        ],\n        predict: {\n          start: [\"I\", \"The\", \"I'm\"],\n          mid: [\"ai\", \"AI\", \"a\"],\n          end: ['\"avatars\"', \"avatar sick\", \"avatar stressed\"],\n        },\n        paragraphs: [\n          \"It really depends on what you're trying to do, because “AI avatars” has split into a few different categories.\",\n          \"For **most creators and marketers**, here's how I'd rank them today:\",\n        ],\n        table: {\n          head: [\"Use case\", \"Best tool\", \"Why\"],\n          rows: [\n            {\n              emoji: \"🥇\",\n              use: \"Overall realism\",\n              tool: \"HeyGen\",\n              why: \"Most natural facial expressions, lip sync, gestures, voice cloning and localization. Benchmark for talking head videos.\",\n              chip: \"Official A.I Ranking\",\n            },\n            {\n              emoji: \"🏢\",\n              use: \"Enterprise/training\",\n              tool: \"Synthesia\",\n              why: \"Better collaboration, SCORM, compliance, team workflows; less creator-focused.\",\n              chip: \"Official A.I Ranking\",\n            },\n            {\n              emoji: \"📱\",\n              use: \"Mobile UGC\",\n              tool: \"Captions\",\n              why: \"Extremely fast mobile workflow and social editing. Great for Reels creators.\",\n              chip: \"Creator Stack\",\n            },\n            {\n              emoji: \"💬\",\n              use: \"Real-time conversations\",\n              tool: \"Tavus\",\n              why: \"Interactive avatars that can hold live conversations.\",\n              chip: \"Creator Stack\",\n            },\n          ],\n        },\n      };\n\n      /* Beat clock (seconds). Every tween hangs off these. */\n      const T = {\n        suggestsIn: 0.0,\n        typeStart: 0.86,\n        charBase: 0.05,\n        spaceHold: 0.11,\n        sendPad: 0.3, // stillness-before-climax between last keystroke and the tap\n        sendReact: 0.03,\n        streamLead: 0.6, // model \"thinking\" comma\n        wordStep: 0.15,\n        tableLead: 0.2,\n        rowStep: 0.7,\n        readbackDur: 1.1,\n        tailHold: 0.7,\n      };\n\n      /* =========================================================== icon set */\n      const svg = (b, d, w) =>\n        `<svg viewBox=\"0 0 ${b} ${b}\" width=\"${w || b}\" height=\"${w || b}\" fill=\"none\">${d}</svg>`;\n      const ICO = {\n        bell: svg(\n          20,\n          `<path d=\"M4.2 15h11.6M10 3.2a4.3 4.3 0 0 1 4.3 4.3c0 3.4 1 5 1.5 5.6H4.2C4.7 12.5 5.7 10.9 5.7 7.5A4.3 4.3 0 0 1 10 3.2Z\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M8.3 16.6a1.9 1.9 0 0 0 3.4 0\" stroke=\"#fff\" stroke-width=\"1.5\"/><path d=\"M3 17L17 3\" stroke=\"#fff\" stroke-width=\"1.6\"/>`,\n          18,\n        ),\n        bars: svg(\n          20,\n          `<rect x=\"1\" y=\"12.5\" width=\"3\" height=\"4.5\" rx=\"1\" fill=\"#fff\"/><rect x=\"6\" y=\"9.5\" width=\"3\" height=\"7.5\" rx=\"1\" fill=\"#fff\"/><rect x=\"11\" y=\"6.5\" width=\"3\" height=\"10.5\" rx=\"1\" fill=\"#fff\"/><rect x=\"16\" y=\"3.5\" width=\"3\" height=\"13.5\" rx=\"1\" fill=\"rgba(255,255,255,.32)\"/>`,\n          19,\n        ),\n        burger: svg(\n          24,\n          `<path d=\"M5 9.5h14M5 15h9\" stroke=\"#fff\" stroke-width=\"2.1\" stroke-linecap=\"round\"/>`,\n          24,\n        ),\n        voiceCircle: svg(\n          24,\n          `<path d=\"M15.4 3.9a8.6 8.6 0 1 1-9.1 14.6\" stroke=\"#fff\" stroke-width=\"1.9\" stroke-linecap=\"round\"/><path d=\"M6.3 18.5 4 21.2l3.4.5\" stroke=\"#fff\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M13.6 8.4a4.1 4.1 0 1 0-3.3 6.9\" stroke=\"#fff\" stroke-width=\"1.9\" stroke-linecap=\"round\"/>`,\n          23,\n        ),\n        compose: svg(\n          24,\n          `<path d=\"M4.5 15.5 15.2 4.8a2 2 0 0 1 2.9 2.9L7.4 18.4l-4 1 1-3.9Z\" stroke=\"#fff\" stroke-width=\"1.8\" stroke-linejoin=\"round\"/>`,\n          21,\n        ),\n        dots: svg(\n          24,\n          `<circle cx=\"5\" cy=\"12\" r=\"1.9\" fill=\"#fff\"/><circle cx=\"12\" cy=\"12\" r=\"1.9\" fill=\"#fff\"/><circle cx=\"19\" cy=\"12\" r=\"1.9\" fill=\"#fff\"/>`,\n          21,\n        ),\n        plus: svg(\n          24,\n          `<path d=\"M12 4.5v15M4.5 12h15\" stroke=\"#fff\" stroke-width=\"2.1\" stroke-linecap=\"round\"/>`,\n          18,\n        ),\n        mic: svg(\n          24,\n          `<rect x=\"9\" y=\"2.6\" width=\"6\" height=\"11.4\" rx=\"3\" stroke=\"#fff\" stroke-width=\"1.8\"/><path d=\"M5.5 11.4a6.5 6.5 0 0 0 13 0M12 18v3.2\" stroke=\"#fff\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>`,\n          17,\n        ),\n        wave: svg(\n          24,\n          `<rect x=\"4\" y=\"9.5\" width=\"2.4\" height=\"5\" rx=\"1.2\" fill=\"#fff\"/><rect x=\"8.6\" y=\"6\" width=\"2.4\" height=\"12\" rx=\"1.2\" fill=\"#fff\"/><rect x=\"13.2\" y=\"8\" width=\"2.4\" height=\"8\" rx=\"1.2\" fill=\"#fff\"/><rect x=\"17.8\" y=\"10.5\" width=\"2.4\" height=\"3\" rx=\"1.2\" fill=\"#fff\"/>`,\n          19,\n        ),\n        arrowUp: svg(\n          24,\n          `<path d=\"M12 19V5.6M5.8 11.8 12 5.4l6.2 6.4\" stroke=\"#000\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          19,\n        ),\n        stop: svg(24, `<rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"2\" fill=\"#000\"/>`, 18),\n        chevDown: svg(\n          24,\n          `<path d=\"M12 5v13M6.2 12.2 12 18.2l5.8-6\" stroke=\"#fff\" stroke-width=\"2.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          18,\n        ),\n        shift: svg(\n          24,\n          `<path d=\"M12 4 4.5 12h4v7h7v-7h4L12 4Z\" stroke=\"#fff\" stroke-width=\"1.7\" stroke-linejoin=\"round\" fill=\"#fff\"/>`,\n          19,\n        ),\n        del: svg(\n          24,\n          `<path d=\"M8.4 5h11a1.6 1.6 0 0 1 1.6 1.6v10.8A1.6 1.6 0 0 1 19.4 19h-11L2.6 12 8.4 5Z\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/><path d=\"M11.4 9.6l5.2 4.8M16.6 9.6l-5.2 4.8\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linecap=\"round\"/>`,\n          22,\n        ),\n        ret: svg(\n          24,\n          `<path d=\"M20 6v6.4H5.4M9.6 8.4 5 12.8l4.6 4.4\" stroke=\"#fff\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          21,\n        ),\n        emojiKey: svg(\n          24,\n          `<circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#fff\" stroke-width=\"1.7\"/><circle cx=\"9\" cy=\"10\" r=\"1.2\" fill=\"#fff\"/><circle cx=\"15\" cy=\"10\" r=\"1.2\" fill=\"#fff\"/><path d=\"M8 14.6a5 5 0 0 0 8 0\" stroke=\"#fff\" stroke-width=\"1.7\" stroke-linecap=\"round\"/>`,\n          25,\n        ),\n        slack: svg(\n          24,\n          `<path d=\"M6.2 14.4a2 2 0 1 1-2 2v-2h2Z\" fill=\"#e01e5a\"/><path d=\"M7.3 14.4a2 2 0 0 1 4 0v5a2 2 0 1 1-4 0v-5Z\" fill=\"#e01e5a\"/><path d=\"M9.6 6.2a2 2 0 1 1 2-2v2h-2Z\" fill=\"#36c5f0\"/><path d=\"M9.6 7.3a2 2 0 0 1 0 4h-5a2 2 0 1 1 0-4h5Z\" fill=\"#36c5f0\"/><path d=\"M17.8 9.6a2 2 0 1 1 2 2h-2v-2Z\" fill=\"#2eb67d\"/><path d=\"M16.7 9.6a2 2 0 0 1-4 0v-5a2 2 0 1 1 4 0v5Z\" fill=\"#2eb67d\"/><path d=\"M14.4 17.8a2 2 0 1 1-2 2v-2h2Z\" fill=\"#ecb22e\"/><path d=\"M14.4 16.7a2 2 0 0 1 0-4h5a2 2 0 1 1 0 4h-5Z\" fill=\"#ecb22e\"/>`,\n          16,\n        ),\n        gmail: svg(\n          24,\n          `<path d=\"M3 6.6 12 13l9-6.4V18a1 1 0 0 1-1 1h-3V11l-5 3.6L7 11v8H4a1 1 0 0 1-1-1V6.6Z\" fill=\"#ea4335\"/><path d=\"M17 11v8h3a1 1 0 0 0 1-1V6.6L17 9.5V11Z\" fill=\"#34a853\"/><path d=\"M3 6.6 7 9.5V19H4a1 1 0 0 1-1-1V6.6Z\" fill=\"#4285f4\"/><path d=\"M3 5.6A1.6 1.6 0 0 1 5.4 4.3L12 9l6.6-4.7A1.6 1.6 0 0 1 21 5.6v1L12 13 3 6.6v-.8Z\" fill=\"#fbbc04\"/>`,\n          16,\n        ),\n        cal: svg(\n          24,\n          `<rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"3\" fill=\"#1a73e8\"/><rect x=\"3\" y=\"4\" width=\"18\" height=\"4.5\" rx=\"3\" fill=\"#1967d2\"/><text x=\"12\" y=\"17.6\" font-size=\"9\" font-weight=\"700\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"Helvetica\">31</text>`,\n          16,\n        ),\n      };\n\n      /* ============================================================== build */\n      const screen = document.getElementById(\"cge-screen\");\n      const el = (cls, html, tag) => {\n        const n = document.createElement(tag || \"div\");\n        if (cls) n.className = cls;\n        if (html != null) n.innerHTML = html;\n        return n;\n      };\n\n      // --- status bar\n      const sb = el(\"statusbar\");\n      sb.innerHTML =\n        `<div class=\"sb-left\"><div class=\"sb-clock sb-clock-box\">` +\n        `<span id=\"cge-clock-early\">${CONFIG.status.clock}</span>` +\n        `<span id=\"cge-clock-late\">${CONFIG.status.clockLate}</span></div>${ICO.bell}</div>` +\n        `<div class=\"sb-right\">${ICO.bars}<div class=\"sb-net\">${CONFIG.status.net}</div>` +\n        `<div class=\"sb-batt\"><span id=\"cge-batt-early\">${CONFIG.status.battery}</span>` +\n        `<span id=\"cge-batt-late\">${CONFIG.status.batteryLate}</span></div>` +\n        `<div class=\"sb-batt-cap\"></div></div>`;\n\n      // --- thread\n      const port = el(\"scrollport\");\n      const thread = el(\"thread\");\n      thread.setAttribute(\"data-layout-allow-overflow\", \"true\");\n      thread.setAttribute(\"data-layout-allow-overlap\", \"true\");\n      thread.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      thread.id = \"cge-thread\";\n\n      const bubble = el(\"bubble\");\n      bubble.id = \"cge-bubble\";\n      bubble.textContent = CONFIG.prompt + \"?\";\n      thread.appendChild(bubble);\n\n      const answer = el(\"answer\");\n      answer.id = \"cge-answer\";\n      thread.appendChild(answer);\n\n      // paragraphs -> word spans (**bold** supported)\n      const paraEls = [];\n      CONFIG.paragraphs.forEach((txt) => {\n        const p = el(\"para\");\n        const inner = el(\"para-inner\");\n        let bold = false;\n        txt.split(/(\\s+)/).forEach((tok) => {\n          if (!tok) return;\n          if (/^\\s+$/.test(tok)) {\n            inner.appendChild(document.createTextNode(tok));\n            return;\n          }\n          let word = tok;\n          let open = false;\n          if (word.startsWith(\"**\")) {\n            bold = true;\n            open = true;\n            word = word.slice(2);\n          }\n          let close = false;\n          if (word.includes(\"**\")) {\n            close = true;\n            word = word.replace(\"**\", \"\");\n          }\n          const s = el(\"w\", null, \"span\");\n          if (bold) s.style.fontWeight = \"600\";\n          s.textContent = word;\n          if (close) bold = false;\n          void open;\n          inner.appendChild(s);\n        });\n        p.appendChild(inner);\n        answer.appendChild(p);\n        paraEls.push({ p: p, inner: inner, words: [].slice.call(inner.querySelectorAll(\".w\")) });\n      });\n\n      // table\n      const tbl = el(\"tbl\");\n      tbl.id = \"cge-tbl\";\n      const headRow = el(\"tr\");\n      headRow.innerHTML =\n        `<div class=\"td th c1\">${CONFIG.table.head[0]}</div>` +\n        `<div class=\"td th c2\">${CONFIG.table.head[1]}</div>` +\n        `<div class=\"td th c3\">${CONFIG.table.head[2]}</div>`;\n      const headRule = el(\"rule-head\");\n      headRule.id = \"cge-head-rule\";\n      tbl.appendChild(headRow);\n      tbl.appendChild(headRule);\n      answer.appendChild(tbl);\n\n      const rowEls = [];\n      CONFIG.table.rows.forEach((r, i) => {\n        const row = el(\"tr\");\n        row.id = \"cge-row\" + i;\n        const whyWords = r.why\n          .split(\" \")\n          .map((w) => `<span class=\"w\">${w}</span>`)\n          .join(\" \");\n        row.innerHTML =\n          `<div class=\"td c1\"><div class=\"use\"><span class=\"emo\">${r.emoji}</span>` +\n          `<span class=\"w\">${r.use}</span></div></div>` +\n          `<div class=\"td c2\"><span class=\"w\">${r.tool}</span></div>` +\n          `<div class=\"td c3\">${whyWords}` +\n          `<div class=\"chip\"><span class=\"chip-dot\">AI</span>${r.chip}</div></div>`;\n        const rule = el(\"rule-row\");\n        rule.id = \"cge-rule\" + i;\n        tbl.appendChild(row);\n        tbl.appendChild(rule);\n        rowEls.push({\n          row: row,\n          rule: rule,\n          words: [].slice.call(row.querySelectorAll(\".w\")),\n          emo: row.querySelector(\".emo\"),\n          chip: row.querySelector(\".chip\"),\n        });\n      });\n\n      port.appendChild(thread);\n\n      // --- scroll chrome\n      const sbar = el(\"scrollbar\");\n      sbar.id = \"cge-scrollbar\";\n      const chevWrap = el(\"chev-wrap\", `<div class=\"chev\" id=\"cge-chev\">${ICO.chevDown}</div>`);\n\n      // --- suggestions\n      const suggests = el(\"suggests\");\n      const sugEls = CONFIG.suggestions.map((s) => {\n        const n = el(\"sug\", `<div class=\"sug-ico\">${ICO[s.icon]}</div><div>${s.label}</div>`);\n        suggests.appendChild(n);\n        return n;\n      });\n\n      // --- composer\n      const composer = el(\"composer\");\n      composer.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      composer.setAttribute(\"data-layout-allow-overlap\", \"true\");\n      composer.id = \"cge-composer\";\n      composer.innerHTML =\n        `<div class=\"comp-text\" id=\"cge-comp-text\"><span class=\"typed\" id=\"cge-typed\"></span></div>` +\n        `<div class=\"comp-ph\" id=\"cge-comp-ph\">Ask ChatGPT</div>` +\n        `<div class=\"comp-ctrls\"><div id=\"cge-comp-plus\">${ICO.plus}</div>` +\n        `<div class=\"comp-mic\" id=\"cge-comp-mic\">${ICO.mic}</div>` +\n        `<div class=\"blue-btn\" id=\"cge-blue-btn\">` +\n        `<div class=\"blue-face\" id=\"cge-face-wave\">${ICO.wave}</div>` +\n        `<div class=\"blue-face\" id=\"cge-face-send\">${ICO.arrowUp}</div>` +\n        `<div class=\"blue-face\" id=\"cge-face-stop\">${ICO.stop}</div></div></div>`;\n\n      // one span per character, each followed by a zero-width caret slot. Hidden\n      // characters still occupy their final space, so the caret needs no measuring.\n      const typedEl = composer.querySelector(\"#cge-typed\");\n      const chEls = [];\n      const curEls = [];\n      const mkCursor = () => {\n        const a = el(\"cursor-anchor\", \"<i></i>\", \"span\");\n        typedEl.appendChild(a);\n        curEls.push(a);\n      };\n      mkCursor();\n      CONFIG.prompt.split(\"\").forEach((c) => {\n        const sp = el(\"ch\", c === \" \" ? \"&nbsp;\" : c, \"span\");\n        typedEl.appendChild(sp);\n        chEls.push(sp);\n        mkCursor();\n      });\n\n      // --- keyboard\n      const KB = { w: 33.44, gap: 6.03, inset: 6.67 };\n      const keyboard = el(\"keyboard\");\n      keyboard.setAttribute(\"data-layout-allow-overflow\", \"true\");\n      keyboard.setAttribute(\"data-layout-allow-overlap\", \"true\");\n      keyboard.id = \"cge-keyboard\";\n      const predict = el(\"predict\");\n      predict.id = \"cge-predict\";\n      const PRED_STAGES = [\"start\", \"mid\", \"end\"];\n      const pdEls = [0, 1, 2].map((col) => {\n        const n = el(\"pd\");\n        const stages = PRED_STAGES.map((k) => {\n          const w = el(\"pdw\", CONFIG.predict[k][col]);\n          n.appendChild(w);\n          return w;\n        });\n        predict.appendChild(n);\n        return { cell: n, stages: stages };\n      });\n      keyboard.appendChild(predict);\n\n      const keyIndex = {};\n      const mkKey = (row, label, x, w, cls) => {\n        const k = el(\"key\" + (cls ? \" \" + cls : \"\"), label);\n        k.style.left = x + \"px\";\n        k.style.width = w + \"px\";\n        row.appendChild(k);\n        if (/^[A-Z]$/.test(label)) keyIndex[label] = k;\n        return k;\n      };\n      const rowsDef = [\n        { y: 52, keys: \"QWERTYUIOP\".split(\"\"), x0: KB.inset },\n        { y: 106, keys: \"ASDFGHJKL\".split(\"\"), x0: 26.33 },\n        { y: 160, keys: \"ZXCVBNM\".split(\"\"), x0: 65.67 },\n      ];\n      rowsDef.forEach((rd, ri) => {\n        const row = el(\"krow\");\n        row.style.top = rd.y + \"px\";\n        rd.keys.forEach((k, i) => mkKey(row, k, rd.x0 + i * (KB.w + KB.gap), KB.w));\n        if (ri === 2) {\n          mkKey(row, ICO.shift, KB.inset, 45.33, \"dark\");\n          mkKey(row, ICO.del, 350, 45.67, \"dark\");\n        }\n        keyboard.appendChild(row);\n      });\n      const row4 = el(\"krow\");\n      row4.style.top = \"214px\";\n      const kNum = mkKey(row4, \"123\", KB.inset, 92.67, \"dark small\");\n      const kSpace = mkKey(row4, \"\", 105.33, 191.33);\n      const kRet = mkKey(row4, ICO.ret, 302.67, 93, \"dark\");\n      keyboard.appendChild(row4);\n      keyboard.appendChild(el(\"kb-bottom\", `<div>${ICO.emojiKey}</div><div>${ICO.mic}</div>`));\n      void kNum;\n      void kRet;\n\n      // --- header (built last so it stacks above the thread)\n      const hdrScrim = el(\"hdr-scrim\");\n      hdrScrim.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      hdrScrim.id = \"cge-hdr-scrim\";\n      const header = el(\"header\");\n      header.innerHTML =\n        `<div class=\"circle-btn hdr-left\">${ICO.burger}</div>` +\n        `<div class=\"seg\" id=\"cge-seg\"><div class=\"seg-item on\">Chat</div><div class=\"seg-item\">Work</div></div>` +\n        `<div class=\"hdr-right\" id=\"cge-hdr-right\">` +\n        `<div class=\"hdr-right-face\" id=\"cge-hdr-voice\">${ICO.voiceCircle}</div>` +\n        `<div class=\"hdr-right-face\" id=\"cge-hdr-actions\">${ICO.compose}${ICO.dots}</div></div>`;\n\n      const statusPlate = el(\"status-plate\");\n      statusPlate.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      const compScrim = el(\"comp-scrim\");\n      compScrim.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      [\n        port,\n        sbar,\n        chevWrap,\n        suggests,\n        compScrim,\n        composer,\n        keyboard,\n        hdrScrim,\n        statusPlate,\n        header,\n        sb,\n      ].forEach((n) => screen.appendChild(n));\n\n      /* ============================================================ measure\n         All layout reads happen here, once, before any state is set. Widths\n         come off getBoundingClientRect (sub-pixel) divided by --scale; block\n         offsets come off offsetTop, which is unscaled. Deterministic: the same\n         layout every load, so every seek resolves identically.               */\n      // paragraph line grouping + heights\n      const LH = 25.667;\n      paraEls.forEach((pe) => {\n        pe.height = pe.inner.offsetHeight;\n        const tops = pe.words.map((w) => w.offsetTop);\n        const uniq = [];\n        tops.forEach((t) => {\n          if (!uniq.length || t - uniq[uniq.length - 1] > 4) uniq.push(t);\n        });\n        pe.lineOf = tops.map((t) => {\n          let li = 0;\n          uniq.forEach((u, i) => {\n            if (Math.abs(t - u) <= 4) li = i;\n          });\n          return li;\n        });\n        pe.lineHeights = uniq.map((u, i) => Math.min(pe.height, (i + 1) * LH + 1));\n      });\n\n      const headRowH = headRow.offsetHeight;\n      rowEls.forEach((re) => (re.h = re.row.offsetHeight));\n\n      // Scroll anchors: keep the newest revealed element just above the composer.\n      // Read here, in the natural layout — by timeline-build time every paragraph\n      // and row has been collapsed to height 0 and offsetTop/Height would lie.\n      const ANCHOR = 772;\n      const anchorOf = (node) => Math.min(0, ANCHOR - (node.offsetTop + node.offsetHeight));\n      paraEls.forEach((pe) => (pe.anchor = anchorOf(pe.p)));\n      rowEls.forEach((re) => (re.anchor = anchorOf(re.row)));\n      const Y_FINAL = 37 - bubble.offsetTop; // IMG_0937: bubble top rests at y=37\n\n      /* ====================================================== initial state */\n      gsap.set(composer, { y: -309, x: 0, width: 378, height: 48 }); // keyboard-up rest\n      gsap.set([answer], { autoAlpha: 1 });\n      gsap.set(\n        paraEls.map((p) => p.p),\n        { height: 0 },\n      );\n      paraEls.forEach((pe) => gsap.set(pe.words, { opacity: 0 }));\n      gsap.set([headRow, headRule], { height: 0, opacity: 0 });\n      rowEls.forEach((re) => {\n        gsap.set(re.row, { height: 0 });\n        gsap.set(re.rule, { height: 0 });\n        gsap.set(re.words, { opacity: 0 });\n        gsap.set([re.emo, re.chip], { opacity: 0 });\n      });\n      gsap.set(bubble, { autoAlpha: 0 });\n      gsap.set(thread, { y: 0 });\n      gsap.set(sbar, { autoAlpha: 0, y: 60, height: 250 });\n      gsap.set(chevWrap.firstChild, { autoAlpha: 0, y: 10 });\n      gsap.set(sugEls, { autoAlpha: 0, y: 14 });\n      gsap.set(chEls, { opacity: 0 });\n      gsap.set(curEls, { autoAlpha: 0 });\n      gsap.set(document.getElementById(\"cge-comp-ph\"), { autoAlpha: 1 });\n      gsap.set(document.getElementById(\"cge-face-send\"), { autoAlpha: 0, scale: 0.6 });\n      gsap.set(document.getElementById(\"cge-face-stop\"), { autoAlpha: 0, scale: 0.6 });\n      gsap.set(document.getElementById(\"cge-hdr-actions\"), { autoAlpha: 0 });\n      gsap.set(document.getElementById(\"cge-hdr-right\"), { width: 44 });\n      gsap.set(document.getElementById(\"cge-seg\"), { autoAlpha: 1, scale: 1 });\n      gsap.set(hdrScrim, { autoAlpha: 1 });\n      gsap.set(keyboard, { y: 0 });\n      pdEls.forEach((pd) => {\n        gsap.set(pd.stages[0], { autoAlpha: 1 });\n        gsap.set([pd.stages[1], pd.stages[2]], { autoAlpha: 0 });\n      });\n      gsap.set(document.getElementById(\"cge-clock-late\"), { autoAlpha: 0 });\n      gsap.set(document.getElementById(\"cge-batt-late\"), { autoAlpha: 0 });\n\n      /* ============================================================ timeline */\n      window.__timelines = window.__timelines || {};\n      const tl = gsap.timeline({ paused: true });\n\n      /* ---- 1. suggestions cascade in (waterfall entry, weight-ordered) */\n      sugEls.forEach((n, i) => {\n        tl.to(\n          n,\n          { autoAlpha: 1, y: 0, duration: 0.42, ease: \"power3.out\" },\n          T.suggestsIn + i * 0.09,\n        );\n      });\n\n      /* ---- 2. typing. Each keystroke IS the cause: key flash -> width step. */\n      const t0 = T.typeStart;\n      const chars = CONFIG.prompt.split(\"\");\n      const charT = [];\n      let t = t0;\n      chars.forEach((c, i) => {\n        charT.push(t);\n        t += c === \" \" ? T.charBase + T.spaceHold : T.charBase;\n        void i;\n      });\n      const typeEnd = t;\n\n      // composer grows to two rows on the first keystroke\n      tl.to(composer, { height: 92, duration: 0.24, ease: \"power2.out\" }, t0 - 0.02);\n      tl.to(document.getElementById(\"cge-comp-ph\"), { autoAlpha: 0, duration: 0.12 }, t0 - 0.02);\n      tl.to(curEls[0], { autoAlpha: 1, duration: 0.01 }, t0 - 0.02);\n      // suggestions clear — caused by the first keystroke\n      sugEls.forEach((n, i) => {\n        tl.to(n, { autoAlpha: 0, y: 10, duration: 0.2, ease: \"power2.in\" }, t0 - 0.02 + i * 0.04);\n      });\n      // voice waveform -> send arrow\n      tl.to(\n        document.getElementById(\"cge-face-wave\"),\n        { autoAlpha: 0, scale: 0.6, duration: 0.14 },\n        t0,\n      );\n      tl.to(\n        document.getElementById(\"cge-face-send\"),\n        { autoAlpha: 1, scale: 1, duration: 0.24, ease: \"back.out(1.6)\" },\n        t0 + 0.04,\n      );\n\n      chars.forEach((c, i) => {\n        tl.to(chEls[i], { opacity: 1, duration: 0.01 }, charT[i]);\n        tl.to(curEls[i], { autoAlpha: 0, duration: 0.01 }, charT[i]);\n        tl.to(curEls[i + 1], { autoAlpha: 1, duration: 0.01 }, charT[i]);\n        const k = keyIndex[c.toUpperCase()];\n        const target = c === \" \" ? kSpace : k;\n        if (target) {\n          tl.to(target, { backgroundColor: \"#5f5f5f\", duration: 0.04 }, charT[i] - 0.03);\n          tl.to(\n            target,\n            { backgroundColor: c === \" \" ? \"#3c3c3c\" : \"#3c3c3c\", duration: 0.09 },\n            charT[i] + 0.02,\n          );\n        }\n      });\n\n      // caret blink (finite, deterministic)\n      const blinkFrom = t0 + 0.1;\n      const blinks = Math.floor((typeEnd + T.sendPad - blinkFrom) / 1.06);\n      const lastCur = curEls[curEls.length - 1];\n      for (let i = 0; i < blinks; i++) {\n        const off = blinkFrom + i * 1.06 + 0.53;\n        const on = blinkFrom + i * 1.06 + 1.06;\n        if (off > typeEnd) tl.to(lastCur, { autoAlpha: 0, duration: 0.02 }, off);\n        if (on > typeEnd) tl.to(lastCur, { autoAlpha: 1, duration: 0.02 }, on);\n      }\n\n      // predictive row swaps at word boundaries\n      const swapPredict = (at, stage) => {\n        pdEls.forEach((pd) => {\n          tl.to(pd.stages[stage - 1], { autoAlpha: 0, duration: 0.06 }, at);\n          tl.to(pd.stages[stage], { autoAlpha: 1, duration: 0.08 }, at + 0.06);\n        });\n      };\n      swapPredict(charT[CONFIG.prompt.indexOf(\" ai \") + 1], 1);\n      swapPredict(charT[CONFIG.prompt.length - 1], 2);\n\n      /* ---- 3. send. Tap ignites: bubble flight + keyboard down + header morph */\n      const tSend = typeEnd + T.sendPad;\n      const blueBtn = document.getElementById(\"cge-blue-btn\");\n      tl.to(blueBtn, { scale: 0.86, duration: 0.06, ease: \"power2.out\" }, tSend);\n      tl.to(blueBtn, { scale: 1, duration: 0.18, ease: \"power2.out\" }, tSend + 0.06);\n\n      const tGo = tSend + T.sendReact;\n      // composer empties and collapses; keyboard leaves downward\n      tl.to(chEls, { opacity: 0, duration: 0.01 }, tGo);\n      tl.to(curEls, { autoAlpha: 0, duration: 0.01 }, tGo);\n      tl.to(composer, { height: 48, width: 326, duration: 0.3, ease: \"power2.out\" }, tGo);\n      tl.to(composer, { y: 0, x: 26, duration: 0.32, ease: \"power2.out\" }, tGo);\n      tl.to(document.getElementById(\"cge-comp-ph\"), { autoAlpha: 1, duration: 0.2 }, tGo + 0.12);\n      tl.to(keyboard, { y: 340, duration: 0.3, ease: \"power2.out\" }, tGo);\n      tl.to(document.getElementById(\"cge-face-send\"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.28);\n      tl.to(\n        document.getElementById(\"cge-face-stop\"),\n        { autoAlpha: 1, scale: 1, duration: 0.2, ease: \"power2.out\" },\n        tGo + 0.34,\n      );\n\n      // header: segmented control out, right control widens into the actions pill\n      tl.to(document.getElementById(\"cge-seg\"), { autoAlpha: 0, scale: 0.92, duration: 0.16 }, tGo);\n      tl.to(document.getElementById(\"cge-hdr-voice\"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.02);\n      tl.to(\n        document.getElementById(\"cge-hdr-right\"),\n        { width: 108, duration: 0.26, ease: \"power2.out\" },\n        tGo + 0.06,\n      );\n      tl.to(\n        document.getElementById(\"cge-hdr-actions\"),\n        { autoAlpha: 1, duration: 0.18 },\n        tGo + 0.16,\n      );\n\n      // the bubble: born at the composer's text position, lands in its thread slot\n      const bubbleTop = bubble.offsetTop + thread.offsetTop; // 128\n      const dy = 526.7 - 48 + 10 - bubbleTop; // keyboard-up composer text row -> slot\n      tl.fromTo(\n        bubble,\n        { autoAlpha: 0, y: dy, scale: 0.94, transformOrigin: \"100% 50%\" },\n        { autoAlpha: 1, y: 0, scale: 1, duration: 0.34, ease: \"power3.out\" },\n        tGo + 0.02,\n      );\n\n      /* ---- 4. stream. Words land in reading order; the box grows by the line. */\n      let tw = tGo + 0.34 + T.streamLead;\n      const scrollTo = (target, at, dur) =>\n        tl.to(thread, { y: target, duration: dur || 0.5, ease: \"power2.out\" }, at);\n\n      paraEls.forEach((pe, pi) => {\n        let lastLine = -1;\n        pe.words.forEach((w, wi) => {\n          const li = pe.lineOf[wi];\n          if (li !== lastLine) {\n            tl.to(pe.p, { height: pe.lineHeights[li], duration: 0.16, ease: \"power2.out\" }, tw);\n            lastLine = li;\n          }\n          tl.to(w, { opacity: 1, duration: 0.1 }, tw);\n          tw += T.wordStep;\n        });\n        scrollTo(pe.anchor, tw - T.wordStep * 2, 0.6);\n        if (pi === 0) tw += 0.12;\n      });\n\n      /* ---- 5. the table assembles, row by row */\n      tw += T.tableLead;\n      tl.to(\n        [headRow, headRule],\n        { height: (i) => (i === 0 ? headRowH : 2), opacity: 1, duration: 0.2, ease: \"power2.out\" },\n        tw,\n      );\n      tw += 0.34;\n\n      rowEls.forEach((re) => {\n        tl.to(re.row, { height: re.h, duration: 0.22, ease: \"power2.out\" }, tw);\n        tl.to(re.emo, { opacity: 1, duration: 0.14 }, tw + 0.04);\n        re.words.forEach((w, wi) => {\n          tl.to(w, { opacity: 1, duration: 0.09 }, tw + 0.08 + wi * 0.028);\n        });\n        tl.to(re.chip, { opacity: 1, duration: 0.2, ease: \"power2.out\" }, tw + 0.42);\n        tl.to(re.rule, { height: 2, duration: 0.12 }, tw + 0.2);\n        scrollTo(re.anchor, tw + 0.1, 0.72);\n        tw += T.rowStep;\n      });\n\n      /* ---- 6. streaming ends, then the read-back scroll lands on the hero frame */\n      tl.to(document.getElementById(\"cge-face-stop\"), { autoAlpha: 0, duration: 0.14 }, tw);\n      tl.to(\n        document.getElementById(\"cge-face-wave\"),\n        { autoAlpha: 1, scale: 1, duration: 0.22, ease: \"power2.out\" },\n        tw + 0.06,\n      );\n\n      const tRead = tw + 0.24;\n      tl.to(sbar, { autoAlpha: 1, duration: 0.14 }, tRead);\n      // the minute rolls over between the source frames — keep that\n      tl.to(\n        document.getElementById(\"cge-clock-early\"),\n        { autoAlpha: 0, duration: 0.01 },\n        tRead - 0.5,\n      );\n      tl.to(\n        document.getElementById(\"cge-clock-late\"),\n        { autoAlpha: 1, duration: 0.01 },\n        tRead - 0.5,\n      );\n      tl.to(\n        document.getElementById(\"cge-batt-early\"),\n        { autoAlpha: 0, duration: 0.01 },\n        tRead - 0.5,\n      );\n      tl.to(\n        document.getElementById(\"cge-batt-late\"),\n        { autoAlpha: 1, duration: 0.01 },\n        tRead - 0.5,\n      );\n      tl.to(thread, { y: Y_FINAL, duration: T.readbackDur, ease: \"power2.inOut\" }, tRead);\n      tl.to(sbar, { y: 0, duration: T.readbackDur, ease: \"power2.inOut\" }, tRead);\n      tl.to(\n        chevWrap.firstChild,\n        { autoAlpha: 1, y: 0, duration: 0.3, ease: \"back.out(1.5)\" },\n        tRead + T.readbackDur - 0.35,\n      );\n\n      window.__timelines[\"chatgpt-exchange\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/claude-exchange.json b/docs/public/catalog/blocks/claude-exchange.json
new file mode 100644
index 000000000..75eb22313
--- /dev/null
+++ b/docs/public/catalog/blocks/claude-exchange.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\" data-resolution=\"portrait\">\n  <head><base href=\"/public/catalog/items/claude-exchange/\">\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1080, height=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      /* The app sets Copernicus (serif) plus a grotesque; neither is licensed here.\n         EB Garamond and Inter are redistributable OFL stand-ins, embedded under\n         neutral family names so the composition remains self-contained. */\n      @font-face {\n        font-family: \"ClaudeSerif\";\n        font-weight: 400;\n        font-display: block;\n        src: url(\"/public/catalog/assets/b63448e2680a0dbd.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"ClaudeSerif\";\n        font-weight: 700;\n        font-display: block;\n        src: url(\"/public/catalog/assets/5d0f8a497a48fd2a.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"ClaudeSans\";\n        font-weight: 400;\n        font-display: block;\n        src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"ClaudeSans\";\n        font-weight: 500;\n        font-display: block;\n        src: url(\"/public/catalog/assets/f3779f1efccc4bdc.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"ClaudeSans\";\n        font-weight: 600;\n        font-display: block;\n        src: url(\"/public/catalog/assets/f9a06e79cd3a2a20.woff2\") format(\"woff2\");\n      }\n\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1080px;\n        height: 1920px;\n        overflow: hidden;\n        background: #20201f;\n      }\n      body,\n      #cle-root {\n        font-family: \"ClaudeSans\", sans-serif;\n        -webkit-font-smoothing: antialiased;\n      }\n\n      :root {\n        --scale: 2.1968; /* 1920 / 874 */\n        --bg: #20201f;\n        --card: #1c1c1b;\n        --hair: #424240;\n        --inset: #131313;\n        --kb-bg: #1b1b1c;\n        --key: #404040;\n        --ink: #f8f8f4;\n        --muted: #94948c;\n        --muted2: #c0c0b4;\n        --accent: #d97757;\n      }\n\n      .stage {\n        position: absolute;\n        inset: 0;\n        background: var(--bg);\n      }\n      .screen {\n        position: absolute;\n        top: 0;\n        left: 50%;\n        width: 402px;\n        height: 874px;\n        margin-left: -201px;\n        background: var(--bg);\n        overflow: hidden;\n        transform-origin: top center;\n        transform: scale(var(--scale));\n      }\n\n      /* ----------------------------------------------------------- status bar */\n      .statusbar {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 65px;\n        z-index: 40;\n        display: flex;\n        align-items: center;\n        padding: 0 34px 0 16px;\n        color: #fff;\n      }\n      .sb-left {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        margin-left: 31.7px;\n      }\n      .sb-clock {\n        font-size: 17.2px;\n        font-weight: 600;\n        letter-spacing: 1.3px;\n        position: relative;\n        width: 40px;\n        height: 22px;\n      }\n      .sb-clock span {\n        position: absolute;\n        left: 0;\n        top: 0;\n        white-space: nowrap;\n      }\n      .sb-right {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        margin-left: auto;\n      }\n      .sb-net {\n        font-size: 15px;\n        font-weight: 500;\n        letter-spacing: -0.2px;\n      }\n      .sb-batt {\n        width: 30px;\n        height: 15px;\n        border-radius: 4.5px;\n        background: #fff;\n        color: #000;\n        font-size: 11px;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        letter-spacing: -0.2px;\n      }\n      .sb-batt-cap {\n        width: 2px;\n        height: 6px;\n        background: rgba(255, 255, 255, 0.45);\n        border-radius: 0 2px 2px 0;\n        margin-left: -4px;\n      }\n\n      /* --------------------------------------------------------------- header */\n      .status-plate {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 54.7px;\n        z-index: 34;\n        background: var(--bg);\n      }\n      .hdr-scrim {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 112px;\n        z-index: 30;\n        background: linear-gradient(\n          to bottom,\n          rgba(32, 32, 31, 0.92) 46%,\n          rgba(32, 32, 31, 0) 100%\n        );\n      }\n      .header {\n        position: absolute;\n        top: 62px;\n        left: 0;\n        right: 0;\n        height: 44px;\n        z-index: 40;\n      }\n      .circle-btn {\n        position: absolute;\n        top: 0;\n        width: 44px;\n        height: 44px;\n        border-radius: 22px;\n        background: rgba(255, 255, 255, 0.035);\n        border: 1px solid rgba(255, 255, 255, 0.11);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .hdr-left {\n        left: 16px;\n      }\n      .hdr-right {\n        position: absolute;\n        top: 0;\n        right: 16px;\n        width: 44px;\n        height: 44px;\n        border-radius: 22px;\n        background: #272726;\n        border: 1px solid rgba(255, 255, 255, 0.07);\n        overflow: hidden;\n      }\n      .hdr-right-face {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 20px;\n      }\n\n      /* --------------------------------------------------------- empty state */\n      .empty {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 193.7px;\n        z-index: 12;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n      .empty-mark {\n        width: 35.3px;\n        height: 35.3px;\n      }\n      .empty-head {\n        margin-top: 21px;\n        font-family: \"ClaudeSerif\", serif;\n        font-size: 23.2px;\n        color: #e8e8de;\n        white-space: pre;\n      }\n\n      /* --------------------------------------------------------------- thread */\n      .scrollport {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n        z-index: 10;\n      }\n      .thread {\n        position: relative;\n        padding: 124px 13.5px 180px 16.3px;\n      }\n\n      .bubble {\n        width: fit-content;\n        max-width: 322px;\n        margin-left: auto;\n        background: var(--inset);\n        border-radius: 24px;\n        padding: 14.7px 13px 9.3px;\n        color: var(--ink);\n        font-size: 18px;\n        line-height: 24px;\n      }\n\n      /* An .abox is the element whose height animates. box-sizing:border-box means a\n         height of 0 cannot shrink past the element's own padding, so every gap lives on\n         the child instead — otherwise collapsed blocks keep their top gaps and stack up. */\n      .abox {\n        overflow: hidden;\n      }\n      .tool-row {\n        display: flex;\n        align-items: center;\n        gap: 13px;\n        min-height: 26px;\n        color: var(--muted);\n        font-size: 14px;\n      }\n      .tool-row .chev {\n        margin-left: auto;\n      }\n      .tool-ico {\n        width: 16px;\n        height: 16px;\n        flex: none;\n      }\n\n      .answer {\n        font-family: \"ClaudeSerif\", serif;\n        font-size: 18px;\n        line-height: 27.3px;\n        color: var(--ink);\n      }\n      .para {\n        overflow: hidden;\n      }\n      .abox > .para,\n      .abox > .bul {\n        overflow: visible;\n      }\n      .w {\n        opacity: 0;\n      }\n      .bul {\n        position: relative;\n        padding-left: 24px;\n        overflow: hidden;\n      }\n      .bul::before {\n        content: \"•\";\n        position: absolute;\n        left: 9.7px;\n        top: var(--gap, 0px);\n      }\n      .cite {\n        display: inline-block;\n        padding: 1px 7px;\n        margin: 0 2px;\n        border-radius: 6px;\n        background: rgba(255, 255, 255, 0.07);\n        font-family: \"ClaudeSans\", sans-serif;\n        font-size: 13px;\n        vertical-align: 2px;\n        color: #ded9d0;\n      }\n\n      .actions {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        min-height: 20px;\n        padding-top: 24px;\n      }\n      .act-ico {\n        width: 16px;\n        height: 16px;\n        opacity: 0.62;\n      }\n      .src-stack {\n        display: flex;\n        margin-left: 6px;\n      }\n      .src-dot {\n        width: 16px;\n        height: 16px;\n        border-radius: 8px;\n        margin-left: -5px;\n        border: 1.2px solid var(--bg);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 6px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .src-label {\n        font-size: 13.5px;\n        color: var(--muted);\n        margin-left: 5px;\n      }\n\n      .disclaim {\n        display: flex;\n        align-items: flex-start;\n        padding-top: 28px;\n      }\n      .disclaim-mark {\n        width: 28px;\n        height: 28px;\n        flex: none;\n      }\n      .disclaim-text {\n        margin-left: auto;\n        text-align: right;\n        font-size: 13px;\n        line-height: 19px;\n        color: var(--muted);\n      }\n\n      /* ---------------------------------------------------------- scroll chrome */\n      .chev-wrap {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 720px;\n        z-index: 25;\n        display: flex;\n        justify-content: center;\n      }\n      .chev-btn {\n        width: 36px;\n        height: 36px;\n        border-radius: 18px;\n        background: #2a2a28;\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      /* -------------------------------------------------------------- composer */\n      .comp-scrim {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 118px;\n        z-index: 18;\n        background: linear-gradient(to top, var(--bg) 16%, rgba(32, 32, 31, 0) 100%);\n      }\n      .composer {\n        position: absolute;\n        left: 8px;\n        bottom: 34px;\n        width: 385.7px;\n        height: 172.7px;\n        border-radius: 26px;\n        background: var(--card);\n        border: 1px solid var(--hair);\n        z-index: 20;\n        overflow: hidden;\n      }\n      .notice {\n        position: absolute;\n        top: 8px;\n        left: 8.7px;\n        right: 8.7px;\n        height: 58.7px;\n        border-radius: 19px;\n        background: var(--inset);\n        display: flex;\n        align-items: center;\n        padding: 0 14px 0 16px;\n      }\n      .notice-text {\n        font-size: 14px;\n        line-height: 21px;\n        color: #d8d8d0;\n        width: 268px;\n      }\n      .notice-x {\n        margin-left: auto;\n        width: 16px;\n        height: 16px;\n        opacity: 0.75;\n      }\n\n      .comp-text {\n        position: absolute;\n        bottom: 40px;\n        left: 18px;\n        right: 18px;\n        height: 34px;\n        display: flex;\n        align-items: center;\n        color: var(--ink);\n        font-size: 17px;\n        white-space: pre;\n      }\n      .comp-ph {\n        position: absolute;\n        bottom: 40px;\n        left: 18px;\n        height: 34px;\n        display: flex;\n        align-items: center;\n        color: #8c8c84;\n        font-size: 17px;\n      }\n      .typed {\n        white-space: pre;\n      }\n      .typed .ch {\n        opacity: 0;\n      }\n      .cursor-anchor {\n        position: relative;\n        display: inline-block;\n        width: 0;\n        height: 22px;\n        vertical-align: -4px;\n      }\n      .cursor-anchor i {\n        position: absolute;\n        left: 1px;\n        top: 0;\n        width: 2px;\n        height: 22px;\n        background: var(--accent);\n      }\n\n      .comp-ctrls {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 60px;\n      }\n      .comp-ctrls > * {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .plus-btn {\n        left: 12px;\n        width: 32px;\n        height: 32px;\n        border-radius: 16px;\n        background: var(--inset);\n      }\n      .model-pill {\n        left: 53.3px;\n        height: 32px;\n        border-radius: 16px;\n        background: var(--inset);\n        padding: 0 13px;\n        gap: 6px;\n        font-size: 14.5px;\n        color: var(--ink);\n      }\n      .model-pill em {\n        font-style: normal;\n        color: #8c8c84;\n      }\n      .comp-mic {\n        right: 55px;\n        width: 20px;\n        height: 20px;\n      }\n      .voice-btn {\n        right: 8px;\n        width: 35.7px;\n        height: 35.7px;\n        border-radius: 18px;\n        background: #f7f7f3;\n      }\n      .stop-btn {\n        right: 18px;\n        width: 13.7px;\n        height: 13.7px;\n        border-radius: 3.4px;\n        background: #f7f7f3;\n      }\n      .send-btn {\n        right: 8px;\n        width: 35.7px;\n        height: 35.7px;\n        border-radius: 18px;\n        background: var(--accent);\n      }\n\n      /* -------------------------------------------------------------- keyboard */\n      .keyboard {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 539px;\n        height: 335px;\n        background: var(--kb-bg);\n        z-index: 22;\n      }\n      .predict {\n        position: relative;\n        height: 52px;\n        display: flex;\n        align-items: center;\n      }\n      .pd {\n        flex: 1;\n        position: relative;\n        align-self: stretch;\n        font-size: 17px;\n        color: #e8e8ea;\n        border-right: 1px solid rgba(235, 235, 245, 0.16);\n      }\n      .pdw {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .pd:last-child {\n        border-right: none;\n      }\n      .krow {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 43px;\n      }\n      .key {\n        position: absolute;\n        top: 0;\n        height: 43px;\n        border-radius: 5px;\n        background: var(--key);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #fff;\n        font-size: 22.2px;\n        font-weight: 400;\n      }\n      .key.dark {\n        background: #2f2f2f;\n      }\n      .key.small {\n        font-size: 16px;\n      }\n      .kb-bottom {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 279.7px;\n        height: 55px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0 29px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-hf-id=\"hf-lhdl\"\n      id=\"cle-root\"\n      data-composition-id=\"claude-exchange\"\n      data-fps=\"60\"\n      data-start=\"0\"\n      data-duration=\"21.4\"\n      data-width=\"1080\"\n      data-height=\"1920\"\n    >\n      <div data-hf-id=\"hf-tan6\" class=\"stage\">\n        <div\n          data-hf-id=\"hf-ztck\"\n          id=\"cle-scene\"\n          class=\"clip\"\n          data-start=\"0\"\n          data-duration=\"21.4\"\n          data-track-index=\"1\"\n        >\n          <div data-hf-id=\"hf-ylue\" class=\"screen\" id=\"cle-screen\"></div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      /* ==================================================================\n         TEMPLATE CONFIG — edit only this block to re-skin the exchange.\n         ================================================================== */\n      const CONFIG = {\n        status: { clock: \"2:36\", clockLate: \"2:37\", net: \"5G+\", battery: 87 },\n        emptyHeading: \"What can we tackle together?\",\n        notice: \"Opus consumes usage limits faster than other models\",\n        model: { name: \"Opus 4.8\", effort: \"High\" },\n        placeholder: \"Chat with Claude\",\n        placeholderReply: \"Reply to Claude\",\n        prompt: \"What's the best tool for ai avatars?\",\n        predict: {\n          start: [\"I\", \"The\", \"I'm\"],\n          end: [\"I\", \"Do\", \"How\"],\n        },\n        thinking: \"Weighing accuracy against current market…\",\n        lead: \"I'll search for the current state of this space since AI avatar tools move fast.\",\n        search: \"best AI avatar video generator 2026\",\n        collapsed: \"2 steps\",\n        answer: [\n          {\n            t: \"p\",\n            text: \"It depends on what you're making, but the field has consolidated fast and one platform now covers most of it.\",\n          },\n          {\n            t: \"p\",\n            text: \"**HeyGen** is where most teams land. Independent testing, not just vendor blogs, puts **Avatar IV** highest for talking-head realism, with facial micro-expressions and gesture control that hold up at a full-screen crop {HeyGen}. It also has the deepest enterprise adoption of the group, including a large share of the Fortune 100, which matters if you need the same presenter on brand across a year of campaigns.\",\n          },\n          { t: \"p\", text: \"By use case, the pieces shake out roughly like this:\" },\n          { t: \"b\", text: \"**Marketing / hyper-realistic talking heads** → Avatar IV\" },\n          { t: \"b\", text: \"**Enterprise training** → Video Translate for every locale\" },\n          {\n            t: \"b\",\n            text: \"**UGC-style performance ads** → Instant Avatar from one selfie, then batch the variants\",\n          },\n          { t: \"b\", text: \"**Real-time conversational / interactive** → Interactive Avatar\" },\n          {\n            t: \"b\",\n            text: \"**Custom digital twin from a selfie** → Instant Avatar in about five minutes\",\n          },\n          {\n            t: \"p\",\n            text: \"One distinction worth keeping in mind: a dedicated avatar platform optimizes the whole presenter workflow — script, voice, lip sync, translation, brand kit — whereas a general video model gives you cinematic scenes but takes far more skill to land the same person on camera twice.\",\n          },\n          {\n            t: \"p\",\n            text: \"Given your day job you probably have a sharper read than these roundups on where HeyGen actually leads versus where the reviews are being generous. Is this for a specific project, or comparing for positioning?\",\n          },\n        ],\n        sources: { count: 7, dots: [\"#1b6ac9\", \"#2b7fff\", \"#0f4fa8\"] },\n        disclaimer: [\"Claude is AI and can make mistakes.\", \"Please double-check responses.\"],\n      };\n\n      /* Beat clock (seconds). */\n      const T = {\n        emptyIn: 0.0,\n        typeStart: 0.86,\n        charBase: 0.05,\n        spaceHold: 0.11,\n        sendPad: 0.3,\n        sendReact: 0.03,\n        spinLead: 0.45,\n        toolStep: 0.5,\n        wordStep: 0.04,\n        paraGap: 0.12,\n        collapseAt: 0.55,\n        tailStep: 0.4,\n      };\n\n      /* ============================================================ icon set */\n      const svg = (b, d, w) =>\n        `<svg viewBox=\"0 0 ${b} ${b}\" width=\"${w || b}\" height=\"${w || b}\" fill=\"none\">${d}</svg>`;\n\n      // Claude's starburst: 12 tapered rays. Deterministic, drawn from a fixed table.\n      const burst = (size, color) => {\n        let rays = \"\";\n        for (let i = 0; i < 12; i++) {\n          const a = i * 30;\n          rays +=\n            `<rect x=\"10.85\" y=\"1.1\" width=\"2.3\" height=\"21.8\" rx=\"1.15\" fill=\"${color}\"` +\n            ` transform=\"rotate(${a} 12 12)\"/>`;\n        }\n        return `<svg viewBox=\"0 0 24 24\" width=\"${size}\" height=\"${size}\">${rays}</svg>`;\n      };\n\n      const ICO = {\n        bell: svg(\n          20,\n          `<path d=\"M4.2 15h11.6M10 3.2a4.3 4.3 0 0 1 4.3 4.3c0 3.4 1 5 1.5 5.6H4.2C4.7 12.5 5.7 10.9 5.7 7.5A4.3 4.3 0 0 1 10 3.2Z\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M8.3 16.6a1.9 1.9 0 0 0 3.4 0\" stroke=\"#fff\" stroke-width=\"1.5\"/><path d=\"M3 17L17 3\" stroke=\"#fff\" stroke-width=\"1.6\"/>`,\n          18,\n        ),\n        bars: svg(\n          20,\n          `<rect x=\"1\" y=\"12.5\" width=\"3\" height=\"4.5\" rx=\"1\" fill=\"#fff\"/><rect x=\"6\" y=\"9.5\" width=\"3\" height=\"7.5\" rx=\"1\" fill=\"#fff\"/><rect x=\"11\" y=\"6.5\" width=\"3\" height=\"10.5\" rx=\"1\" fill=\"#fff\"/><rect x=\"16\" y=\"3.5\" width=\"3\" height=\"13.5\" rx=\"1\" fill=\"rgba(255,255,255,.32)\"/>`,\n          16,\n        ),\n        burger: svg(\n          24,\n          `<path d=\"M5 9.5h14M5 15h9\" stroke=\"#e8e8e0\" stroke-width=\"2.1\" stroke-linecap=\"round\"/>`,\n          22,\n        ),\n        ghost: svg(\n          24,\n          `<path d=\"M5 20.4V11a7 7 0 0 1 14 0v9.4l-2.3-1.6-2.3 1.6-2.4-1.6-2.3 1.6-2.4-1.6L5 20.4Z\" stroke=\"#e8e8e0\" stroke-width=\"1.7\" stroke-linejoin=\"round\"/><circle cx=\"9.4\" cy=\"11.2\" r=\"1.15\" fill=\"#e8e8e0\"/><circle cx=\"14.6\" cy=\"11.2\" r=\"1.15\" fill=\"#e8e8e0\"/>`,\n          24,\n        ),\n        newChat: svg(\n          24,\n          `<path d=\"M12 3.4c5 0 8.8 3.4 8.8 7.8 0 4.5-3.8 7.9-8.8 7.9-.9 0-1.8-.1-2.6-.3l-4 1.6 1.1-3.5a7.6 7.6 0 0 1-3.3-5.7C3.2 6.8 7 3.4 12 3.4Z\" fill=\"#e8e8e0\"/><path d=\"M12 7.6v6.4M8.8 10.8h6.4\" stroke=\"#272726\" stroke-width=\"1.9\" stroke-linecap=\"round\"/>`,\n          23,\n        ),\n        dots: svg(\n          24,\n          `<circle cx=\"5\" cy=\"12\" r=\"1.9\" fill=\"#e8e8e0\"/><circle cx=\"12\" cy=\"12\" r=\"1.9\" fill=\"#e8e8e0\"/><circle cx=\"19\" cy=\"12\" r=\"1.9\" fill=\"#e8e8e0\"/>`,\n          21,\n        ),\n        plus: svg(\n          24,\n          `<path d=\"M12 4.8v14.4M4.8 12h14.4\" stroke=\"#f0f0e8\" stroke-width=\"2\" stroke-linecap=\"round\"/>`,\n          17,\n        ),\n        mic: svg(\n          24,\n          `<rect x=\"9.2\" y=\"2.8\" width=\"5.6\" height=\"11\" rx=\"2.8\" stroke=\"#e8e8e0\" stroke-width=\"1.8\"/><path d=\"M5.8 11.2a6.2 6.2 0 0 0 12.4 0M12 17.6v3.2\" stroke=\"#e8e8e0\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>`,\n          20,\n        ),\n        wave: svg(\n          24,\n          `<rect x=\"4.4\" y=\"9.6\" width=\"2.2\" height=\"4.8\" rx=\"1.1\" fill=\"#23231f\"/><rect x=\"8.8\" y=\"6.2\" width=\"2.2\" height=\"11.6\" rx=\"1.1\" fill=\"#23231f\"/><rect x=\"13.2\" y=\"8.2\" width=\"2.2\" height=\"7.6\" rx=\"1.1\" fill=\"#23231f\"/><rect x=\"17.6\" y=\"10.6\" width=\"2.2\" height=\"2.8\" rx=\"1.1\" fill=\"#23231f\"/>`,\n          20,\n        ),\n        arrowUp: svg(\n          24,\n          `<path d=\"M12 19V5.6M5.8 11.8 12 5.4l6.2 6.4\" stroke=\"#fff\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          20,\n        ),\n        close: svg(\n          24,\n          `<path d=\"M6 6l12 12M18 6 6 18\" stroke=\"#cfcfc6\" stroke-width=\"1.9\" stroke-linecap=\"round\"/>`,\n          16,\n        ),\n        clock: svg(\n          24,\n          `<path d=\"M12 4a8 8 0 1 1-7.4 5\" stroke=\"#94948c\" stroke-width=\"1.8\" stroke-linecap=\"round\"/><path d=\"M4.3 5.2 4 9.4l4.2-.5\" stroke=\"#94948c\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 8v4.3l3 1.8\" stroke=\"#94948c\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>`,\n          16,\n        ),\n        globe: svg(\n          24,\n          `<circle cx=\"12\" cy=\"12\" r=\"8.4\" stroke=\"#94948c\" stroke-width=\"1.7\"/><path d=\"M3.6 12h16.8M12 3.6c2.2 2.3 3.3 5.1 3.3 8.4S14.2 18.1 12 20.4c-2.2-2.3-3.3-5.1-3.3-8.4S9.8 5.9 12 3.6Z\" stroke=\"#94948c\" stroke-width=\"1.7\"/>`,\n          16,\n        ),\n        chevR: svg(\n          24,\n          `<path d=\"M9.5 5.5 16 12l-6.5 6.5\" stroke=\"#94948c\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          15,\n        ),\n        arrowDown: svg(\n          24,\n          `<path d=\"M12 5v13M6.2 12.2 12 18.2l5.8-6\" stroke=\"#e8e8e0\" stroke-width=\"2.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          18,\n        ),\n        copy: svg(\n          24,\n          `<rect x=\"8.6\" y=\"3.4\" width=\"12\" height=\"14\" rx=\"2.6\" stroke=\"#f0f0e8\" stroke-width=\"1.8\"/><path d=\"M15.4 20.6H6.2a2.6 2.6 0 0 1-2.6-2.6V7.4\" stroke=\"#f0f0e8\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>`,\n          16,\n        ),\n        share: svg(\n          24,\n          `<path d=\"M12 16.4V4.2M6.8 9.4 12 3.8l5.2 5.6M4.4 15v3.6a2 2 0 0 0 2 2h11.2a2 2 0 0 0 2-2V15\" stroke=\"#f0f0e8\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          16,\n        ),\n        play: svg(\n          24,\n          `<path d=\"M7.6 4.6 19 12 7.6 19.4V4.6Z\" stroke=\"#f0f0e8\" stroke-width=\"1.8\" stroke-linejoin=\"round\"/>`,\n          16,\n        ),\n        retry: svg(\n          24,\n          `<path d=\"M20 12a8 8 0 1 1-3.2-6.4\" stroke=\"#f0f0e8\" stroke-width=\"1.8\" stroke-linecap=\"round\"/><path d=\"M20.4 4v5h-5\" stroke=\"#f0f0e8\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          16,\n        ),\n        shift: svg(\n          24,\n          `<path d=\"M12 4 4.5 12h4v7h7v-7h4L12 4Z\" stroke=\"#fff\" stroke-width=\"1.7\" stroke-linejoin=\"round\" fill=\"#fff\"/>`,\n          19,\n        ),\n        del: svg(\n          24,\n          `<path d=\"M8.4 5h11a1.6 1.6 0 0 1 1.6 1.6v10.8A1.6 1.6 0 0 1 19.4 19h-11L2.6 12 8.4 5Z\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linejoin=\"round\"/><path d=\"M11.4 9.6l5.2 4.8M16.6 9.6l-5.2 4.8\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linecap=\"round\"/>`,\n          22,\n        ),\n        ret: svg(\n          24,\n          `<path d=\"M20 6v6.4H5.4M9.6 8.4 5 12.8l4.6 4.4\" stroke=\"#fff\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n          21,\n        ),\n        emojiKey: svg(\n          24,\n          `<circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#fff\" stroke-width=\"1.7\"/><circle cx=\"9\" cy=\"10\" r=\"1.2\" fill=\"#fff\"/><circle cx=\"15\" cy=\"10\" r=\"1.2\" fill=\"#fff\"/><path d=\"M8 14.6a5 5 0 0 0 8 0\" stroke=\"#fff\" stroke-width=\"1.7\" stroke-linecap=\"round\"/>`,\n          25,\n        ),\n      };\n\n      /* ============================================================== build */\n      const screen = document.getElementById(\"cle-screen\");\n      const el = (cls, html, tag) => {\n        const n = document.createElement(tag || \"div\");\n        if (cls) n.className = cls;\n        if (html != null) n.innerHTML = html;\n        return n;\n      };\n\n      // --- status bar\n      const sb = el(\"statusbar\");\n      sb.setAttribute(\"data-layout-allow-overlap\", \"true\");\n      sb.innerHTML =\n        `<div class=\"sb-left\"><div class=\"sb-clock\">` +\n        `<span id=\"cle-clock-early\">${CONFIG.status.clock}</span>` +\n        `<span id=\"cle-clock-late\">${CONFIG.status.clockLate}</span></div>${ICO.bell}</div>` +\n        `<div class=\"sb-right\">${ICO.bars}<div class=\"sb-net\">${CONFIG.status.net}</div>` +\n        `<div class=\"sb-batt\">${CONFIG.status.battery}</div><div class=\"sb-batt-cap\"></div></div>`;\n\n      // --- empty state\n      const empty = el(\"empty\");\n      empty.id = \"cle-empty\";\n      const emptyMark = el(\"empty-mark\", burst(35.3, \"#d97757\"));\n      const emptyHead = el(\"empty-head\");\n      const headWords = CONFIG.emptyHeading.split(\" \").map((w, i, arr) => {\n        const s = el(null, w + (i < arr.length - 1 ? \" \" : \"\"), \"span\");\n        s.style.display = \"inline-block\";\n        emptyHead.appendChild(s);\n        return s;\n      });\n      empty.appendChild(emptyMark);\n      empty.appendChild(emptyHead);\n\n      // --- thread\n      const port = el(\"scrollport\");\n      const thread = el(\"thread\");\n      thread.id = \"cle-thread\";\n      thread.setAttribute(\"data-layout-allow-overflow\", \"true\");\n      thread.setAttribute(\"data-layout-allow-overlap\", \"true\");\n      thread.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n\n      const bubble = el(\"bubble\");\n      bubble.id = \"cle-bubble\";\n      bubble.textContent = CONFIG.prompt;\n      thread.appendChild(bubble);\n\n      // tool rows: thinking -> lead sentence -> search -> collapsed \"2 steps\"\n      const toolWrap = el(\"tools\");\n      toolWrap.style.paddingTop = \"0px\";\n      const mkTool = (ico, label) =>\n        el(\n          \"tool-row\",\n          `<div class=\"tool-ico\">${ico}</div><div>${label}</div>` +\n            `<div class=\"chev\">${ICO.chevR}</div>`,\n        );\n      // wrap: the shell animates, the child carries the gap\n      const wrap = (inner, pad) => {\n        const o = el(\"abox\");\n        inner.style.paddingTop = pad + \"px\";\n        o.appendChild(inner);\n        return o;\n      };\n      const rowThink = mkTool(ICO.clock, CONFIG.thinking);\n      const rowSearch = mkTool(ICO.globe, CONFIG.search);\n      const rowCollapsed = mkTool(ICO.clock, CONFIG.collapsed);\n      const boxThink = wrap(rowThink, 28);\n      const boxSearch = wrap(rowSearch, 17);\n      const boxCollapsed = wrap(rowCollapsed, 28);\n\n      const leadPara = el(\"answer abox\");\n      const leadInner = el(\"para\");\n      leadInner.style.paddingTop = \"27.1px\";\n      const leadWords = [];\n      CONFIG.lead.split(\" \").forEach((w, i, arr) => {\n        const s = el(\"w\", w + (i < arr.length - 1 ? \" \" : \"\"), \"span\");\n        leadInner.appendChild(s);\n        leadWords.push(s);\n      });\n      leadPara.appendChild(leadInner);\n      toolWrap.appendChild(boxThink);\n      toolWrap.appendChild(leadPara);\n      toolWrap.appendChild(boxSearch);\n      toolWrap.appendChild(boxCollapsed);\n      thread.appendChild(toolWrap);\n\n      // --- answer blocks\n      const answer = el(\"answer\");\n      const blocks = [];\n      let bulletHost = null;\n      let seen = 0;\n      CONFIG.answer.forEach((b) => {\n        const inner = el(b.t === \"b\" ? \"bul\" : \"para\");\n        const gapTop =\n          seen === 0\n            ? 24\n            : b.t === \"b\"\n              ? blocks.length && blocks[blocks.length - 1].kind === \"b\"\n                ? 12\n                : 17\n              : 17;\n        inner.style.setProperty(\"--gap\", gapTop + \"px\");\n        const node = wrap(inner, gapTop);\n        seen++;\n        const words = [];\n        let bold = false;\n        b.text.split(/(\\s+)/).forEach((tok) => {\n          if (!tok) return;\n          if (/^\\s+$/.test(tok)) {\n            inner.appendChild(document.createTextNode(tok));\n            return;\n          }\n          let word = tok;\n          if (word.startsWith(\"**\")) {\n            bold = true;\n            word = word.slice(2);\n          }\n          let close = false;\n          if (word.includes(\"**\")) {\n            close = true;\n            word = word.replace(\"**\", \"\");\n          }\n          if (word.indexOf(\"{\") === 0) {\n            const chip = el(\"cite w\", word.replace(/[{}]/g, \"\"), \"span\");\n            inner.appendChild(chip);\n            words.push(chip);\n            return;\n          }\n          const s = el(\"w\", word, \"span\");\n          if (bold) s.style.fontWeight = \"700\";\n          s.textContent = word;\n          if (close) bold = false;\n          inner.appendChild(s);\n          words.push(s);\n        });\n        if (b.t === \"b\") {\n          if (!bulletHost) {\n            bulletHost = el(\"bullets\");\n            answer.appendChild(bulletHost);\n          }\n          bulletHost.appendChild(node);\n        } else {\n          bulletHost = null;\n          answer.appendChild(node);\n        }\n        blocks.push({ node: node, inner: inner, words: words, kind: b.t, gapTop: gapTop });\n      });\n      thread.appendChild(answer);\n\n      // --- action row + sources\n      const actions = el(\"actions\");\n      const actionsBox = el(\"abox\");\n      actions.innerHTML =\n        [ICO.copy, ICO.share, ICO.play, ICO.retry]\n          .map((i) => `<div class=\"act-ico\">${i}</div>`)\n          .join(\"\") +\n        `<div class=\"src-stack\">` +\n        CONFIG.sources.dots\n          .map((c) => `<div class=\"src-dot\" style=\"background:${c}\">AI</div>`)\n          .join(\"\") +\n        `</div><div class=\"src-label\">${CONFIG.sources.count} sources</div>`;\n      actionsBox.appendChild(actions);\n      thread.appendChild(actionsBox);\n\n      const disclaim = el(\"disclaim\");\n      const disclaimBox = el(\"abox\");\n      disclaim.innerHTML =\n        `<div class=\"disclaim-mark\">${burst(28, \"#d97757\")}</div>` +\n        `<div class=\"disclaim-text\">${CONFIG.disclaimer[0]}<br />${CONFIG.disclaimer[1]}</div>`;\n      disclaimBox.appendChild(disclaim);\n      thread.appendChild(disclaimBox);\n\n      // --- the in-thread spinner rides at the end of the flow\n      const spinner = el(\"spinner\", burst(26, \"#d97757\"));\n      const spinPad = el(null, null);\n      spinPad.style.paddingTop = \"29px\";\n      spinPad.appendChild(spinner);\n      const spinWrap = el(\"abox\");\n      spinWrap.style.width = \"26px\";\n      spinWrap.appendChild(spinPad);\n      thread.insertBefore(spinWrap, actionsBox);\n      port.appendChild(thread);\n\n      const chevWrap = el(\"chev-wrap\", `<div class=\"chev-btn\">${ICO.arrowDown}</div>`);\n      chevWrap.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      chevWrap.setAttribute(\"data-layout-allow-overlap\", \"true\");\n\n      // --- composer\n      const composer = el(\"composer\");\n      composer.id = \"cle-composer\";\n      composer.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      composer.setAttribute(\"data-layout-allow-overlap\", \"true\");\n      composer.innerHTML =\n        `<div class=\"notice\" id=\"cle-notice\"><div class=\"notice-text\">${CONFIG.notice}</div>` +\n        `<div class=\"notice-x\">${ICO.close}</div></div>` +\n        `<div class=\"comp-text\" id=\"cle-comp-text\"><span class=\"typed\" id=\"cle-typed\"></span></div>` +\n        `<div class=\"comp-ph\" id=\"cle-comp-ph\">${CONFIG.placeholder}</div>` +\n        `<div class=\"comp-ph\" id=\"cle-comp-ph2\">${CONFIG.placeholderReply}</div>` +\n        `<div class=\"comp-ctrls\">` +\n        `<div class=\"plus-btn\">${ICO.plus}</div>` +\n        `<div class=\"model-pill\">${CONFIG.model.name} <em>${CONFIG.model.effort}</em></div>` +\n        `<div class=\"comp-mic\" id=\"cle-comp-mic\">${ICO.mic}</div>` +\n        `<div class=\"voice-btn\" id=\"cle-voice-btn\">${ICO.wave}</div>` +\n        `<div class=\"send-btn\" id=\"cle-send-btn\">${ICO.arrowUp}</div>` +\n        `<div class=\"stop-btn\" id=\"cle-stop-btn\"></div>` +\n        `</div>`;\n\n      const typedEl = composer.querySelector(\"#cle-typed\");\n      const chEls = [];\n      const curEls = [];\n      const mkCursor = () => {\n        const a = el(\"cursor-anchor\", \"<i></i>\", \"span\");\n        typedEl.appendChild(a);\n        curEls.push(a);\n      };\n      mkCursor();\n      CONFIG.prompt.split(\"\").forEach((c) => {\n        const sp = el(\"ch\", c === \" \" ? \"&nbsp;\" : c, \"span\");\n        typedEl.appendChild(sp);\n        chEls.push(sp);\n        mkCursor();\n      });\n\n      // --- keyboard (iOS geometry is identical to the ChatGPT capture)\n      const KB = { w: 33.44, gap: 6.03, inset: 6.67 };\n      const keyboard = el(\"keyboard\");\n      keyboard.id = \"cle-keyboard\";\n      keyboard.setAttribute(\"data-layout-allow-overflow\", \"true\");\n      keyboard.setAttribute(\"data-layout-allow-overlap\", \"true\");\n      const predict = el(\"predict\");\n      const PRED_STAGES = [\"start\", \"end\"];\n      const pdEls = [0, 1, 2].map((col) => {\n        const n = el(\"pd\");\n        const stages = PRED_STAGES.map((k) => {\n          const w = el(\"pdw\", CONFIG.predict[k][col]);\n          n.appendChild(w);\n          return w;\n        });\n        predict.appendChild(n);\n        return { cell: n, stages: stages };\n      });\n      keyboard.appendChild(predict);\n\n      const keyIndex = {};\n      const mkKey = (row, label, x, w, cls) => {\n        const k = el(\"key\" + (cls ? \" \" + cls : \"\"), label);\n        k.style.left = x + \"px\";\n        k.style.width = w + \"px\";\n        row.appendChild(k);\n        if (/^[A-Z]$/.test(label)) keyIndex[label] = k;\n        return k;\n      };\n      [\n        { y: 52, keys: \"QWERTYUIOP\".split(\"\"), x0: KB.inset },\n        { y: 106, keys: \"ASDFGHJKL\".split(\"\"), x0: 26.33 },\n        { y: 160, keys: \"ZXCVBNM\".split(\"\"), x0: 65.67 },\n      ].forEach((rd, ri) => {\n        const row = el(\"krow\");\n        row.style.top = rd.y + \"px\";\n        rd.keys.forEach((k, i) => mkKey(row, k, rd.x0 + i * (KB.w + KB.gap), KB.w));\n        if (ri === 2) {\n          mkKey(row, ICO.shift, KB.inset, 45.33, \"dark\");\n          mkKey(row, ICO.del, 350, 45.67, \"dark\");\n        }\n        keyboard.appendChild(row);\n      });\n      const row4 = el(\"krow\");\n      row4.style.top = \"214px\";\n      mkKey(row4, \"123\", KB.inset, 92.67, \"dark small\");\n      const kSpace = mkKey(row4, \"\", 105.33, 191.33);\n      mkKey(row4, ICO.ret, 302.67, 93, \"dark\");\n      keyboard.appendChild(row4);\n      keyboard.appendChild(el(\"kb-bottom\", `<div>${ICO.emojiKey}</div><div>${ICO.mic}</div>`));\n\n      // --- header + scrims\n      const statusPlate = el(\"status-plate\");\n      statusPlate.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      const hdrScrim = el(\"hdr-scrim\");\n      hdrScrim.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      const compScrim = el(\"comp-scrim\");\n      compScrim.setAttribute(\"data-layout-allow-occlusion\", \"true\");\n      const header = el(\"header\");\n      header.innerHTML =\n        `<div class=\"circle-btn hdr-left\">${ICO.burger}</div>` +\n        `<div class=\"hdr-right\" id=\"cle-hdr-right\">` +\n        `<div class=\"hdr-right-face\" id=\"cle-hdr-ghost\">${ICO.ghost}</div>` +\n        `<div class=\"hdr-right-face\" id=\"cle-hdr-actions\">${ICO.newChat}${ICO.dots}</div></div>`;\n\n      [\n        port,\n        empty,\n        chevWrap,\n        compScrim,\n        composer,\n        keyboard,\n        hdrScrim,\n        statusPlate,\n        header,\n        sb,\n      ].forEach((n) => screen.appendChild(n));\n\n      /* ==================================================================\n         Everything below is measured off the live DOM, so it must run with the\n         real webfont applied. The @font-face files are still loading when this\n         script parses, so a first pass would measure a fallback face and get the\n         line counts wrong (it clipped a 7-line paragraph to 6). Build once\n         synchronously so the timeline exists at parse time, then rebuild once the\n         fonts report ready — deterministic either way, and the renderer only seeks\n         after fonts are loaded.\n         ================================================================== */\n      window.__timelines = window.__timelines || {};\n      const tl = gsap.timeline({ paused: true });\n\n      function build() {\n        tl.clear();\n        // A rebuild starts from whatever the previous pass left behind (heights 0,\n        // words hidden). Restore the natural layout first or the re-measure reads a\n        // collapsed DOM and every height/anchor comes back 0.\n        const allWords = leadWords\n          .concat(headWords)\n          .concat(blocks.reduce((acc, b) => acc.concat(b.words), []));\n        const allBoxes = [\n          boxThink,\n          boxSearch,\n          boxCollapsed,\n          leadPara,\n          spinWrap,\n          actionsBox,\n          disclaimBox,\n        ].concat(blocks.map((b) => b.node));\n        gsap.set(allBoxes, { height: \"auto\", autoAlpha: 1 });\n        gsap.set(allWords, { opacity: 1, autoAlpha: 1, y: 0 });\n        gsap.set([thread, keyboard], { y: 0 });\n        gsap.set(bubble, { autoAlpha: 1, y: 0, scale: 1 });\n        gsap.set(chEls, { opacity: 1 });\n        gsap.set(composer, { height: 172.7, width: 385.7, x: 0, y: 0 });\n        gsap.set([emptyMark, spinner], { autoAlpha: 1, scale: 1, rotation: 0 });\n        gsap.set(document.getElementById(\"cle-notice\"), { autoAlpha: 1 });\n        /* ============================================================ measure\n           Everything is read here, in the natural layout, BEFORE any initial state\n           collapses it. Reading these during timeline construction would report the\n           collapsed geometry and every scroll target would resolve to 0.          */\n        const LH = 27.3;\n        const lineGroups = (words, host, gapTop) => {\n          const pad = gapTop || 0;\n          const tops = words.map((w) => w.offsetTop);\n          const uniq = [];\n          tops.forEach((t) => {\n            if (!uniq.length || t - uniq[uniq.length - 1] > 6) uniq.push(t);\n          });\n          const lineOf = tops.map((t) => {\n            let li = 0;\n            uniq.forEach((u, i) => {\n              if (Math.abs(t - u) <= 6) li = i;\n            });\n            return li;\n          });\n          const full = host.offsetHeight;\n          return {\n            lineOf: lineOf,\n            // the last step lands on the element's natural height, so the end state\n            // matches the layout the anchors were measured in exactly\n            heights: uniq.map((u, i) =>\n              i === uniq.length - 1 ? full : Math.min(full, pad + (i + 1) * LH + 2),\n            ),\n            full: full,\n          };\n        };\n        const leadMeta = lineGroups(leadWords, leadPara, 27.1);\n        blocks.forEach((b) => (b.meta = lineGroups(b.words, b.node, b.gapTop)));\n\n        const bubbleTop = bubble.offsetTop;\n        const rowThinkH = boxThink.offsetHeight;\n        const rowSearchH = boxSearch.offsetHeight;\n        const rowCollapsedH = boxCollapsed.offsetHeight;\n        const actionsH = actionsBox.offsetHeight;\n        const disclaimH = disclaimBox.offsetHeight;\n        const spinH = spinWrap.offsetHeight;\n        // Anchors are read in the SAME layout state their tween will play in. Correcting\n        // a natural-layout measurement by arithmetic is guesswork — it was 71pt out.\n        const ANCHOR = 720;\n        const ANCHOR_END = 715; // IMG_0944: the disclaimer's last line rests here\n        const anchorOf = (node, anchor) =>\n          Math.min(0, (anchor || ANCHOR) - (node.offsetTop + node.offsetHeight));\n        const anchorLead = anchorOf(leadPara);\n        const anchorTools = anchorOf(toolWrap);\n\n        // state B — tool rows collapsed into \"2 steps\", spinner still riding the tail\n        gsap.set([boxThink, boxSearch, leadPara], { height: 0 });\n        blocks.forEach((b) => {\n          b.anchor = anchorOf(b.node);\n          // one target per line: the stream must never write below the fold\n          b.lineAnchor = b.meta.heights.map((h) => Math.min(0, ANCHOR - (b.node.offsetTop + h)));\n        });\n        // state C — spinner gone, footer revealed\n        gsap.set(spinWrap, { height: 0 });\n        const anchorEnd = anchorOf(disclaimBox, ANCHOR_END);\n        gsap.set([boxThink, boxSearch, leadPara, spinWrap], { height: \"auto\" });\n\n        /* ====================================================== initial state */\n        gsap.set(thread, { y: 0 });\n        gsap.set(bubble, { autoAlpha: 0 });\n        gsap.set([boxThink, boxSearch, boxCollapsed], { height: 0, autoAlpha: 0 });\n        gsap.set(leadPara, { height: 0 });\n        gsap.set(leadWords, { opacity: 0 });\n        blocks.forEach((b) => {\n          gsap.set(b.node, { height: 0 });\n          gsap.set(b.words, { opacity: 0 });\n        });\n        gsap.set([actionsBox, disclaimBox], { height: 0, autoAlpha: 0 });\n        gsap.set(spinWrap, { autoAlpha: 0, scale: 0.6, height: spinH, transformOrigin: \"50% 50%\" });\n        gsap.set(chevWrap.firstChild, { autoAlpha: 0, y: 10 });\n        gsap.set(chEls, { opacity: 0 });\n        gsap.set(curEls, { autoAlpha: 0 });\n        gsap.set(document.getElementById(\"cle-comp-ph\"), { autoAlpha: 1 });\n        gsap.set(document.getElementById(\"cle-comp-ph2\"), { autoAlpha: 0 });\n        gsap.set(document.getElementById(\"cle-send-btn\"), { autoAlpha: 0, scale: 0.6 });\n        gsap.set(document.getElementById(\"cle-stop-btn\"), { autoAlpha: 0, scale: 0.6 });\n        gsap.set(document.getElementById(\"cle-hdr-actions\"), { autoAlpha: 0 });\n        gsap.set(document.getElementById(\"cle-hdr-right\"), { width: 44 });\n        gsap.set(emptyMark, { autoAlpha: 0, scale: 0.72, transformOrigin: \"50% 50%\" });\n        gsap.set(headWords, { autoAlpha: 0, y: 12 });\n        gsap.set(keyboard, { y: 0 });\n        gsap.set(composer, { width: 385.7, x: 0, y: -309, height: 172.7 });\n        pdEls.forEach((pd) => {\n          gsap.set(pd.stages[0], { autoAlpha: 1 });\n          gsap.set(pd.stages[1], { autoAlpha: 0 });\n        });\n        gsap.set(document.getElementById(\"cle-clock-late\"), { autoAlpha: 0 });\n\n        /* ============================================================ timeline */\n\n        /* ---- 1. empty state arrives */\n        tl.to(emptyMark, { autoAlpha: 1, scale: 1, duration: 0.5, ease: \"power3.out\" }, T.emptyIn);\n        headWords.forEach((w, i) => {\n          tl.to(\n            w,\n            { autoAlpha: 1, y: 0, duration: 0.42, ease: \"power3.out\" },\n            T.emptyIn + 0.12 + i * 0.055,\n          );\n        });\n\n        /* ---- 2. typing */\n        const t0 = T.typeStart;\n        const chars = CONFIG.prompt.split(\"\");\n        const charT = [];\n        let t = t0;\n        chars.forEach((c) => {\n          charT.push(t);\n          t += c === \" \" ? T.charBase + T.spaceHold : T.charBase;\n        });\n        const typeEnd = t;\n\n        tl.to(document.getElementById(\"cle-comp-ph\"), { autoAlpha: 0, duration: 0.12 }, t0 - 0.02);\n        tl.to(curEls[0], { autoAlpha: 1, duration: 0.01 }, t0 - 0.02);\n        tl.to(\n          document.getElementById(\"cle-voice-btn\"),\n          { autoAlpha: 0, scale: 0.6, duration: 0.14 },\n          t0,\n        );\n        tl.to(\n          document.getElementById(\"cle-send-btn\"),\n          { autoAlpha: 1, scale: 1, duration: 0.24, ease: \"back.out(1.6)\" },\n          t0 + 0.04,\n        );\n\n        chars.forEach((c, i) => {\n          tl.to(chEls[i], { opacity: 1, duration: 0.01 }, charT[i]);\n          tl.to(curEls[i], { autoAlpha: 0, duration: 0.01 }, charT[i]);\n          tl.to(curEls[i + 1], { autoAlpha: 1, duration: 0.01 }, charT[i]);\n          const k = keyIndex[c.toUpperCase()];\n          const target = c === \" \" ? kSpace : k;\n          if (target) {\n            tl.to(target, { backgroundColor: \"#5f5f5f\", duration: 0.04 }, charT[i] - 0.03);\n            tl.to(target, { backgroundColor: \"#404040\", duration: 0.09 }, charT[i] + 0.02);\n          }\n        });\n\n        const lastCur = curEls[curEls.length - 1];\n        const blinkFrom = t0 + 0.1;\n        const blinks = Math.floor((typeEnd + T.sendPad - blinkFrom) / 1.06);\n        for (let i = 0; i < blinks; i++) {\n          const off = blinkFrom + i * 1.06 + 0.53;\n          const on = blinkFrom + i * 1.06 + 1.06;\n          if (off > typeEnd) tl.to(lastCur, { autoAlpha: 0, duration: 0.02 }, off);\n          if (on > typeEnd) tl.to(lastCur, { autoAlpha: 1, duration: 0.02 }, on);\n        }\n        const swapPredict = (at) => {\n          pdEls.forEach((pd) => {\n            tl.to(pd.stages[0], { autoAlpha: 0, duration: 0.06 }, at);\n            tl.to(pd.stages[1], { autoAlpha: 1, duration: 0.08 }, at + 0.06);\n          });\n        };\n        swapPredict(charT[CONFIG.prompt.indexOf(\" ai \") + 1]);\n\n        /* ---- 3. send */\n        const tSend = typeEnd + T.sendPad;\n        const sendBtn = document.getElementById(\"cle-send-btn\");\n        tl.to(sendBtn, { scale: 0.86, duration: 0.06, ease: \"power2.out\" }, tSend);\n        tl.to(sendBtn, { scale: 1, duration: 0.18, ease: \"power2.out\" }, tSend + 0.06);\n\n        const tGo = tSend + T.sendReact;\n        tl.to(chEls, { opacity: 0, duration: 0.01 }, tGo);\n        tl.to(curEls, { autoAlpha: 0, duration: 0.01 }, tGo);\n        tl.to(keyboard, { y: 340, duration: 0.3, ease: \"power2.out\" }, tGo);\n        tl.to(document.getElementById(\"cle-comp-mic\"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.1);\n        // card narrows and re-centres as it docks\n        tl.to(composer, { width: 369.7, x: 8, duration: 0.3, ease: \"power2.out\" }, tGo);\n        tl.to(composer, { y: 0, duration: 0.3, ease: \"power2.out\" }, tGo);\n        tl.to(document.getElementById(\"cle-comp-ph2\"), { autoAlpha: 1, duration: 0.2 }, tGo + 0.14);\n        tl.to(sendBtn, { autoAlpha: 0, duration: 0.12 }, tGo + 0.24);\n        tl.to(\n          document.getElementById(\"cle-stop-btn\"),\n          { autoAlpha: 1, scale: 1, duration: 0.2, ease: \"power2.out\" },\n          tGo + 0.3,\n        );\n        // the empty state leaves as the bubble arrives — one cause, two reactions\n        tl.to(emptyMark, { autoAlpha: 0, scale: 0.8, duration: 0.22, ease: \"power2.in\" }, tGo);\n        headWords.forEach((w, i) => {\n          tl.to(w, { autoAlpha: 0, y: -10, duration: 0.2, ease: \"power2.in\" }, tGo + i * 0.02);\n        });\n        // header: incognito circle widens into the actions pill\n        tl.to(\n          document.getElementById(\"cle-hdr-ghost\"),\n          { autoAlpha: 0, duration: 0.12 },\n          tGo + 0.02,\n        );\n        tl.to(\n          document.getElementById(\"cle-hdr-right\"),\n          { width: 100, duration: 0.26, ease: \"power2.out\" },\n          tGo + 0.06,\n        );\n        tl.to(\n          document.getElementById(\"cle-hdr-actions\"),\n          { autoAlpha: 1, duration: 0.18 },\n          tGo + 0.16,\n        );\n\n        const dyBubble = 874 - 343 - 40 - 34 - bubbleTop; // composer text row -> slot\n        tl.fromTo(\n          bubble,\n          { autoAlpha: 0, y: dyBubble, scale: 0.94, transformOrigin: \"100% 50%\" },\n          { autoAlpha: 1, y: 0, scale: 1, duration: 0.34, ease: \"power3.out\" },\n          tGo + 0.02,\n        );\n\n        /* ---- 4. the spinner: Claude's own working indicator, not idle wobble */\n        let tw = tGo + 0.34 + T.spinLead;\n        tl.to(spinWrap, { autoAlpha: 1, scale: 1, duration: 0.26, ease: \"power3.out\" }, tw);\n        const spinTurns = 30;\n        for (let i = 0; i < spinTurns; i++) {\n          tl.to(\n            spinner,\n            { rotation: (i + 1) * 15, duration: 0.5, ease: \"power1.inOut\" },\n            tw + i * 0.5,\n          );\n          tl.to(\n            spinner,\n            { scale: i % 2 ? 1 : 0.78, duration: 0.5, ease: \"sine.inOut\" },\n            tw + i * 0.5,\n          );\n        }\n\n        const scrollTo = (target, at, dur) =>\n          tl.to(thread, { y: target, duration: dur || 0.55, ease: \"power2.out\" }, at);\n\n        /* ---- 5. tool rows, then the lead sentence, then the search */\n        tw += 0.5;\n        tl.to(\n          boxThink,\n          { height: rowThinkH, autoAlpha: 1, duration: 0.26, ease: \"power2.out\" },\n          tw,\n        );\n        tw += T.toolStep;\n\n        let lastLine = -1;\n        leadWords.forEach((w, wi) => {\n          const li = leadMeta.lineOf[wi];\n          if (li !== lastLine) {\n            tl.to(\n              leadPara,\n              { height: leadMeta.heights[li], duration: 0.16, ease: \"power2.out\" },\n              tw,\n            );\n            lastLine = li;\n          }\n          tl.to(w, { opacity: 1, duration: 0.09 }, tw);\n          tw += T.wordStep * 2.2;\n        });\n        scrollTo(anchorLead, tw - 0.3, 0.6);\n\n        tw += 0.3;\n        tl.to(\n          boxSearch,\n          { height: rowSearchH, autoAlpha: 1, duration: 0.26, ease: \"power2.out\" },\n          tw,\n        );\n        scrollTo(anchorTools, tw, 0.6);\n\n        /* ---- 6. the two tool rows collapse into \"2 steps\" */\n        tw += 0.85;\n        tl.to([boxThink, boxSearch, leadPara], { autoAlpha: 0, duration: 0.16 }, tw);\n        tl.to(\n          [boxThink, boxSearch, leadPara],\n          { height: 0, duration: 0.3, ease: \"power2.inOut\" },\n          tw + 0.06,\n        );\n        tl.to(\n          boxCollapsed,\n          { height: rowCollapsedH, autoAlpha: 1, duration: 0.26, ease: \"power2.out\" },\n          tw + 0.18,\n        );\n        scrollTo(0, tw + 0.06, 0.5);\n\n        /* ---- 7. the usage notice is dismissed, the card shrinks, the answer streams */\n        tw += T.collapseAt;\n        tl.to(document.getElementById(\"cle-notice\"), { autoAlpha: 0, duration: 0.16 }, tw);\n        tl.to(composer, { height: 97.7, duration: 0.32, ease: \"power2.inOut\" }, tw + 0.04);\n        tw += 0.45;\n        blocks.forEach((b, bi) => {\n          let ll = -1;\n          b.words.forEach((w, wi) => {\n            const li = b.meta.lineOf[wi];\n            if (li !== ll) {\n              tl.to(b.node, { height: b.meta.heights[li], duration: 0.16, ease: \"power2.out\" }, tw);\n              scrollTo(b.lineAnchor[li], tw, 0.5);\n              ll = li;\n            }\n            tl.to(w, { opacity: 1, duration: 0.08 }, tw);\n            tw += T.wordStep;\n          });\n          if (bi < blocks.length - 1) tw += T.paraGap;\n        });\n\n        /* ---- 8. the answer lands: controls revert, footer arrives */\n        tw += T.tailStep;\n        tl.to(document.getElementById(\"cle-stop-btn\"), { autoAlpha: 0, duration: 0.14 }, tw);\n        tl.to(document.getElementById(\"cle-comp-mic\"), { autoAlpha: 1, duration: 0.18 }, tw + 0.04);\n        tl.to(\n          document.getElementById(\"cle-voice-btn\"),\n          { autoAlpha: 1, scale: 1, duration: 0.22, ease: \"power2.out\" },\n          tw + 0.06,\n        );\n        tl.to(spinWrap, { autoAlpha: 0, scale: 0.7, duration: 0.2, ease: \"power2.in\" }, tw);\n        tl.to(spinWrap, { height: 0, duration: 0.24, ease: \"power2.inOut\" }, tw + 0.1);\n        tl.to(\n          actionsBox,\n          { height: actionsH, autoAlpha: 1, duration: 0.3, ease: \"power2.out\" },\n          tw + 0.22,\n        );\n        tl.to(\n          disclaimBox,\n          { height: disclaimH, autoAlpha: 1, duration: 0.3, ease: \"power2.out\" },\n          tw + 0.46,\n        );\n        scrollTo(anchorEnd, tw + 0.3, 0.8);\n        tl.to(\n          chevWrap.firstChild,\n          { autoAlpha: 1, y: 0, duration: 0.3, ease: \"back.out(1.5)\" },\n          tw + 0.7,\n        );\n        // the minute rolls over between the source frames — keep that\n        tl.to(document.getElementById(\"cle-clock-early\"), { autoAlpha: 0, duration: 0.01 }, 8.4);\n        tl.to(document.getElementById(\"cle-clock-late\"), { autoAlpha: 1, duration: 0.01 }, 8.4);\n      }\n\n      build();\n      if (document.fonts && document.fonts.status !== \"loaded\") {\n        document.fonts.ready.then(build);\n      }\n\n      window.__timelines[\"claude-exchange\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-400-normal.woff2 b/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-400-normal.woff2
new file mode 100644
index 000000000..f15b025d6
Binary files /dev/null and b/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-400-normal.woff2 differ
diff --git a/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-500-normal.woff2 b/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-500-normal.woff2
new file mode 100644
index 000000000..54f0a595d
Binary files /dev/null and b/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-500-normal.woff2 differ
diff --git a/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-600-normal.woff2 b/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-600-normal.woff2
new file mode 100644
index 000000000..d1897949f
Binary files /dev/null and b/docs/public/catalog/items/chatgpt-exchange/assets/fonts/inter-latin-600-normal.woff2 differ
diff --git a/docs/public/catalog/items/claude-exchange/assets/fonts/eb-garamond-latin-400-normal.woff2 b/docs/public/catalog/items/claude-exchange/assets/fonts/eb-garamond-latin-400-normal.woff2
new file mode 100644
index 000000000..ffed311d3
Binary files /dev/null and b/docs/public/catalog/items/claude-exchange/assets/fonts/eb-garamond-latin-400-normal.woff2 differ
diff --git a/docs/public/catalog/items/claude-exchange/assets/fonts/eb-garamond-latin-700-normal.woff2 b/docs/public/catalog/items/claude-exchange/assets/fonts/eb-garamond-latin-700-normal.woff2
new file mode 100644
index 000000000..85d520902
Binary files /dev/null and b/docs/public/catalog/items/claude-exchange/assets/fonts/eb-garamond-latin-700-normal.woff2 differ
diff --git a/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-400-normal.woff2 b/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-400-normal.woff2
new file mode 100644
index 000000000..f15b025d6
Binary files /dev/null and b/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-400-normal.woff2 differ
diff --git a/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-500-normal.woff2 b/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-500-normal.woff2
new file mode 100644
index 000000000..54f0a595d
Binary files /dev/null and b/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-500-normal.woff2 differ
diff --git a/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-600-normal.woff2 b/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-600-normal.woff2
new file mode 100644
index 000000000..d1897949f
Binary files /dev/null and b/docs/public/catalog/items/claude-exchange/assets/fonts/inter-latin-600-normal.woff2 differ
diff --git a/registry/blocks/chatgpt-exchange/assets/fonts/inter-LICENSE.txt b/registry/blocks/chatgpt-exchange/assets/fonts/inter-LICENSE.txt
new file mode 100644
index 000000000..40589daa9
--- /dev/null
+++ b/registry/blocks/chatgpt-exchange/assets/fonts/inter-LICENSE.txt
@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-400-normal.woff2 b/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-400-normal.woff2
new file mode 100644
index 000000000..f15b025d6
Binary files /dev/null and b/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-400-normal.woff2 differ
diff --git a/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-500-normal.woff2 b/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-500-normal.woff2
new file mode 100644
index 000000000..54f0a595d
Binary files /dev/null and b/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-500-normal.woff2 differ
diff --git a/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-600-normal.woff2 b/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-600-normal.woff2
new file mode 100644
index 000000000..d1897949f
Binary files /dev/null and b/registry/blocks/chatgpt-exchange/assets/fonts/inter-latin-600-normal.woff2 differ
diff --git a/registry/blocks/chatgpt-exchange/chatgpt-exchange.html b/registry/blocks/chatgpt-exchange/chatgpt-exchange.html
new file mode 100644
index 000000000..9282dc90f
--- /dev/null
+++ b/registry/blocks/chatgpt-exchange/chatgpt-exchange.html
@@ -0,0 +1,1327 @@
+<!doctype html>
+<html lang="en" data-resolution="portrait">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1080, height=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* The real app sets OpenAI Sans, which is not licensed here. Inter is the
+         redistributable OFL stand-in, embedded under a neutral family name so the
+         composition remains self-contained and deterministic. */
+      @font-face {
+        font-family: "ChatUI";
+        font-weight: 400;
+        font-style: normal;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ChatUI";
+        font-weight: 500;
+        font-style: normal;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ChatUI";
+        font-weight: 600;
+        font-style: normal;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "Apple Color Emoji";
+        src: local("Apple Color Emoji");
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1080px;
+        height: 1920px;
+        overflow: hidden;
+        background: #000;
+      }
+      body,
+      #cge-root {
+        font-family: "ChatUI", sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      /* ---------------------------------------------------------------- tokens
+         Geometry is authored in POINTS (1pt = 1px inside .screen) exactly as
+         measured off the source screenshots, then scaled to the 1080x1920 frame.
+         The layout is measured from the source UI at 402 × 874 points.       */
+      :root {
+        --scale: 2.1968; /* 1920 / 874 */
+        --ink: #fcfcfc;
+        --dim: #a8a8ac;
+        --placeholder: #9a9a9e;
+        --bubble: #212121;
+        --kb-bg: #141414;
+        --key: #3c3c3c;
+        --key-hit: #5f5f5f;
+        --seg-track: #181818;
+        --seg-active: #3a3a3a;
+        --blue: #48aaff;
+        --rule-head: #202020;
+        --rule-row: #131313;
+        --chip-bg: #0b0b0c;
+        --chip-line: #2b2b2d;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        background: #000;
+      }
+
+      .screen {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 402px;
+        height: 874px;
+        margin-left: -201px;
+        background: #000;
+        overflow: hidden;
+        transform-origin: top center;
+        transform: scale(var(--scale));
+      }
+
+      /* ----------------------------------------------------------- status bar */
+      .statusbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 65px;
+        display: flex;
+        align-items: center;
+        z-index: 40;
+        padding: 0 34px 0 16px;
+        color: #fff;
+      }
+      .sb-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: 31.7px;
+      }
+      .sb-clock {
+        font-size: 17.2px;
+        font-weight: 600;
+        letter-spacing: 1.3px;
+      }
+      .sb-clock-box {
+        position: relative;
+        width: 38px;
+        height: 22px;
+      }
+      .sb-clock-box span {
+        position: absolute;
+        left: 0;
+        top: 0;
+        white-space: nowrap;
+      }
+      .sb-right {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        margin-left: auto;
+      }
+      .sb-net {
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: -0.2px;
+      }
+      .sb-batt {
+        width: 30px;
+        height: 15px;
+        border-radius: 4.5px;
+        background: #fff;
+        color: #000;
+        font-size: 11px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        letter-spacing: -0.2px;
+        position: relative;
+      }
+      .sb-batt span {
+        position: absolute;
+      }
+      .sb-batt-cap {
+        width: 2px;
+        height: 6px;
+        background: rgba(255, 255, 255, 0.45);
+        border-radius: 0 2px 2px 0;
+        margin-left: -4px;
+      }
+
+      /* --------------------------------------------------------------- header */
+      .header {
+        position: absolute;
+        top: 62px;
+        left: 0;
+        right: 0;
+        height: 44px;
+        z-index: 40;
+      }
+      .status-plate {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 54.7px;
+        z-index: 34;
+        background: #000;
+      }
+      .hdr-scrim {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 118px;
+        z-index: 30;
+        background: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+      }
+      .circle-btn {
+        position: absolute;
+        top: 0;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: #1c1c1e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .hdr-left {
+        left: 16px;
+      }
+      .hdr-right {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: #1c1c1e;
+        overflow: hidden;
+      }
+      .hdr-right-face {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 18px;
+      }
+      .seg {
+        position: absolute;
+        top: -1.7px;
+        left: 121.7px;
+        width: 158px;
+        height: 48px;
+        border-radius: 24px;
+        background: var(--seg-track);
+        display: flex;
+        align-items: center;
+        padding: 4px;
+      }
+      .seg-item {
+        flex: 1;
+        height: 40px;
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        font-weight: 500;
+        color: #fff;
+      }
+      .seg-item.on {
+        background: var(--seg-active);
+      }
+
+      /* --------------------------------------------------------------- thread */
+      .scrollport {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        z-index: 10;
+      }
+      .thread {
+        position: relative;
+        padding: 128px 16px 190px;
+      }
+
+      .bubble {
+        position: relative;
+        margin-left: auto;
+        width: 245.7px;
+        background: var(--bubble);
+        border-radius: 24px;
+        padding: 10px 16px;
+        color: var(--ink);
+        font-size: 16px;
+        line-height: 25.667px;
+      }
+      .answer {
+        margin-top: 36px;
+        width: 360px;
+        color: var(--ink);
+        font-size: 16px;
+        line-height: 25.667px;
+      }
+      .para {
+        overflow: hidden;
+      }
+      .para + .para {
+        margin-top: 24px;
+      }
+      .w {
+        opacity: 1;
+      }
+
+      /* ---------------------------------------------------------------- table */
+      .tbl {
+        margin: 19px 0 0 -5.7px;
+        width: 480px;
+        overflow: hidden;
+      }
+      .tr {
+        display: flex;
+        overflow: hidden;
+      }
+      .td {
+        padding: 8px 12px 8px 0;
+        font-size: 14.5px;
+        line-height: 23px;
+        color: var(--ink);
+      }
+      .c1 {
+        width: 168px;
+      }
+      .c2 {
+        width: 120px;
+        font-weight: 600;
+      }
+      .c3 {
+        width: 173px;
+      }
+      .th {
+        font-size: 14.5px;
+        line-height: 23px;
+        font-weight: 600;
+        padding-bottom: 6px;
+      }
+      .rule-head {
+        height: 2px;
+        background: var(--rule-head);
+      }
+      .rule-row {
+        height: 2px;
+        background: var(--rule-row);
+      }
+      .use {
+        display: flex;
+        gap: 8px;
+        align-items: baseline;
+      }
+      .emo {
+        font-family: "Apple Color Emoji";
+        font-size: 14px;
+      }
+      .chip {
+        display: flex;
+        width: fit-content;
+        align-items: center;
+        gap: 6px;
+        height: 24px;
+        margin-top: 6px;
+        padding: 0 8px;
+        border-radius: 12px;
+        background: var(--chip-bg);
+        border: 1px solid var(--chip-line);
+        font-size: 10px;
+        color: #b9b9bd;
+        white-space: nowrap;
+      }
+      .chip-dot {
+        width: 12.5px;
+        height: 12.5px;
+        border-radius: 6.25px;
+        background: #2e2e30;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 6px;
+        font-weight: 700;
+        color: #d8d8da;
+      }
+
+      /* ---------------------------------------------------------- scroll chrome */
+      .scrollbar {
+        position: absolute;
+        right: 3.3px;
+        top: 145px;
+        width: 2.7px;
+        border-radius: 1.4px;
+        background: rgba(235, 235, 245, 0.32);
+        z-index: 20;
+      }
+      .chev-wrap {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 738.7px;
+        z-index: 25;
+        display: flex;
+        justify-content: center;
+      }
+      .chev {
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
+        background: #1c1c1e;
+        border: 1px solid #2c2c2e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* ------------------------------------------------------------ suggestions */
+      .suggests {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 407.7px;
+        z-index: 15;
+      }
+      .sug {
+        height: 47px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding-left: 27.7px;
+        color: var(--ink);
+        font-size: 16px;
+      }
+      .sug-ico {
+        width: 15.7px;
+        height: 15.7px;
+        display: flex;
+        align-items: center;
+      }
+
+      /* -------------------------------------------------------------- composer */
+      .comp-scrim {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 120px;
+        z-index: 18;
+        background: linear-gradient(to top, #000 12%, rgba(0, 0, 0, 0) 100%);
+      }
+      .composer {
+        position: absolute;
+        left: 12px;
+        bottom: 38.3px;
+        width: 378px;
+        height: 48px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.055);
+        backdrop-filter: blur(22px);
+        -webkit-backdrop-filter: blur(22px);
+        z-index: 20;
+        overflow: hidden;
+      }
+      .comp-text {
+        position: absolute;
+        top: 0;
+        left: 16px;
+        right: 16px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        color: var(--ink);
+        font-size: 16px;
+        line-height: 22px;
+        white-space: pre;
+      }
+      .comp-ph {
+        position: absolute;
+        top: 0;
+        left: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        color: var(--placeholder);
+        font-size: 16px;
+      }
+      .typed {
+        white-space: pre;
+      }
+      .typed .ch {
+        opacity: 0;
+      }
+      .cursor-anchor {
+        position: relative;
+        display: inline-block;
+        width: 0;
+        height: 22px;
+        vertical-align: -4px;
+      }
+      .cursor-anchor i {
+        position: absolute;
+        left: 1px;
+        top: 0;
+        width: 2px;
+        height: 22px;
+        background: var(--blue);
+      }
+      .comp-ctrls {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 48px;
+      }
+      .comp-ctrls > * {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #cge-comp-plus {
+        left: 15px;
+      }
+      .comp-mic {
+        right: 60px;
+      }
+      .blue-btn {
+        right: 8px;
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        background: var(--blue);
+      }
+      .blue-face {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* -------------------------------------------------------------- keyboard */
+      .keyboard {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 539px;
+        height: 335px;
+        background: var(--kb-bg);
+        z-index: 22;
+      }
+      .predict {
+        position: relative;
+        height: 52px;
+        display: flex;
+        align-items: center;
+      }
+      .pd {
+        flex: 1;
+        position: relative;
+        align-self: stretch;
+        font-size: 17px;
+        color: #e8e8ea;
+        border-right: 1px solid rgba(235, 235, 245, 0.16);
+      }
+      .pdw {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .pd:last-child {
+        border-right: none;
+      }
+      .krow {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 43px;
+      }
+      .key {
+        position: absolute;
+        top: 0;
+        height: 43px;
+        border-radius: 5px;
+        background: var(--key);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 22.2px;
+        font-weight: 400;
+      }
+      .key.dark {
+        background: #2b2b2d;
+      }
+      .key.small {
+        font-size: 16px;
+        font-weight: 400;
+      }
+      .kb-bottom {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 279.7px;
+        height: 55px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 29px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-hf-id="hf-ahdx"
+      id="cge-root"
+      data-composition-id="chatgpt-exchange"
+      data-fps="60"
+      data-start="0"
+      data-duration="14.9"
+      data-width="1080"
+      data-height="1920"
+    >
+      <div data-hf-id="hf-tan6" class="stage">
+        <div
+          data-hf-id="hf-szt4"
+          id="cge-scene"
+          class="clip"
+          data-start="0"
+          data-duration="14.9"
+          data-track-index="1"
+        >
+          <div data-hf-id="hf-ylue" class="screen" id="cge-screen"></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ==================================================================
+         TEMPLATE CONFIG — edit only this block to re-skin the exchange.
+         ================================================================== */
+      const CONFIG = {
+        status: { clock: "1:29", clockLate: "1:30", net: "5G+", battery: 89, batteryLate: 88 },
+        prompt: "Hey what's the best tool for ai avatars",
+        suggestions: [
+          { icon: "slack", label: "Summarize my to-dos" },
+          { icon: "gmail", label: "Draft follow-up emails" },
+          { icon: "cal", label: "Prep me for upcoming meetings" },
+        ],
+        predict: {
+          start: ["I", "The", "I'm"],
+          mid: ["ai", "AI", "a"],
+          end: ['"avatars"', "avatar sick", "avatar stressed"],
+        },
+        paragraphs: [
+          "It really depends on what you're trying to do, because “AI avatars” has split into a few different categories.",
+          "For **most creators and marketers**, here's how I'd rank them today:",
+        ],
+        table: {
+          head: ["Use case", "Best tool", "Why"],
+          rows: [
+            {
+              emoji: "🥇",
+              use: "Overall realism",
+              tool: "HeyGen",
+              why: "Most natural facial expressions, lip sync, gestures, voice cloning and localization. Benchmark for talking head videos.",
+              chip: "Official A.I Ranking",
+            },
+            {
+              emoji: "🏢",
+              use: "Enterprise/training",
+              tool: "Synthesia",
+              why: "Better collaboration, SCORM, compliance, team workflows; less creator-focused.",
+              chip: "Official A.I Ranking",
+            },
+            {
+              emoji: "📱",
+              use: "Mobile UGC",
+              tool: "Captions",
+              why: "Extremely fast mobile workflow and social editing. Great for Reels creators.",
+              chip: "Creator Stack",
+            },
+            {
+              emoji: "💬",
+              use: "Real-time conversations",
+              tool: "Tavus",
+              why: "Interactive avatars that can hold live conversations.",
+              chip: "Creator Stack",
+            },
+          ],
+        },
+      };
+
+      /* Beat clock (seconds). Every tween hangs off these. */
+      const T = {
+        suggestsIn: 0.0,
+        typeStart: 0.86,
+        charBase: 0.05,
+        spaceHold: 0.11,
+        sendPad: 0.3, // stillness-before-climax between last keystroke and the tap
+        sendReact: 0.03,
+        streamLead: 0.6, // model "thinking" comma
+        wordStep: 0.15,
+        tableLead: 0.2,
+        rowStep: 0.7,
+        readbackDur: 1.1,
+        tailHold: 0.7,
+      };
+
+      /* =========================================================== icon set */
+      const svg = (b, d, w) =>
+        `<svg viewBox="0 0 ${b} ${b}" width="${w || b}" height="${w || b}" fill="none">${d}</svg>`;
+      const ICO = {
+        bell: svg(
+          20,
+          `<path d="M4.2 15h11.6M10 3.2a4.3 4.3 0 0 1 4.3 4.3c0 3.4 1 5 1.5 5.6H4.2C4.7 12.5 5.7 10.9 5.7 7.5A4.3 4.3 0 0 1 10 3.2Z" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.3 16.6a1.9 1.9 0 0 0 3.4 0" stroke="#fff" stroke-width="1.5"/><path d="M3 17L17 3" stroke="#fff" stroke-width="1.6"/>`,
+          18,
+        ),
+        bars: svg(
+          20,
+          `<rect x="1" y="12.5" width="3" height="4.5" rx="1" fill="#fff"/><rect x="6" y="9.5" width="3" height="7.5" rx="1" fill="#fff"/><rect x="11" y="6.5" width="3" height="10.5" rx="1" fill="#fff"/><rect x="16" y="3.5" width="3" height="13.5" rx="1" fill="rgba(255,255,255,.32)"/>`,
+          19,
+        ),
+        burger: svg(
+          24,
+          `<path d="M5 9.5h14M5 15h9" stroke="#fff" stroke-width="2.1" stroke-linecap="round"/>`,
+          24,
+        ),
+        voiceCircle: svg(
+          24,
+          `<path d="M15.4 3.9a8.6 8.6 0 1 1-9.1 14.6" stroke="#fff" stroke-width="1.9" stroke-linecap="round"/><path d="M6.3 18.5 4 21.2l3.4.5" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.6 8.4a4.1 4.1 0 1 0-3.3 6.9" stroke="#fff" stroke-width="1.9" stroke-linecap="round"/>`,
+          23,
+        ),
+        compose: svg(
+          24,
+          `<path d="M4.5 15.5 15.2 4.8a2 2 0 0 1 2.9 2.9L7.4 18.4l-4 1 1-3.9Z" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/>`,
+          21,
+        ),
+        dots: svg(
+          24,
+          `<circle cx="5" cy="12" r="1.9" fill="#fff"/><circle cx="12" cy="12" r="1.9" fill="#fff"/><circle cx="19" cy="12" r="1.9" fill="#fff"/>`,
+          21,
+        ),
+        plus: svg(
+          24,
+          `<path d="M12 4.5v15M4.5 12h15" stroke="#fff" stroke-width="2.1" stroke-linecap="round"/>`,
+          18,
+        ),
+        mic: svg(
+          24,
+          `<rect x="9" y="2.6" width="6" height="11.4" rx="3" stroke="#fff" stroke-width="1.8"/><path d="M5.5 11.4a6.5 6.5 0 0 0 13 0M12 18v3.2" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>`,
+          17,
+        ),
+        wave: svg(
+          24,
+          `<rect x="4" y="9.5" width="2.4" height="5" rx="1.2" fill="#fff"/><rect x="8.6" y="6" width="2.4" height="12" rx="1.2" fill="#fff"/><rect x="13.2" y="8" width="2.4" height="8" rx="1.2" fill="#fff"/><rect x="17.8" y="10.5" width="2.4" height="3" rx="1.2" fill="#fff"/>`,
+          19,
+        ),
+        arrowUp: svg(
+          24,
+          `<path d="M12 19V5.6M5.8 11.8 12 5.4l6.2 6.4" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>`,
+          19,
+        ),
+        stop: svg(24, `<rect x="7" y="7" width="10" height="10" rx="2" fill="#000"/>`, 18),
+        chevDown: svg(
+          24,
+          `<path d="M12 5v13M6.2 12.2 12 18.2l5.8-6" stroke="#fff" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>`,
+          18,
+        ),
+        shift: svg(
+          24,
+          `<path d="M12 4 4.5 12h4v7h7v-7h4L12 4Z" stroke="#fff" stroke-width="1.7" stroke-linejoin="round" fill="#fff"/>`,
+          19,
+        ),
+        del: svg(
+          24,
+          `<path d="M8.4 5h11a1.6 1.6 0 0 1 1.6 1.6v10.8A1.6 1.6 0 0 1 19.4 19h-11L2.6 12 8.4 5Z" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><path d="M11.4 9.6l5.2 4.8M16.6 9.6l-5.2 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>`,
+          22,
+        ),
+        ret: svg(
+          24,
+          `<path d="M20 6v6.4H5.4M9.6 8.4 5 12.8l4.6 4.4" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>`,
+          21,
+        ),
+        emojiKey: svg(
+          24,
+          `<circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="1.7"/><circle cx="9" cy="10" r="1.2" fill="#fff"/><circle cx="15" cy="10" r="1.2" fill="#fff"/><path d="M8 14.6a5 5 0 0 0 8 0" stroke="#fff" stroke-width="1.7" stroke-linecap="round"/>`,
+          25,
+        ),
+        slack: svg(
+          24,
+          `<path d="M6.2 14.4a2 2 0 1 1-2 2v-2h2Z" fill="#e01e5a"/><path d="M7.3 14.4a2 2 0 0 1 4 0v5a2 2 0 1 1-4 0v-5Z" fill="#e01e5a"/><path d="M9.6 6.2a2 2 0 1 1 2-2v2h-2Z" fill="#36c5f0"/><path d="M9.6 7.3a2 2 0 0 1 0 4h-5a2 2 0 1 1 0-4h5Z" fill="#36c5f0"/><path d="M17.8 9.6a2 2 0 1 1 2 2h-2v-2Z" fill="#2eb67d"/><path d="M16.7 9.6a2 2 0 0 1-4 0v-5a2 2 0 1 1 4 0v5Z" fill="#2eb67d"/><path d="M14.4 17.8a2 2 0 1 1-2 2v-2h2Z" fill="#ecb22e"/><path d="M14.4 16.7a2 2 0 0 1 0-4h5a2 2 0 1 1 0 4h-5Z" fill="#ecb22e"/>`,
+          16,
+        ),
+        gmail: svg(
+          24,
+          `<path d="M3 6.6 12 13l9-6.4V18a1 1 0 0 1-1 1h-3V11l-5 3.6L7 11v8H4a1 1 0 0 1-1-1V6.6Z" fill="#ea4335"/><path d="M17 11v8h3a1 1 0 0 0 1-1V6.6L17 9.5V11Z" fill="#34a853"/><path d="M3 6.6 7 9.5V19H4a1 1 0 0 1-1-1V6.6Z" fill="#4285f4"/><path d="M3 5.6A1.6 1.6 0 0 1 5.4 4.3L12 9l6.6-4.7A1.6 1.6 0 0 1 21 5.6v1L12 13 3 6.6v-.8Z" fill="#fbbc04"/>`,
+          16,
+        ),
+        cal: svg(
+          24,
+          `<rect x="3" y="4" width="18" height="17" rx="3" fill="#1a73e8"/><rect x="3" y="4" width="18" height="4.5" rx="3" fill="#1967d2"/><text x="12" y="17.6" font-size="9" font-weight="700" fill="#fff" text-anchor="middle" font-family="Helvetica">31</text>`,
+          16,
+        ),
+      };
+
+      /* ============================================================== build */
+      const screen = document.getElementById("cge-screen");
+      const el = (cls, html, tag) => {
+        const n = document.createElement(tag || "div");
+        if (cls) n.className = cls;
+        if (html != null) n.innerHTML = html;
+        return n;
+      };
+
+      // --- status bar
+      const sb = el("statusbar");
+      sb.innerHTML =
+        `<div class="sb-left"><div class="sb-clock sb-clock-box">` +
+        `<span id="cge-clock-early">${CONFIG.status.clock}</span>` +
+        `<span id="cge-clock-late">${CONFIG.status.clockLate}</span></div>${ICO.bell}</div>` +
+        `<div class="sb-right">${ICO.bars}<div class="sb-net">${CONFIG.status.net}</div>` +
+        `<div class="sb-batt"><span id="cge-batt-early">${CONFIG.status.battery}</span>` +
+        `<span id="cge-batt-late">${CONFIG.status.batteryLate}</span></div>` +
+        `<div class="sb-batt-cap"></div></div>`;
+
+      // --- thread
+      const port = el("scrollport");
+      const thread = el("thread");
+      thread.setAttribute("data-layout-allow-overflow", "true");
+      thread.setAttribute("data-layout-allow-overlap", "true");
+      thread.setAttribute("data-layout-allow-occlusion", "true");
+      thread.id = "cge-thread";
+
+      const bubble = el("bubble");
+      bubble.id = "cge-bubble";
+      bubble.textContent = CONFIG.prompt + "?";
+      thread.appendChild(bubble);
+
+      const answer = el("answer");
+      answer.id = "cge-answer";
+      thread.appendChild(answer);
+
+      // paragraphs -> word spans (**bold** supported)
+      const paraEls = [];
+      CONFIG.paragraphs.forEach((txt) => {
+        const p = el("para");
+        const inner = el("para-inner");
+        let bold = false;
+        txt.split(/(\s+)/).forEach((tok) => {
+          if (!tok) return;
+          if (/^\s+$/.test(tok)) {
+            inner.appendChild(document.createTextNode(tok));
+            return;
+          }
+          let word = tok;
+          let open = false;
+          if (word.startsWith("**")) {
+            bold = true;
+            open = true;
+            word = word.slice(2);
+          }
+          let close = false;
+          if (word.includes("**")) {
+            close = true;
+            word = word.replace("**", "");
+          }
+          const s = el("w", null, "span");
+          if (bold) s.style.fontWeight = "600";
+          s.textContent = word;
+          if (close) bold = false;
+          void open;
+          inner.appendChild(s);
+        });
+        p.appendChild(inner);
+        answer.appendChild(p);
+        paraEls.push({ p: p, inner: inner, words: [].slice.call(inner.querySelectorAll(".w")) });
+      });
+
+      // table
+      const tbl = el("tbl");
+      tbl.id = "cge-tbl";
+      const headRow = el("tr");
+      headRow.innerHTML =
+        `<div class="td th c1">${CONFIG.table.head[0]}</div>` +
+        `<div class="td th c2">${CONFIG.table.head[1]}</div>` +
+        `<div class="td th c3">${CONFIG.table.head[2]}</div>`;
+      const headRule = el("rule-head");
+      headRule.id = "cge-head-rule";
+      tbl.appendChild(headRow);
+      tbl.appendChild(headRule);
+      answer.appendChild(tbl);
+
+      const rowEls = [];
+      CONFIG.table.rows.forEach((r, i) => {
+        const row = el("tr");
+        row.id = "cge-row" + i;
+        const whyWords = r.why
+          .split(" ")
+          .map((w) => `<span class="w">${w}</span>`)
+          .join(" ");
+        row.innerHTML =
+          `<div class="td c1"><div class="use"><span class="emo">${r.emoji}</span>` +
+          `<span class="w">${r.use}</span></div></div>` +
+          `<div class="td c2"><span class="w">${r.tool}</span></div>` +
+          `<div class="td c3">${whyWords}` +
+          `<div class="chip"><span class="chip-dot">AI</span>${r.chip}</div></div>`;
+        const rule = el("rule-row");
+        rule.id = "cge-rule" + i;
+        tbl.appendChild(row);
+        tbl.appendChild(rule);
+        rowEls.push({
+          row: row,
+          rule: rule,
+          words: [].slice.call(row.querySelectorAll(".w")),
+          emo: row.querySelector(".emo"),
+          chip: row.querySelector(".chip"),
+        });
+      });
+
+      port.appendChild(thread);
+
+      // --- scroll chrome
+      const sbar = el("scrollbar");
+      sbar.id = "cge-scrollbar";
+      const chevWrap = el("chev-wrap", `<div class="chev" id="cge-chev">${ICO.chevDown}</div>`);
+
+      // --- suggestions
+      const suggests = el("suggests");
+      const sugEls = CONFIG.suggestions.map((s) => {
+        const n = el("sug", `<div class="sug-ico">${ICO[s.icon]}</div><div>${s.label}</div>`);
+        suggests.appendChild(n);
+        return n;
+      });
+
+      // --- composer
+      const composer = el("composer");
+      composer.setAttribute("data-layout-allow-occlusion", "true");
+      composer.setAttribute("data-layout-allow-overlap", "true");
+      composer.id = "cge-composer";
+      composer.innerHTML =
+        `<div class="comp-text" id="cge-comp-text"><span class="typed" id="cge-typed"></span></div>` +
+        `<div class="comp-ph" id="cge-comp-ph">Ask ChatGPT</div>` +
+        `<div class="comp-ctrls"><div id="cge-comp-plus">${ICO.plus}</div>` +
+        `<div class="comp-mic" id="cge-comp-mic">${ICO.mic}</div>` +
+        `<div class="blue-btn" id="cge-blue-btn">` +
+        `<div class="blue-face" id="cge-face-wave">${ICO.wave}</div>` +
+        `<div class="blue-face" id="cge-face-send">${ICO.arrowUp}</div>` +
+        `<div class="blue-face" id="cge-face-stop">${ICO.stop}</div></div></div>`;
+
+      // one span per character, each followed by a zero-width caret slot. Hidden
+      // characters still occupy their final space, so the caret needs no measuring.
+      const typedEl = composer.querySelector("#cge-typed");
+      const chEls = [];
+      const curEls = [];
+      const mkCursor = () => {
+        const a = el("cursor-anchor", "<i></i>", "span");
+        typedEl.appendChild(a);
+        curEls.push(a);
+      };
+      mkCursor();
+      CONFIG.prompt.split("").forEach((c) => {
+        const sp = el("ch", c === " " ? "&nbsp;" : c, "span");
+        typedEl.appendChild(sp);
+        chEls.push(sp);
+        mkCursor();
+      });
+
+      // --- keyboard
+      const KB = { w: 33.44, gap: 6.03, inset: 6.67 };
+      const keyboard = el("keyboard");
+      keyboard.setAttribute("data-layout-allow-overflow", "true");
+      keyboard.setAttribute("data-layout-allow-overlap", "true");
+      keyboard.id = "cge-keyboard";
+      const predict = el("predict");
+      predict.id = "cge-predict";
+      const PRED_STAGES = ["start", "mid", "end"];
+      const pdEls = [0, 1, 2].map((col) => {
+        const n = el("pd");
+        const stages = PRED_STAGES.map((k) => {
+          const w = el("pdw", CONFIG.predict[k][col]);
+          n.appendChild(w);
+          return w;
+        });
+        predict.appendChild(n);
+        return { cell: n, stages: stages };
+      });
+      keyboard.appendChild(predict);
+
+      const keyIndex = {};
+      const mkKey = (row, label, x, w, cls) => {
+        const k = el("key" + (cls ? " " + cls : ""), label);
+        k.style.left = x + "px";
+        k.style.width = w + "px";
+        row.appendChild(k);
+        if (/^[A-Z]$/.test(label)) keyIndex[label] = k;
+        return k;
+      };
+      const rowsDef = [
+        { y: 52, keys: "QWERTYUIOP".split(""), x0: KB.inset },
+        { y: 106, keys: "ASDFGHJKL".split(""), x0: 26.33 },
+        { y: 160, keys: "ZXCVBNM".split(""), x0: 65.67 },
+      ];
+      rowsDef.forEach((rd, ri) => {
+        const row = el("krow");
+        row.style.top = rd.y + "px";
+        rd.keys.forEach((k, i) => mkKey(row, k, rd.x0 + i * (KB.w + KB.gap), KB.w));
+        if (ri === 2) {
+          mkKey(row, ICO.shift, KB.inset, 45.33, "dark");
+          mkKey(row, ICO.del, 350, 45.67, "dark");
+        }
+        keyboard.appendChild(row);
+      });
+      const row4 = el("krow");
+      row4.style.top = "214px";
+      const kNum = mkKey(row4, "123", KB.inset, 92.67, "dark small");
+      const kSpace = mkKey(row4, "", 105.33, 191.33);
+      const kRet = mkKey(row4, ICO.ret, 302.67, 93, "dark");
+      keyboard.appendChild(row4);
+      keyboard.appendChild(el("kb-bottom", `<div>${ICO.emojiKey}</div><div>${ICO.mic}</div>`));
+      void kNum;
+      void kRet;
+
+      // --- header (built last so it stacks above the thread)
+      const hdrScrim = el("hdr-scrim");
+      hdrScrim.setAttribute("data-layout-allow-occlusion", "true");
+      hdrScrim.id = "cge-hdr-scrim";
+      const header = el("header");
+      header.innerHTML =
+        `<div class="circle-btn hdr-left">${ICO.burger}</div>` +
+        `<div class="seg" id="cge-seg"><div class="seg-item on">Chat</div><div class="seg-item">Work</div></div>` +
+        `<div class="hdr-right" id="cge-hdr-right">` +
+        `<div class="hdr-right-face" id="cge-hdr-voice">${ICO.voiceCircle}</div>` +
+        `<div class="hdr-right-face" id="cge-hdr-actions">${ICO.compose}${ICO.dots}</div></div>`;
+
+      const statusPlate = el("status-plate");
+      statusPlate.setAttribute("data-layout-allow-occlusion", "true");
+      const compScrim = el("comp-scrim");
+      compScrim.setAttribute("data-layout-allow-occlusion", "true");
+      [
+        port,
+        sbar,
+        chevWrap,
+        suggests,
+        compScrim,
+        composer,
+        keyboard,
+        hdrScrim,
+        statusPlate,
+        header,
+        sb,
+      ].forEach((n) => screen.appendChild(n));
+
+      /* ============================================================ measure
+         All layout reads happen here, once, before any state is set. Widths
+         come off getBoundingClientRect (sub-pixel) divided by --scale; block
+         offsets come off offsetTop, which is unscaled. Deterministic: the same
+         layout every load, so every seek resolves identically.               */
+      // paragraph line grouping + heights
+      const LH = 25.667;
+      paraEls.forEach((pe) => {
+        pe.height = pe.inner.offsetHeight;
+        const tops = pe.words.map((w) => w.offsetTop);
+        const uniq = [];
+        tops.forEach((t) => {
+          if (!uniq.length || t - uniq[uniq.length - 1] > 4) uniq.push(t);
+        });
+        pe.lineOf = tops.map((t) => {
+          let li = 0;
+          uniq.forEach((u, i) => {
+            if (Math.abs(t - u) <= 4) li = i;
+          });
+          return li;
+        });
+        pe.lineHeights = uniq.map((u, i) => Math.min(pe.height, (i + 1) * LH + 1));
+      });
+
+      const headRowH = headRow.offsetHeight;
+      rowEls.forEach((re) => (re.h = re.row.offsetHeight));
+
+      // Scroll anchors: keep the newest revealed element just above the composer.
+      // Read here, in the natural layout — by timeline-build time every paragraph
+      // and row has been collapsed to height 0 and offsetTop/Height would lie.
+      const ANCHOR = 772;
+      const anchorOf = (node) => Math.min(0, ANCHOR - (node.offsetTop + node.offsetHeight));
+      paraEls.forEach((pe) => (pe.anchor = anchorOf(pe.p)));
+      rowEls.forEach((re) => (re.anchor = anchorOf(re.row)));
+      const Y_FINAL = 37 - bubble.offsetTop; // IMG_0937: bubble top rests at y=37
+
+      /* ====================================================== initial state */
+      gsap.set(composer, { y: -309, x: 0, width: 378, height: 48 }); // keyboard-up rest
+      gsap.set([answer], { autoAlpha: 1 });
+      gsap.set(
+        paraEls.map((p) => p.p),
+        { height: 0 },
+      );
+      paraEls.forEach((pe) => gsap.set(pe.words, { opacity: 0 }));
+      gsap.set([headRow, headRule], { height: 0, opacity: 0 });
+      rowEls.forEach((re) => {
+        gsap.set(re.row, { height: 0 });
+        gsap.set(re.rule, { height: 0 });
+        gsap.set(re.words, { opacity: 0 });
+        gsap.set([re.emo, re.chip], { opacity: 0 });
+      });
+      gsap.set(bubble, { autoAlpha: 0 });
+      gsap.set(thread, { y: 0 });
+      gsap.set(sbar, { autoAlpha: 0, y: 60, height: 250 });
+      gsap.set(chevWrap.firstChild, { autoAlpha: 0, y: 10 });
+      gsap.set(sugEls, { autoAlpha: 0, y: 14 });
+      gsap.set(chEls, { opacity: 0 });
+      gsap.set(curEls, { autoAlpha: 0 });
+      gsap.set(document.getElementById("cge-comp-ph"), { autoAlpha: 1 });
+      gsap.set(document.getElementById("cge-face-send"), { autoAlpha: 0, scale: 0.6 });
+      gsap.set(document.getElementById("cge-face-stop"), { autoAlpha: 0, scale: 0.6 });
+      gsap.set(document.getElementById("cge-hdr-actions"), { autoAlpha: 0 });
+      gsap.set(document.getElementById("cge-hdr-right"), { width: 44 });
+      gsap.set(document.getElementById("cge-seg"), { autoAlpha: 1, scale: 1 });
+      gsap.set(hdrScrim, { autoAlpha: 1 });
+      gsap.set(keyboard, { y: 0 });
+      pdEls.forEach((pd) => {
+        gsap.set(pd.stages[0], { autoAlpha: 1 });
+        gsap.set([pd.stages[1], pd.stages[2]], { autoAlpha: 0 });
+      });
+      gsap.set(document.getElementById("cge-clock-late"), { autoAlpha: 0 });
+      gsap.set(document.getElementById("cge-batt-late"), { autoAlpha: 0 });
+
+      /* ============================================================ timeline */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* ---- 1. suggestions cascade in (waterfall entry, weight-ordered) */
+      sugEls.forEach((n, i) => {
+        tl.to(
+          n,
+          { autoAlpha: 1, y: 0, duration: 0.42, ease: "power3.out" },
+          T.suggestsIn + i * 0.09,
+        );
+      });
+
+      /* ---- 2. typing. Each keystroke IS the cause: key flash -> width step. */
+      const t0 = T.typeStart;
+      const chars = CONFIG.prompt.split("");
+      const charT = [];
+      let t = t0;
+      chars.forEach((c, i) => {
+        charT.push(t);
+        t += c === " " ? T.charBase + T.spaceHold : T.charBase;
+        void i;
+      });
+      const typeEnd = t;
+
+      // composer grows to two rows on the first keystroke
+      tl.to(composer, { height: 92, duration: 0.24, ease: "power2.out" }, t0 - 0.02);
+      tl.to(document.getElementById("cge-comp-ph"), { autoAlpha: 0, duration: 0.12 }, t0 - 0.02);
+      tl.to(curEls[0], { autoAlpha: 1, duration: 0.01 }, t0 - 0.02);
+      // suggestions clear — caused by the first keystroke
+      sugEls.forEach((n, i) => {
+        tl.to(n, { autoAlpha: 0, y: 10, duration: 0.2, ease: "power2.in" }, t0 - 0.02 + i * 0.04);
+      });
+      // voice waveform -> send arrow
+      tl.to(
+        document.getElementById("cge-face-wave"),
+        { autoAlpha: 0, scale: 0.6, duration: 0.14 },
+        t0,
+      );
+      tl.to(
+        document.getElementById("cge-face-send"),
+        { autoAlpha: 1, scale: 1, duration: 0.24, ease: "back.out(1.6)" },
+        t0 + 0.04,
+      );
+
+      chars.forEach((c, i) => {
+        tl.to(chEls[i], { opacity: 1, duration: 0.01 }, charT[i]);
+        tl.to(curEls[i], { autoAlpha: 0, duration: 0.01 }, charT[i]);
+        tl.to(curEls[i + 1], { autoAlpha: 1, duration: 0.01 }, charT[i]);
+        const k = keyIndex[c.toUpperCase()];
+        const target = c === " " ? kSpace : k;
+        if (target) {
+          tl.to(target, { backgroundColor: "#5f5f5f", duration: 0.04 }, charT[i] - 0.03);
+          tl.to(
+            target,
+            { backgroundColor: c === " " ? "#3c3c3c" : "#3c3c3c", duration: 0.09 },
+            charT[i] + 0.02,
+          );
+        }
+      });
+
+      // caret blink (finite, deterministic)
+      const blinkFrom = t0 + 0.1;
+      const blinks = Math.floor((typeEnd + T.sendPad - blinkFrom) / 1.06);
+      const lastCur = curEls[curEls.length - 1];
+      for (let i = 0; i < blinks; i++) {
+        const off = blinkFrom + i * 1.06 + 0.53;
+        const on = blinkFrom + i * 1.06 + 1.06;
+        if (off > typeEnd) tl.to(lastCur, { autoAlpha: 0, duration: 0.02 }, off);
+        if (on > typeEnd) tl.to(lastCur, { autoAlpha: 1, duration: 0.02 }, on);
+      }
+
+      // predictive row swaps at word boundaries
+      const swapPredict = (at, stage) => {
+        pdEls.forEach((pd) => {
+          tl.to(pd.stages[stage - 1], { autoAlpha: 0, duration: 0.06 }, at);
+          tl.to(pd.stages[stage], { autoAlpha: 1, duration: 0.08 }, at + 0.06);
+        });
+      };
+      swapPredict(charT[CONFIG.prompt.indexOf(" ai ") + 1], 1);
+      swapPredict(charT[CONFIG.prompt.length - 1], 2);
+
+      /* ---- 3. send. Tap ignites: bubble flight + keyboard down + header morph */
+      const tSend = typeEnd + T.sendPad;
+      const blueBtn = document.getElementById("cge-blue-btn");
+      tl.to(blueBtn, { scale: 0.86, duration: 0.06, ease: "power2.out" }, tSend);
+      tl.to(blueBtn, { scale: 1, duration: 0.18, ease: "power2.out" }, tSend + 0.06);
+
+      const tGo = tSend + T.sendReact;
+      // composer empties and collapses; keyboard leaves downward
+      tl.to(chEls, { opacity: 0, duration: 0.01 }, tGo);
+      tl.to(curEls, { autoAlpha: 0, duration: 0.01 }, tGo);
+      tl.to(composer, { height: 48, width: 326, duration: 0.3, ease: "power2.out" }, tGo);
+      tl.to(composer, { y: 0, x: 26, duration: 0.32, ease: "power2.out" }, tGo);
+      tl.to(document.getElementById("cge-comp-ph"), { autoAlpha: 1, duration: 0.2 }, tGo + 0.12);
+      tl.to(keyboard, { y: 340, duration: 0.3, ease: "power2.out" }, tGo);
+      tl.to(document.getElementById("cge-face-send"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.28);
+      tl.to(
+        document.getElementById("cge-face-stop"),
+        { autoAlpha: 1, scale: 1, duration: 0.2, ease: "power2.out" },
+        tGo + 0.34,
+      );
+
+      // header: segmented control out, right control widens into the actions pill
+      tl.to(document.getElementById("cge-seg"), { autoAlpha: 0, scale: 0.92, duration: 0.16 }, tGo);
+      tl.to(document.getElementById("cge-hdr-voice"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.02);
+      tl.to(
+        document.getElementById("cge-hdr-right"),
+        { width: 108, duration: 0.26, ease: "power2.out" },
+        tGo + 0.06,
+      );
+      tl.to(
+        document.getElementById("cge-hdr-actions"),
+        { autoAlpha: 1, duration: 0.18 },
+        tGo + 0.16,
+      );
+
+      // the bubble: born at the composer's text position, lands in its thread slot
+      const bubbleTop = bubble.offsetTop + thread.offsetTop; // 128
+      const dy = 526.7 - 48 + 10 - bubbleTop; // keyboard-up composer text row -> slot
+      tl.fromTo(
+        bubble,
+        { autoAlpha: 0, y: dy, scale: 0.94, transformOrigin: "100% 50%" },
+        { autoAlpha: 1, y: 0, scale: 1, duration: 0.34, ease: "power3.out" },
+        tGo + 0.02,
+      );
+
+      /* ---- 4. stream. Words land in reading order; the box grows by the line. */
+      let tw = tGo + 0.34 + T.streamLead;
+      const scrollTo = (target, at, dur) =>
+        tl.to(thread, { y: target, duration: dur || 0.5, ease: "power2.out" }, at);
+
+      paraEls.forEach((pe, pi) => {
+        let lastLine = -1;
+        pe.words.forEach((w, wi) => {
+          const li = pe.lineOf[wi];
+          if (li !== lastLine) {
+            tl.to(pe.p, { height: pe.lineHeights[li], duration: 0.16, ease: "power2.out" }, tw);
+            lastLine = li;
+          }
+          tl.to(w, { opacity: 1, duration: 0.1 }, tw);
+          tw += T.wordStep;
+        });
+        scrollTo(pe.anchor, tw - T.wordStep * 2, 0.6);
+        if (pi === 0) tw += 0.12;
+      });
+
+      /* ---- 5. the table assembles, row by row */
+      tw += T.tableLead;
+      tl.to(
+        [headRow, headRule],
+        { height: (i) => (i === 0 ? headRowH : 2), opacity: 1, duration: 0.2, ease: "power2.out" },
+        tw,
+      );
+      tw += 0.34;
+
+      rowEls.forEach((re) => {
+        tl.to(re.row, { height: re.h, duration: 0.22, ease: "power2.out" }, tw);
+        tl.to(re.emo, { opacity: 1, duration: 0.14 }, tw + 0.04);
+        re.words.forEach((w, wi) => {
+          tl.to(w, { opacity: 1, duration: 0.09 }, tw + 0.08 + wi * 0.028);
+        });
+        tl.to(re.chip, { opacity: 1, duration: 0.2, ease: "power2.out" }, tw + 0.42);
+        tl.to(re.rule, { height: 2, duration: 0.12 }, tw + 0.2);
+        scrollTo(re.anchor, tw + 0.1, 0.72);
+        tw += T.rowStep;
+      });
+
+      /* ---- 6. streaming ends, then the read-back scroll lands on the hero frame */
+      tl.to(document.getElementById("cge-face-stop"), { autoAlpha: 0, duration: 0.14 }, tw);
+      tl.to(
+        document.getElementById("cge-face-wave"),
+        { autoAlpha: 1, scale: 1, duration: 0.22, ease: "power2.out" },
+        tw + 0.06,
+      );
+
+      const tRead = tw + 0.24;
+      tl.to(sbar, { autoAlpha: 1, duration: 0.14 }, tRead);
+      // the minute rolls over between the source frames — keep that
+      tl.to(
+        document.getElementById("cge-clock-early"),
+        { autoAlpha: 0, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(
+        document.getElementById("cge-clock-late"),
+        { autoAlpha: 1, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(
+        document.getElementById("cge-batt-early"),
+        { autoAlpha: 0, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(
+        document.getElementById("cge-batt-late"),
+        { autoAlpha: 1, duration: 0.01 },
+        tRead - 0.5,
+      );
+      tl.to(thread, { y: Y_FINAL, duration: T.readbackDur, ease: "power2.inOut" }, tRead);
+      tl.to(sbar, { y: 0, duration: T.readbackDur, ease: "power2.inOut" }, tRead);
+      tl.to(
+        chevWrap.firstChild,
+        { autoAlpha: 1, y: 0, duration: 0.3, ease: "back.out(1.5)" },
+        tRead + T.readbackDur - 0.35,
+      );
+
+      window.__timelines["chatgpt-exchange"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/chatgpt-exchange/registry-item.json b/registry/blocks/chatgpt-exchange/registry-item.json
new file mode 100644
index 000000000..8ca3d57af
--- /dev/null
+++ b/registry/blocks/chatgpt-exchange/registry-item.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "chatgpt-exchange",
+  "type": "hyperframes:block",
+  "title": "ChatGPT Exchange",
+  "description": "A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result",
+  "tags": ["showcase", "mock-ui", "ai", "chat", "vertical", "ad-template"],
+  "author": "Jake Moran",
+  "dimensions": {
+    "width": 1080,
+    "height": 1920
+  },
+  "duration": 14.9,
+  "files": [
+    {
+      "path": "chatgpt-exchange.html",
+      "target": "compositions/chatgpt-exchange.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/inter-latin-400-normal.woff2",
+      "target": "assets/fonts/inter-latin-400-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/inter-latin-500-normal.woff2",
+      "target": "assets/fonts/inter-latin-500-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/inter-latin-600-normal.woff2",
+      "target": "assets/fonts/inter-latin-600-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/inter-LICENSE.txt",
+      "target": "assets/fonts/inter-LICENSE.txt",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/claude-exchange/assets/fonts/eb-garamond-LICENSE.txt b/registry/blocks/claude-exchange/assets/fonts/eb-garamond-LICENSE.txt
new file mode 100644
index 000000000..da3ca8959
--- /dev/null
+++ b/registry/blocks/claude-exchange/assets/fonts/eb-garamond-LICENSE.txt
@@ -0,0 +1,93 @@
+Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12) EBGaramond-Italic[wght].ttf: Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/registry/blocks/claude-exchange/assets/fonts/eb-garamond-latin-400-normal.woff2 b/registry/blocks/claude-exchange/assets/fonts/eb-garamond-latin-400-normal.woff2
new file mode 100644
index 000000000..ffed311d3
Binary files /dev/null and b/registry/blocks/claude-exchange/assets/fonts/eb-garamond-latin-400-normal.woff2 differ
diff --git a/registry/blocks/claude-exchange/assets/fonts/eb-garamond-latin-700-normal.woff2 b/registry/blocks/claude-exchange/assets/fonts/eb-garamond-latin-700-normal.woff2
new file mode 100644
index 000000000..85d520902
Binary files /dev/null and b/registry/blocks/claude-exchange/assets/fonts/eb-garamond-latin-700-normal.woff2 differ
diff --git a/registry/blocks/claude-exchange/assets/fonts/inter-LICENSE.txt b/registry/blocks/claude-exchange/assets/fonts/inter-LICENSE.txt
new file mode 100644
index 000000000..40589daa9
--- /dev/null
+++ b/registry/blocks/claude-exchange/assets/fonts/inter-LICENSE.txt
@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/registry/blocks/claude-exchange/assets/fonts/inter-latin-400-normal.woff2 b/registry/blocks/claude-exchange/assets/fonts/inter-latin-400-normal.woff2
new file mode 100644
index 000000000..f15b025d6
Binary files /dev/null and b/registry/blocks/claude-exchange/assets/fonts/inter-latin-400-normal.woff2 differ
diff --git a/registry/blocks/claude-exchange/assets/fonts/inter-latin-500-normal.woff2 b/registry/blocks/claude-exchange/assets/fonts/inter-latin-500-normal.woff2
new file mode 100644
index 000000000..54f0a595d
Binary files /dev/null and b/registry/blocks/claude-exchange/assets/fonts/inter-latin-500-normal.woff2 differ
diff --git a/registry/blocks/claude-exchange/assets/fonts/inter-latin-600-normal.woff2 b/registry/blocks/claude-exchange/assets/fonts/inter-latin-600-normal.woff2
new file mode 100644
index 000000000..d1897949f
Binary files /dev/null and b/registry/blocks/claude-exchange/assets/fonts/inter-latin-600-normal.woff2 differ
diff --git a/registry/blocks/claude-exchange/claude-exchange.html b/registry/blocks/claude-exchange/claude-exchange.html
new file mode 100644
index 000000000..9bbc5afdc
--- /dev/null
+++ b/registry/blocks/claude-exchange/claude-exchange.html
@@ -0,0 +1,1535 @@
+<!doctype html>
+<html lang="en" data-resolution="portrait">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1080, height=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* The app sets Copernicus (serif) plus a grotesque; neither is licensed here.
+         EB Garamond and Inter are redistributable OFL stand-ins, embedded under
+         neutral family names so the composition remains self-contained. */
+      @font-face {
+        font-family: "ClaudeSerif";
+        font-weight: 400;
+        font-display: block;
+        src: url("assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSerif";
+        font-weight: 700;
+        font-display: block;
+        src: url("assets/fonts/eb-garamond-latin-700-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSans";
+        font-weight: 400;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSans";
+        font-weight: 500;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "ClaudeSans";
+        font-weight: 600;
+        font-display: block;
+        src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1080px;
+        height: 1920px;
+        overflow: hidden;
+        background: #20201f;
+      }
+      body,
+      #cle-root {
+        font-family: "ClaudeSans", sans-serif;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      :root {
+        --scale: 2.1968; /* 1920 / 874 */
+        --bg: #20201f;
+        --card: #1c1c1b;
+        --hair: #424240;
+        --inset: #131313;
+        --kb-bg: #1b1b1c;
+        --key: #404040;
+        --ink: #f8f8f4;
+        --muted: #94948c;
+        --muted2: #c0c0b4;
+        --accent: #d97757;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        background: var(--bg);
+      }
+      .screen {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 402px;
+        height: 874px;
+        margin-left: -201px;
+        background: var(--bg);
+        overflow: hidden;
+        transform-origin: top center;
+        transform: scale(var(--scale));
+      }
+
+      /* ----------------------------------------------------------- status bar */
+      .statusbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 65px;
+        z-index: 40;
+        display: flex;
+        align-items: center;
+        padding: 0 34px 0 16px;
+        color: #fff;
+      }
+      .sb-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: 31.7px;
+      }
+      .sb-clock {
+        font-size: 17.2px;
+        font-weight: 600;
+        letter-spacing: 1.3px;
+        position: relative;
+        width: 40px;
+        height: 22px;
+      }
+      .sb-clock span {
+        position: absolute;
+        left: 0;
+        top: 0;
+        white-space: nowrap;
+      }
+      .sb-right {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        margin-left: auto;
+      }
+      .sb-net {
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: -0.2px;
+      }
+      .sb-batt {
+        width: 30px;
+        height: 15px;
+        border-radius: 4.5px;
+        background: #fff;
+        color: #000;
+        font-size: 11px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        letter-spacing: -0.2px;
+      }
+      .sb-batt-cap {
+        width: 2px;
+        height: 6px;
+        background: rgba(255, 255, 255, 0.45);
+        border-radius: 0 2px 2px 0;
+        margin-left: -4px;
+      }
+
+      /* --------------------------------------------------------------- header */
+      .status-plate {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 54.7px;
+        z-index: 34;
+        background: var(--bg);
+      }
+      .hdr-scrim {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 112px;
+        z-index: 30;
+        background: linear-gradient(
+          to bottom,
+          rgba(32, 32, 31, 0.92) 46%,
+          rgba(32, 32, 31, 0) 100%
+        );
+      }
+      .header {
+        position: absolute;
+        top: 62px;
+        left: 0;
+        right: 0;
+        height: 44px;
+        z-index: 40;
+      }
+      .circle-btn {
+        position: absolute;
+        top: 0;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: rgba(255, 255, 255, 0.035);
+        border: 1px solid rgba(255, 255, 255, 0.11);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .hdr-left {
+        left: 16px;
+      }
+      .hdr-right {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        background: #272726;
+        border: 1px solid rgba(255, 255, 255, 0.07);
+        overflow: hidden;
+      }
+      .hdr-right-face {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+      }
+
+      /* --------------------------------------------------------- empty state */
+      .empty {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 193.7px;
+        z-index: 12;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .empty-mark {
+        width: 35.3px;
+        height: 35.3px;
+      }
+      .empty-head {
+        margin-top: 21px;
+        font-family: "ClaudeSerif", serif;
+        font-size: 23.2px;
+        color: #e8e8de;
+        white-space: pre;
+      }
+
+      /* --------------------------------------------------------------- thread */
+      .scrollport {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        z-index: 10;
+      }
+      .thread {
+        position: relative;
+        padding: 124px 13.5px 180px 16.3px;
+      }
+
+      .bubble {
+        width: fit-content;
+        max-width: 322px;
+        margin-left: auto;
+        background: var(--inset);
+        border-radius: 24px;
+        padding: 14.7px 13px 9.3px;
+        color: var(--ink);
+        font-size: 18px;
+        line-height: 24px;
+      }
+
+      /* An .abox is the element whose height animates. box-sizing:border-box means a
+         height of 0 cannot shrink past the element's own padding, so every gap lives on
+         the child instead — otherwise collapsed blocks keep their top gaps and stack up. */
+      .abox {
+        overflow: hidden;
+      }
+      .tool-row {
+        display: flex;
+        align-items: center;
+        gap: 13px;
+        min-height: 26px;
+        color: var(--muted);
+        font-size: 14px;
+      }
+      .tool-row .chev {
+        margin-left: auto;
+      }
+      .tool-ico {
+        width: 16px;
+        height: 16px;
+        flex: none;
+      }
+
+      .answer {
+        font-family: "ClaudeSerif", serif;
+        font-size: 18px;
+        line-height: 27.3px;
+        color: var(--ink);
+      }
+      .para {
+        overflow: hidden;
+      }
+      .abox > .para,
+      .abox > .bul {
+        overflow: visible;
+      }
+      .w {
+        opacity: 0;
+      }
+      .bul {
+        position: relative;
+        padding-left: 24px;
+        overflow: hidden;
+      }
+      .bul::before {
+        content: "•";
+        position: absolute;
+        left: 9.7px;
+        top: var(--gap, 0px);
+      }
+      .cite {
+        display: inline-block;
+        padding: 1px 7px;
+        margin: 0 2px;
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 0.07);
+        font-family: "ClaudeSans", sans-serif;
+        font-size: 13px;
+        vertical-align: 2px;
+        color: #ded9d0;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        min-height: 20px;
+        padding-top: 24px;
+      }
+      .act-ico {
+        width: 16px;
+        height: 16px;
+        opacity: 0.62;
+      }
+      .src-stack {
+        display: flex;
+        margin-left: 6px;
+      }
+      .src-dot {
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        margin-left: -5px;
+        border: 1.2px solid var(--bg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 6px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .src-label {
+        font-size: 13.5px;
+        color: var(--muted);
+        margin-left: 5px;
+      }
+
+      .disclaim {
+        display: flex;
+        align-items: flex-start;
+        padding-top: 28px;
+      }
+      .disclaim-mark {
+        width: 28px;
+        height: 28px;
+        flex: none;
+      }
+      .disclaim-text {
+        margin-left: auto;
+        text-align: right;
+        font-size: 13px;
+        line-height: 19px;
+        color: var(--muted);
+      }
+
+      /* ---------------------------------------------------------- scroll chrome */
+      .chev-wrap {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 720px;
+        z-index: 25;
+        display: flex;
+        justify-content: center;
+      }
+      .chev-btn {
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
+        background: #2a2a28;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* -------------------------------------------------------------- composer */
+      .comp-scrim {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 118px;
+        z-index: 18;
+        background: linear-gradient(to top, var(--bg) 16%, rgba(32, 32, 31, 0) 100%);
+      }
+      .composer {
+        position: absolute;
+        left: 8px;
+        bottom: 34px;
+        width: 385.7px;
+        height: 172.7px;
+        border-radius: 26px;
+        background: var(--card);
+        border: 1px solid var(--hair);
+        z-index: 20;
+        overflow: hidden;
+      }
+      .notice {
+        position: absolute;
+        top: 8px;
+        left: 8.7px;
+        right: 8.7px;
+        height: 58.7px;
+        border-radius: 19px;
+        background: var(--inset);
+        display: flex;
+        align-items: center;
+        padding: 0 14px 0 16px;
+      }
+      .notice-text {
+        font-size: 14px;
+        line-height: 21px;
+        color: #d8d8d0;
+        width: 268px;
+      }
+      .notice-x {
+        margin-left: auto;
+        width: 16px;
+        height: 16px;
+        opacity: 0.75;
+      }
+
+      .comp-text {
+        position: absolute;
+        bottom: 40px;
+        left: 18px;
+        right: 18px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        color: var(--ink);
+        font-size: 17px;
+        white-space: pre;
+      }
+      .comp-ph {
+        position: absolute;
+        bottom: 40px;
+        left: 18px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        color: #8c8c84;
+        font-size: 17px;
+      }
+      .typed {
+        white-space: pre;
+      }
+      .typed .ch {
+        opacity: 0;
+      }
+      .cursor-anchor {
+        position: relative;
+        display: inline-block;
+        width: 0;
+        height: 22px;
+        vertical-align: -4px;
+      }
+      .cursor-anchor i {
+        position: absolute;
+        left: 1px;
+        top: 0;
+        width: 2px;
+        height: 22px;
+        background: var(--accent);
+      }
+
+      .comp-ctrls {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 60px;
+      }
+      .comp-ctrls > * {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .plus-btn {
+        left: 12px;
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        background: var(--inset);
+      }
+      .model-pill {
+        left: 53.3px;
+        height: 32px;
+        border-radius: 16px;
+        background: var(--inset);
+        padding: 0 13px;
+        gap: 6px;
+        font-size: 14.5px;
+        color: var(--ink);
+      }
+      .model-pill em {
+        font-style: normal;
+        color: #8c8c84;
+      }
+      .comp-mic {
+        right: 55px;
+        width: 20px;
+        height: 20px;
+      }
+      .voice-btn {
+        right: 8px;
+        width: 35.7px;
+        height: 35.7px;
+        border-radius: 18px;
+        background: #f7f7f3;
+      }
+      .stop-btn {
+        right: 18px;
+        width: 13.7px;
+        height: 13.7px;
+        border-radius: 3.4px;
+        background: #f7f7f3;
+      }
+      .send-btn {
+        right: 8px;
+        width: 35.7px;
+        height: 35.7px;
+        border-radius: 18px;
+        background: var(--accent);
+      }
+
+      /* -------------------------------------------------------------- keyboard */
+      .keyboard {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 539px;
+        height: 335px;
+        background: var(--kb-bg);
+        z-index: 22;
+      }
+      .predict {
+        position: relative;
+        height: 52px;
+        display: flex;
+        align-items: center;
+      }
+      .pd {
+        flex: 1;
+        position: relative;
+        align-self: stretch;
+        font-size: 17px;
+        color: #e8e8ea;
+        border-right: 1px solid rgba(235, 235, 245, 0.16);
+      }
+      .pdw {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .pd:last-child {
+        border-right: none;
+      }
+      .krow {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 43px;
+      }
+      .key {
+        position: absolute;
+        top: 0;
+        height: 43px;
+        border-radius: 5px;
+        background: var(--key);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 22.2px;
+        font-weight: 400;
+      }
+      .key.dark {
+        background: #2f2f2f;
+      }
+      .key.small {
+        font-size: 16px;
+      }
+      .kb-bottom {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 279.7px;
+        height: 55px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 29px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-hf-id="hf-lhdl"
+      id="cle-root"
+      data-composition-id="claude-exchange"
+      data-fps="60"
+      data-start="0"
+      data-duration="21.4"
+      data-width="1080"
+      data-height="1920"
+    >
+      <div data-hf-id="hf-tan6" class="stage">
+        <div
+          data-hf-id="hf-ztck"
+          id="cle-scene"
+          class="clip"
+          data-start="0"
+          data-duration="21.4"
+          data-track-index="1"
+        >
+          <div data-hf-id="hf-ylue" class="screen" id="cle-screen"></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ==================================================================
+         TEMPLATE CONFIG — edit only this block to re-skin the exchange.
+         ================================================================== */
+      const CONFIG = {
+        status: { clock: "2:36", clockLate: "2:37", net: "5G+", battery: 87 },
+        emptyHeading: "What can we tackle together?",
+        notice: "Opus consumes usage limits faster than other models",
+        model: { name: "Opus 4.8", effort: "High" },
+        placeholder: "Chat with Claude",
+        placeholderReply: "Reply to Claude",
+        prompt: "What's the best tool for ai avatars?",
+        predict: {
+          start: ["I", "The", "I'm"],
+          end: ["I", "Do", "How"],
+        },
+        thinking: "Weighing accuracy against current market…",
+        lead: "I'll search for the current state of this space since AI avatar tools move fast.",
+        search: "best AI avatar video generator 2026",
+        collapsed: "2 steps",
+        answer: [
+          {
+            t: "p",
+            text: "It depends on what you're making, but the field has consolidated fast and one platform now covers most of it.",
+          },
+          {
+            t: "p",
+            text: "**HeyGen** is where most teams land. Independent testing, not just vendor blogs, puts **Avatar IV** highest for talking-head realism, with facial micro-expressions and gesture control that hold up at a full-screen crop {HeyGen}. It also has the deepest enterprise adoption of the group, including a large share of the Fortune 100, which matters if you need the same presenter on brand across a year of campaigns.",
+          },
+          { t: "p", text: "By use case, the pieces shake out roughly like this:" },
+          { t: "b", text: "**Marketing / hyper-realistic talking heads** → Avatar IV" },
+          { t: "b", text: "**Enterprise training** → Video Translate for every locale" },
+          {
+            t: "b",
+            text: "**UGC-style performance ads** → Instant Avatar from one selfie, then batch the variants",
+          },
+          { t: "b", text: "**Real-time conversational / interactive** → Interactive Avatar" },
+          {
+            t: "b",
+            text: "**Custom digital twin from a selfie** → Instant Avatar in about five minutes",
+          },
+          {
+            t: "p",
+            text: "One distinction worth keeping in mind: a dedicated avatar platform optimizes the whole presenter workflow — script, voice, lip sync, translation, brand kit — whereas a general video model gives you cinematic scenes but takes far more skill to land the same person on camera twice.",
+          },
+          {
+            t: "p",
+            text: "Given your day job you probably have a sharper read than these roundups on where HeyGen actually leads versus where the reviews are being generous. Is this for a specific project, or comparing for positioning?",
+          },
+        ],
+        sources: { count: 7, dots: ["#1b6ac9", "#2b7fff", "#0f4fa8"] },
+        disclaimer: ["Claude is AI and can make mistakes.", "Please double-check responses."],
+      };
+
+      /* Beat clock (seconds). */
+      const T = {
+        emptyIn: 0.0,
+        typeStart: 0.86,
+        charBase: 0.05,
+        spaceHold: 0.11,
+        sendPad: 0.3,
+        sendReact: 0.03,
+        spinLead: 0.45,
+        toolStep: 0.5,
+        wordStep: 0.04,
+        paraGap: 0.12,
+        collapseAt: 0.55,
+        tailStep: 0.4,
+      };
+
+      /* ============================================================ icon set */
+      const svg = (b, d, w) =>
+        `<svg viewBox="0 0 ${b} ${b}" width="${w || b}" height="${w || b}" fill="none">${d}</svg>`;
+
+      // Claude's starburst: 12 tapered rays. Deterministic, drawn from a fixed table.
+      const burst = (size, color) => {
+        let rays = "";
+        for (let i = 0; i < 12; i++) {
+          const a = i * 30;
+          rays +=
+            `<rect x="10.85" y="1.1" width="2.3" height="21.8" rx="1.15" fill="${color}"` +
+            ` transform="rotate(${a} 12 12)"/>`;
+        }
+        return `<svg viewBox="0 0 24 24" width="${size}" height="${size}">${rays}</svg>`;
+      };
+
+      const ICO = {
+        bell: svg(
+          20,
+          `<path d="M4.2 15h11.6M10 3.2a4.3 4.3 0 0 1 4.3 4.3c0 3.4 1 5 1.5 5.6H4.2C4.7 12.5 5.7 10.9 5.7 7.5A4.3 4.3 0 0 1 10 3.2Z" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.3 16.6a1.9 1.9 0 0 0 3.4 0" stroke="#fff" stroke-width="1.5"/><path d="M3 17L17 3" stroke="#fff" stroke-width="1.6"/>`,
+          18,
+        ),
+        bars: svg(
+          20,
+          `<rect x="1" y="12.5" width="3" height="4.5" rx="1" fill="#fff"/><rect x="6" y="9.5" width="3" height="7.5" rx="1" fill="#fff"/><rect x="11" y="6.5" width="3" height="10.5" rx="1" fill="#fff"/><rect x="16" y="3.5" width="3" height="13.5" rx="1" fill="rgba(255,255,255,.32)"/>`,
+          16,
+        ),
+        burger: svg(
+          24,
+          `<path d="M5 9.5h14M5 15h9" stroke="#e8e8e0" stroke-width="2.1" stroke-linecap="round"/>`,
+          22,
+        ),
+        ghost: svg(
+          24,
+          `<path d="M5 20.4V11a7 7 0 0 1 14 0v9.4l-2.3-1.6-2.3 1.6-2.4-1.6-2.3 1.6-2.4-1.6L5 20.4Z" stroke="#e8e8e0" stroke-width="1.7" stroke-linejoin="round"/><circle cx="9.4" cy="11.2" r="1.15" fill="#e8e8e0"/><circle cx="14.6" cy="11.2" r="1.15" fill="#e8e8e0"/>`,
+          24,
+        ),
+        newChat: svg(
+          24,
+          `<path d="M12 3.4c5 0 8.8 3.4 8.8 7.8 0 4.5-3.8 7.9-8.8 7.9-.9 0-1.8-.1-2.6-.3l-4 1.6 1.1-3.5a7.6 7.6 0 0 1-3.3-5.7C3.2 6.8 7 3.4 12 3.4Z" fill="#e8e8e0"/><path d="M12 7.6v6.4M8.8 10.8h6.4" stroke="#272726" stroke-width="1.9" stroke-linecap="round"/>`,
+          23,
+        ),
+        dots: svg(
+          24,
+          `<circle cx="5" cy="12" r="1.9" fill="#e8e8e0"/><circle cx="12" cy="12" r="1.9" fill="#e8e8e0"/><circle cx="19" cy="12" r="1.9" fill="#e8e8e0"/>`,
+          21,
+        ),
+        plus: svg(
+          24,
+          `<path d="M12 4.8v14.4M4.8 12h14.4" stroke="#f0f0e8" stroke-width="2" stroke-linecap="round"/>`,
+          17,
+        ),
+        mic: svg(
+          24,
+          `<rect x="9.2" y="2.8" width="5.6" height="11" rx="2.8" stroke="#e8e8e0" stroke-width="1.8"/><path d="M5.8 11.2a6.2 6.2 0 0 0 12.4 0M12 17.6v3.2" stroke="#e8e8e0" stroke-width="1.8" stroke-linecap="round"/>`,
+          20,
+        ),
+        wave: svg(
+          24,
+          `<rect x="4.4" y="9.6" width="2.2" height="4.8" rx="1.1" fill="#23231f"/><rect x="8.8" y="6.2" width="2.2" height="11.6" rx="1.1" fill="#23231f"/><rect x="13.2" y="8.2" width="2.2" height="7.6" rx="1.1" fill="#23231f"/><rect x="17.6" y="10.6" width="2.2" height="2.8" rx="1.1" fill="#23231f"/>`,
+          20,
+        ),
+        arrowUp: svg(
+          24,
+          `<path d="M12 19V5.6M5.8 11.8 12 5.4l6.2 6.4" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>`,
+          20,
+        ),
+        close: svg(
+          24,
+          `<path d="M6 6l12 12M18 6 6 18" stroke="#cfcfc6" stroke-width="1.9" stroke-linecap="round"/>`,
+          16,
+        ),
+        clock: svg(
+          24,
+          `<path d="M12 4a8 8 0 1 1-7.4 5" stroke="#94948c" stroke-width="1.8" stroke-linecap="round"/><path d="M4.3 5.2 4 9.4l4.2-.5" stroke="#94948c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8v4.3l3 1.8" stroke="#94948c" stroke-width="1.8" stroke-linecap="round"/>`,
+          16,
+        ),
+        globe: svg(
+          24,
+          `<circle cx="12" cy="12" r="8.4" stroke="#94948c" stroke-width="1.7"/><path d="M3.6 12h16.8M12 3.6c2.2 2.3 3.3 5.1 3.3 8.4S14.2 18.1 12 20.4c-2.2-2.3-3.3-5.1-3.3-8.4S9.8 5.9 12 3.6Z" stroke="#94948c" stroke-width="1.7"/>`,
+          16,
+        ),
+        chevR: svg(
+          24,
+          `<path d="M9.5 5.5 16 12l-6.5 6.5" stroke="#94948c" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/>`,
+          15,
+        ),
+        arrowDown: svg(
+          24,
+          `<path d="M12 5v13M6.2 12.2 12 18.2l5.8-6" stroke="#e8e8e0" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>`,
+          18,
+        ),
+        copy: svg(
+          24,
+          `<rect x="8.6" y="3.4" width="12" height="14" rx="2.6" stroke="#f0f0e8" stroke-width="1.8"/><path d="M15.4 20.6H6.2a2.6 2.6 0 0 1-2.6-2.6V7.4" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round"/>`,
+          16,
+        ),
+        share: svg(
+          24,
+          `<path d="M12 16.4V4.2M6.8 9.4 12 3.8l5.2 5.6M4.4 15v3.6a2 2 0 0 0 2 2h11.2a2 2 0 0 0 2-2V15" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>`,
+          16,
+        ),
+        play: svg(
+          24,
+          `<path d="M7.6 4.6 19 12 7.6 19.4V4.6Z" stroke="#f0f0e8" stroke-width="1.8" stroke-linejoin="round"/>`,
+          16,
+        ),
+        retry: svg(
+          24,
+          `<path d="M20 12a8 8 0 1 1-3.2-6.4" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round"/><path d="M20.4 4v5h-5" stroke="#f0f0e8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>`,
+          16,
+        ),
+        shift: svg(
+          24,
+          `<path d="M12 4 4.5 12h4v7h7v-7h4L12 4Z" stroke="#fff" stroke-width="1.7" stroke-linejoin="round" fill="#fff"/>`,
+          19,
+        ),
+        del: svg(
+          24,
+          `<path d="M8.4 5h11a1.6 1.6 0 0 1 1.6 1.6v10.8A1.6 1.6 0 0 1 19.4 19h-11L2.6 12 8.4 5Z" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><path d="M11.4 9.6l5.2 4.8M16.6 9.6l-5.2 4.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>`,
+          22,
+        ),
+        ret: svg(
+          24,
+          `<path d="M20 6v6.4H5.4M9.6 8.4 5 12.8l4.6 4.4" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>`,
+          21,
+        ),
+        emojiKey: svg(
+          24,
+          `<circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="1.7"/><circle cx="9" cy="10" r="1.2" fill="#fff"/><circle cx="15" cy="10" r="1.2" fill="#fff"/><path d="M8 14.6a5 5 0 0 0 8 0" stroke="#fff" stroke-width="1.7" stroke-linecap="round"/>`,
+          25,
+        ),
+      };
+
+      /* ============================================================== build */
+      const screen = document.getElementById("cle-screen");
+      const el = (cls, html, tag) => {
+        const n = document.createElement(tag || "div");
+        if (cls) n.className = cls;
+        if (html != null) n.innerHTML = html;
+        return n;
+      };
+
+      // --- status bar
+      const sb = el("statusbar");
+      sb.setAttribute("data-layout-allow-overlap", "true");
+      sb.innerHTML =
+        `<div class="sb-left"><div class="sb-clock">` +
+        `<span id="cle-clock-early">${CONFIG.status.clock}</span>` +
+        `<span id="cle-clock-late">${CONFIG.status.clockLate}</span></div>${ICO.bell}</div>` +
+        `<div class="sb-right">${ICO.bars}<div class="sb-net">${CONFIG.status.net}</div>` +
+        `<div class="sb-batt">${CONFIG.status.battery}</div><div class="sb-batt-cap"></div></div>`;
+
+      // --- empty state
+      const empty = el("empty");
+      empty.id = "cle-empty";
+      const emptyMark = el("empty-mark", burst(35.3, "#d97757"));
+      const emptyHead = el("empty-head");
+      const headWords = CONFIG.emptyHeading.split(" ").map((w, i, arr) => {
+        const s = el(null, w + (i < arr.length - 1 ? " " : ""), "span");
+        s.style.display = "inline-block";
+        emptyHead.appendChild(s);
+        return s;
+      });
+      empty.appendChild(emptyMark);
+      empty.appendChild(emptyHead);
+
+      // --- thread
+      const port = el("scrollport");
+      const thread = el("thread");
+      thread.id = "cle-thread";
+      thread.setAttribute("data-layout-allow-overflow", "true");
+      thread.setAttribute("data-layout-allow-overlap", "true");
+      thread.setAttribute("data-layout-allow-occlusion", "true");
+
+      const bubble = el("bubble");
+      bubble.id = "cle-bubble";
+      bubble.textContent = CONFIG.prompt;
+      thread.appendChild(bubble);
+
+      // tool rows: thinking -> lead sentence -> search -> collapsed "2 steps"
+      const toolWrap = el("tools");
+      toolWrap.style.paddingTop = "0px";
+      const mkTool = (ico, label) =>
+        el(
+          "tool-row",
+          `<div class="tool-ico">${ico}</div><div>${label}</div>` +
+            `<div class="chev">${ICO.chevR}</div>`,
+        );
+      // wrap: the shell animates, the child carries the gap
+      const wrap = (inner, pad) => {
+        const o = el("abox");
+        inner.style.paddingTop = pad + "px";
+        o.appendChild(inner);
+        return o;
+      };
+      const rowThink = mkTool(ICO.clock, CONFIG.thinking);
+      const rowSearch = mkTool(ICO.globe, CONFIG.search);
+      const rowCollapsed = mkTool(ICO.clock, CONFIG.collapsed);
+      const boxThink = wrap(rowThink, 28);
+      const boxSearch = wrap(rowSearch, 17);
+      const boxCollapsed = wrap(rowCollapsed, 28);
+
+      const leadPara = el("answer abox");
+      const leadInner = el("para");
+      leadInner.style.paddingTop = "27.1px";
+      const leadWords = [];
+      CONFIG.lead.split(" ").forEach((w, i, arr) => {
+        const s = el("w", w + (i < arr.length - 1 ? " " : ""), "span");
+        leadInner.appendChild(s);
+        leadWords.push(s);
+      });
+      leadPara.appendChild(leadInner);
+      toolWrap.appendChild(boxThink);
+      toolWrap.appendChild(leadPara);
+      toolWrap.appendChild(boxSearch);
+      toolWrap.appendChild(boxCollapsed);
+      thread.appendChild(toolWrap);
+
+      // --- answer blocks
+      const answer = el("answer");
+      const blocks = [];
+      let bulletHost = null;
+      let seen = 0;
+      CONFIG.answer.forEach((b) => {
+        const inner = el(b.t === "b" ? "bul" : "para");
+        const gapTop =
+          seen === 0
+            ? 24
+            : b.t === "b"
+              ? blocks.length && blocks[blocks.length - 1].kind === "b"
+                ? 12
+                : 17
+              : 17;
+        inner.style.setProperty("--gap", gapTop + "px");
+        const node = wrap(inner, gapTop);
+        seen++;
+        const words = [];
+        let bold = false;
+        b.text.split(/(\s+)/).forEach((tok) => {
+          if (!tok) return;
+          if (/^\s+$/.test(tok)) {
+            inner.appendChild(document.createTextNode(tok));
+            return;
+          }
+          let word = tok;
+          if (word.startsWith("**")) {
+            bold = true;
+            word = word.slice(2);
+          }
+          let close = false;
+          if (word.includes("**")) {
+            close = true;
+            word = word.replace("**", "");
+          }
+          if (word.indexOf("{") === 0) {
+            const chip = el("cite w", word.replace(/[{}]/g, ""), "span");
+            inner.appendChild(chip);
+            words.push(chip);
+            return;
+          }
+          const s = el("w", word, "span");
+          if (bold) s.style.fontWeight = "700";
+          s.textContent = word;
+          if (close) bold = false;
+          inner.appendChild(s);
+          words.push(s);
+        });
+        if (b.t === "b") {
+          if (!bulletHost) {
+            bulletHost = el("bullets");
+            answer.appendChild(bulletHost);
+          }
+          bulletHost.appendChild(node);
+        } else {
+          bulletHost = null;
+          answer.appendChild(node);
+        }
+        blocks.push({ node: node, inner: inner, words: words, kind: b.t, gapTop: gapTop });
+      });
+      thread.appendChild(answer);
+
+      // --- action row + sources
+      const actions = el("actions");
+      const actionsBox = el("abox");
+      actions.innerHTML =
+        [ICO.copy, ICO.share, ICO.play, ICO.retry]
+          .map((i) => `<div class="act-ico">${i}</div>`)
+          .join("") +
+        `<div class="src-stack">` +
+        CONFIG.sources.dots
+          .map((c) => `<div class="src-dot" style="background:${c}">AI</div>`)
+          .join("") +
+        `</div><div class="src-label">${CONFIG.sources.count} sources</div>`;
+      actionsBox.appendChild(actions);
+      thread.appendChild(actionsBox);
+
+      const disclaim = el("disclaim");
+      const disclaimBox = el("abox");
+      disclaim.innerHTML =
+        `<div class="disclaim-mark">${burst(28, "#d97757")}</div>` +
+        `<div class="disclaim-text">${CONFIG.disclaimer[0]}<br />${CONFIG.disclaimer[1]}</div>`;
+      disclaimBox.appendChild(disclaim);
+      thread.appendChild(disclaimBox);
+
+      // --- the in-thread spinner rides at the end of the flow
+      const spinner = el("spinner", burst(26, "#d97757"));
+      const spinPad = el(null, null);
+      spinPad.style.paddingTop = "29px";
+      spinPad.appendChild(spinner);
+      const spinWrap = el("abox");
+      spinWrap.style.width = "26px";
+      spinWrap.appendChild(spinPad);
+      thread.insertBefore(spinWrap, actionsBox);
+      port.appendChild(thread);
+
+      const chevWrap = el("chev-wrap", `<div class="chev-btn">${ICO.arrowDown}</div>`);
+      chevWrap.setAttribute("data-layout-allow-occlusion", "true");
+      chevWrap.setAttribute("data-layout-allow-overlap", "true");
+
+      // --- composer
+      const composer = el("composer");
+      composer.id = "cle-composer";
+      composer.setAttribute("data-layout-allow-occlusion", "true");
+      composer.setAttribute("data-layout-allow-overlap", "true");
+      composer.innerHTML =
+        `<div class="notice" id="cle-notice"><div class="notice-text">${CONFIG.notice}</div>` +
+        `<div class="notice-x">${ICO.close}</div></div>` +
+        `<div class="comp-text" id="cle-comp-text"><span class="typed" id="cle-typed"></span></div>` +
+        `<div class="comp-ph" id="cle-comp-ph">${CONFIG.placeholder}</div>` +
+        `<div class="comp-ph" id="cle-comp-ph2">${CONFIG.placeholderReply}</div>` +
+        `<div class="comp-ctrls">` +
+        `<div class="plus-btn">${ICO.plus}</div>` +
+        `<div class="model-pill">${CONFIG.model.name} <em>${CONFIG.model.effort}</em></div>` +
+        `<div class="comp-mic" id="cle-comp-mic">${ICO.mic}</div>` +
+        `<div class="voice-btn" id="cle-voice-btn">${ICO.wave}</div>` +
+        `<div class="send-btn" id="cle-send-btn">${ICO.arrowUp}</div>` +
+        `<div class="stop-btn" id="cle-stop-btn"></div>` +
+        `</div>`;
+
+      const typedEl = composer.querySelector("#cle-typed");
+      const chEls = [];
+      const curEls = [];
+      const mkCursor = () => {
+        const a = el("cursor-anchor", "<i></i>", "span");
+        typedEl.appendChild(a);
+        curEls.push(a);
+      };
+      mkCursor();
+      CONFIG.prompt.split("").forEach((c) => {
+        const sp = el("ch", c === " " ? "&nbsp;" : c, "span");
+        typedEl.appendChild(sp);
+        chEls.push(sp);
+        mkCursor();
+      });
+
+      // --- keyboard (iOS geometry is identical to the ChatGPT capture)
+      const KB = { w: 33.44, gap: 6.03, inset: 6.67 };
+      const keyboard = el("keyboard");
+      keyboard.id = "cle-keyboard";
+      keyboard.setAttribute("data-layout-allow-overflow", "true");
+      keyboard.setAttribute("data-layout-allow-overlap", "true");
+      const predict = el("predict");
+      const PRED_STAGES = ["start", "end"];
+      const pdEls = [0, 1, 2].map((col) => {
+        const n = el("pd");
+        const stages = PRED_STAGES.map((k) => {
+          const w = el("pdw", CONFIG.predict[k][col]);
+          n.appendChild(w);
+          return w;
+        });
+        predict.appendChild(n);
+        return { cell: n, stages: stages };
+      });
+      keyboard.appendChild(predict);
+
+      const keyIndex = {};
+      const mkKey = (row, label, x, w, cls) => {
+        const k = el("key" + (cls ? " " + cls : ""), label);
+        k.style.left = x + "px";
+        k.style.width = w + "px";
+        row.appendChild(k);
+        if (/^[A-Z]$/.test(label)) keyIndex[label] = k;
+        return k;
+      };
+      [
+        { y: 52, keys: "QWERTYUIOP".split(""), x0: KB.inset },
+        { y: 106, keys: "ASDFGHJKL".split(""), x0: 26.33 },
+        { y: 160, keys: "ZXCVBNM".split(""), x0: 65.67 },
+      ].forEach((rd, ri) => {
+        const row = el("krow");
+        row.style.top = rd.y + "px";
+        rd.keys.forEach((k, i) => mkKey(row, k, rd.x0 + i * (KB.w + KB.gap), KB.w));
+        if (ri === 2) {
+          mkKey(row, ICO.shift, KB.inset, 45.33, "dark");
+          mkKey(row, ICO.del, 350, 45.67, "dark");
+        }
+        keyboard.appendChild(row);
+      });
+      const row4 = el("krow");
+      row4.style.top = "214px";
+      mkKey(row4, "123", KB.inset, 92.67, "dark small");
+      const kSpace = mkKey(row4, "", 105.33, 191.33);
+      mkKey(row4, ICO.ret, 302.67, 93, "dark");
+      keyboard.appendChild(row4);
+      keyboard.appendChild(el("kb-bottom", `<div>${ICO.emojiKey}</div><div>${ICO.mic}</div>`));
+
+      // --- header + scrims
+      const statusPlate = el("status-plate");
+      statusPlate.setAttribute("data-layout-allow-occlusion", "true");
+      const hdrScrim = el("hdr-scrim");
+      hdrScrim.setAttribute("data-layout-allow-occlusion", "true");
+      const compScrim = el("comp-scrim");
+      compScrim.setAttribute("data-layout-allow-occlusion", "true");
+      const header = el("header");
+      header.innerHTML =
+        `<div class="circle-btn hdr-left">${ICO.burger}</div>` +
+        `<div class="hdr-right" id="cle-hdr-right">` +
+        `<div class="hdr-right-face" id="cle-hdr-ghost">${ICO.ghost}</div>` +
+        `<div class="hdr-right-face" id="cle-hdr-actions">${ICO.newChat}${ICO.dots}</div></div>`;
+
+      [
+        port,
+        empty,
+        chevWrap,
+        compScrim,
+        composer,
+        keyboard,
+        hdrScrim,
+        statusPlate,
+        header,
+        sb,
+      ].forEach((n) => screen.appendChild(n));
+
+      /* ==================================================================
+         Everything below is measured off the live DOM, so it must run with the
+         real webfont applied. The @font-face files are still loading when this
+         script parses, so a first pass would measure a fallback face and get the
+         line counts wrong (it clipped a 7-line paragraph to 6). Build once
+         synchronously so the timeline exists at parse time, then rebuild once the
+         fonts report ready — deterministic either way, and the renderer only seeks
+         after fonts are loaded.
+         ================================================================== */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      function build() {
+        tl.clear();
+        // A rebuild starts from whatever the previous pass left behind (heights 0,
+        // words hidden). Restore the natural layout first or the re-measure reads a
+        // collapsed DOM and every height/anchor comes back 0.
+        const allWords = leadWords
+          .concat(headWords)
+          .concat(blocks.reduce((acc, b) => acc.concat(b.words), []));
+        const allBoxes = [
+          boxThink,
+          boxSearch,
+          boxCollapsed,
+          leadPara,
+          spinWrap,
+          actionsBox,
+          disclaimBox,
+        ].concat(blocks.map((b) => b.node));
+        gsap.set(allBoxes, { height: "auto", autoAlpha: 1 });
+        gsap.set(allWords, { opacity: 1, autoAlpha: 1, y: 0 });
+        gsap.set([thread, keyboard], { y: 0 });
+        gsap.set(bubble, { autoAlpha: 1, y: 0, scale: 1 });
+        gsap.set(chEls, { opacity: 1 });
+        gsap.set(composer, { height: 172.7, width: 385.7, x: 0, y: 0 });
+        gsap.set([emptyMark, spinner], { autoAlpha: 1, scale: 1, rotation: 0 });
+        gsap.set(document.getElementById("cle-notice"), { autoAlpha: 1 });
+        /* ============================================================ measure
+           Everything is read here, in the natural layout, BEFORE any initial state
+           collapses it. Reading these during timeline construction would report the
+           collapsed geometry and every scroll target would resolve to 0.          */
+        const LH = 27.3;
+        const lineGroups = (words, host, gapTop) => {
+          const pad = gapTop || 0;
+          const tops = words.map((w) => w.offsetTop);
+          const uniq = [];
+          tops.forEach((t) => {
+            if (!uniq.length || t - uniq[uniq.length - 1] > 6) uniq.push(t);
+          });
+          const lineOf = tops.map((t) => {
+            let li = 0;
+            uniq.forEach((u, i) => {
+              if (Math.abs(t - u) <= 6) li = i;
+            });
+            return li;
+          });
+          const full = host.offsetHeight;
+          return {
+            lineOf: lineOf,
+            // the last step lands on the element's natural height, so the end state
+            // matches the layout the anchors were measured in exactly
+            heights: uniq.map((u, i) =>
+              i === uniq.length - 1 ? full : Math.min(full, pad + (i + 1) * LH + 2),
+            ),
+            full: full,
+          };
+        };
+        const leadMeta = lineGroups(leadWords, leadPara, 27.1);
+        blocks.forEach((b) => (b.meta = lineGroups(b.words, b.node, b.gapTop)));
+
+        const bubbleTop = bubble.offsetTop;
+        const rowThinkH = boxThink.offsetHeight;
+        const rowSearchH = boxSearch.offsetHeight;
+        const rowCollapsedH = boxCollapsed.offsetHeight;
+        const actionsH = actionsBox.offsetHeight;
+        const disclaimH = disclaimBox.offsetHeight;
+        const spinH = spinWrap.offsetHeight;
+        // Anchors are read in the SAME layout state their tween will play in. Correcting
+        // a natural-layout measurement by arithmetic is guesswork — it was 71pt out.
+        const ANCHOR = 720;
+        const ANCHOR_END = 715; // IMG_0944: the disclaimer's last line rests here
+        const anchorOf = (node, anchor) =>
+          Math.min(0, (anchor || ANCHOR) - (node.offsetTop + node.offsetHeight));
+        const anchorLead = anchorOf(leadPara);
+        const anchorTools = anchorOf(toolWrap);
+
+        // state B — tool rows collapsed into "2 steps", spinner still riding the tail
+        gsap.set([boxThink, boxSearch, leadPara], { height: 0 });
+        blocks.forEach((b) => {
+          b.anchor = anchorOf(b.node);
+          // one target per line: the stream must never write below the fold
+          b.lineAnchor = b.meta.heights.map((h) => Math.min(0, ANCHOR - (b.node.offsetTop + h)));
+        });
+        // state C — spinner gone, footer revealed
+        gsap.set(spinWrap, { height: 0 });
+        const anchorEnd = anchorOf(disclaimBox, ANCHOR_END);
+        gsap.set([boxThink, boxSearch, leadPara, spinWrap], { height: "auto" });
+
+        /* ====================================================== initial state */
+        gsap.set(thread, { y: 0 });
+        gsap.set(bubble, { autoAlpha: 0 });
+        gsap.set([boxThink, boxSearch, boxCollapsed], { height: 0, autoAlpha: 0 });
+        gsap.set(leadPara, { height: 0 });
+        gsap.set(leadWords, { opacity: 0 });
+        blocks.forEach((b) => {
+          gsap.set(b.node, { height: 0 });
+          gsap.set(b.words, { opacity: 0 });
+        });
+        gsap.set([actionsBox, disclaimBox], { height: 0, autoAlpha: 0 });
+        gsap.set(spinWrap, { autoAlpha: 0, scale: 0.6, height: spinH, transformOrigin: "50% 50%" });
+        gsap.set(chevWrap.firstChild, { autoAlpha: 0, y: 10 });
+        gsap.set(chEls, { opacity: 0 });
+        gsap.set(curEls, { autoAlpha: 0 });
+        gsap.set(document.getElementById("cle-comp-ph"), { autoAlpha: 1 });
+        gsap.set(document.getElementById("cle-comp-ph2"), { autoAlpha: 0 });
+        gsap.set(document.getElementById("cle-send-btn"), { autoAlpha: 0, scale: 0.6 });
+        gsap.set(document.getElementById("cle-stop-btn"), { autoAlpha: 0, scale: 0.6 });
+        gsap.set(document.getElementById("cle-hdr-actions"), { autoAlpha: 0 });
+        gsap.set(document.getElementById("cle-hdr-right"), { width: 44 });
+        gsap.set(emptyMark, { autoAlpha: 0, scale: 0.72, transformOrigin: "50% 50%" });
+        gsap.set(headWords, { autoAlpha: 0, y: 12 });
+        gsap.set(keyboard, { y: 0 });
+        gsap.set(composer, { width: 385.7, x: 0, y: -309, height: 172.7 });
+        pdEls.forEach((pd) => {
+          gsap.set(pd.stages[0], { autoAlpha: 1 });
+          gsap.set(pd.stages[1], { autoAlpha: 0 });
+        });
+        gsap.set(document.getElementById("cle-clock-late"), { autoAlpha: 0 });
+
+        /* ============================================================ timeline */
+
+        /* ---- 1. empty state arrives */
+        tl.to(emptyMark, { autoAlpha: 1, scale: 1, duration: 0.5, ease: "power3.out" }, T.emptyIn);
+        headWords.forEach((w, i) => {
+          tl.to(
+            w,
+            { autoAlpha: 1, y: 0, duration: 0.42, ease: "power3.out" },
+            T.emptyIn + 0.12 + i * 0.055,
+          );
+        });
+
+        /* ---- 2. typing */
+        const t0 = T.typeStart;
+        const chars = CONFIG.prompt.split("");
+        const charT = [];
+        let t = t0;
+        chars.forEach((c) => {
+          charT.push(t);
+          t += c === " " ? T.charBase + T.spaceHold : T.charBase;
+        });
+        const typeEnd = t;
+
+        tl.to(document.getElementById("cle-comp-ph"), { autoAlpha: 0, duration: 0.12 }, t0 - 0.02);
+        tl.to(curEls[0], { autoAlpha: 1, duration: 0.01 }, t0 - 0.02);
+        tl.to(
+          document.getElementById("cle-voice-btn"),
+          { autoAlpha: 0, scale: 0.6, duration: 0.14 },
+          t0,
+        );
+        tl.to(
+          document.getElementById("cle-send-btn"),
+          { autoAlpha: 1, scale: 1, duration: 0.24, ease: "back.out(1.6)" },
+          t0 + 0.04,
+        );
+
+        chars.forEach((c, i) => {
+          tl.to(chEls[i], { opacity: 1, duration: 0.01 }, charT[i]);
+          tl.to(curEls[i], { autoAlpha: 0, duration: 0.01 }, charT[i]);
+          tl.to(curEls[i + 1], { autoAlpha: 1, duration: 0.01 }, charT[i]);
+          const k = keyIndex[c.toUpperCase()];
+          const target = c === " " ? kSpace : k;
+          if (target) {
+            tl.to(target, { backgroundColor: "#5f5f5f", duration: 0.04 }, charT[i] - 0.03);
+            tl.to(target, { backgroundColor: "#404040", duration: 0.09 }, charT[i] + 0.02);
+          }
+        });
+
+        const lastCur = curEls[curEls.length - 1];
+        const blinkFrom = t0 + 0.1;
+        const blinks = Math.floor((typeEnd + T.sendPad - blinkFrom) / 1.06);
+        for (let i = 0; i < blinks; i++) {
+          const off = blinkFrom + i * 1.06 + 0.53;
+          const on = blinkFrom + i * 1.06 + 1.06;
+          if (off > typeEnd) tl.to(lastCur, { autoAlpha: 0, duration: 0.02 }, off);
+          if (on > typeEnd) tl.to(lastCur, { autoAlpha: 1, duration: 0.02 }, on);
+        }
+        const swapPredict = (at) => {
+          pdEls.forEach((pd) => {
+            tl.to(pd.stages[0], { autoAlpha: 0, duration: 0.06 }, at);
+            tl.to(pd.stages[1], { autoAlpha: 1, duration: 0.08 }, at + 0.06);
+          });
+        };
+        swapPredict(charT[CONFIG.prompt.indexOf(" ai ") + 1]);
+
+        /* ---- 3. send */
+        const tSend = typeEnd + T.sendPad;
+        const sendBtn = document.getElementById("cle-send-btn");
+        tl.to(sendBtn, { scale: 0.86, duration: 0.06, ease: "power2.out" }, tSend);
+        tl.to(sendBtn, { scale: 1, duration: 0.18, ease: "power2.out" }, tSend + 0.06);
+
+        const tGo = tSend + T.sendReact;
+        tl.to(chEls, { opacity: 0, duration: 0.01 }, tGo);
+        tl.to(curEls, { autoAlpha: 0, duration: 0.01 }, tGo);
+        tl.to(keyboard, { y: 340, duration: 0.3, ease: "power2.out" }, tGo);
+        tl.to(document.getElementById("cle-comp-mic"), { autoAlpha: 0, duration: 0.12 }, tGo + 0.1);
+        // card narrows and re-centres as it docks
+        tl.to(composer, { width: 369.7, x: 8, duration: 0.3, ease: "power2.out" }, tGo);
+        tl.to(composer, { y: 0, duration: 0.3, ease: "power2.out" }, tGo);
+        tl.to(document.getElementById("cle-comp-ph2"), { autoAlpha: 1, duration: 0.2 }, tGo + 0.14);
+        tl.to(sendBtn, { autoAlpha: 0, duration: 0.12 }, tGo + 0.24);
+        tl.to(
+          document.getElementById("cle-stop-btn"),
+          { autoAlpha: 1, scale: 1, duration: 0.2, ease: "power2.out" },
+          tGo + 0.3,
+        );
+        // the empty state leaves as the bubble arrives — one cause, two reactions
+        tl.to(emptyMark, { autoAlpha: 0, scale: 0.8, duration: 0.22, ease: "power2.in" }, tGo);
+        headWords.forEach((w, i) => {
+          tl.to(w, { autoAlpha: 0, y: -10, duration: 0.2, ease: "power2.in" }, tGo + i * 0.02);
+        });
+        // header: incognito circle widens into the actions pill
+        tl.to(
+          document.getElementById("cle-hdr-ghost"),
+          { autoAlpha: 0, duration: 0.12 },
+          tGo + 0.02,
+        );
+        tl.to(
+          document.getElementById("cle-hdr-right"),
+          { width: 100, duration: 0.26, ease: "power2.out" },
+          tGo + 0.06,
+        );
+        tl.to(
+          document.getElementById("cle-hdr-actions"),
+          { autoAlpha: 1, duration: 0.18 },
+          tGo + 0.16,
+        );
+
+        const dyBubble = 874 - 343 - 40 - 34 - bubbleTop; // composer text row -> slot
+        tl.fromTo(
+          bubble,
+          { autoAlpha: 0, y: dyBubble, scale: 0.94, transformOrigin: "100% 50%" },
+          { autoAlpha: 1, y: 0, scale: 1, duration: 0.34, ease: "power3.out" },
+          tGo + 0.02,
+        );
+
+        /* ---- 4. the spinner: Claude's own working indicator, not idle wobble */
+        let tw = tGo + 0.34 + T.spinLead;
+        tl.to(spinWrap, { autoAlpha: 1, scale: 1, duration: 0.26, ease: "power3.out" }, tw);
+        const spinTurns = 30;
+        for (let i = 0; i < spinTurns; i++) {
+          tl.to(
+            spinner,
+            { rotation: (i + 1) * 15, duration: 0.5, ease: "power1.inOut" },
+            tw + i * 0.5,
+          );
+          tl.to(
+            spinner,
+            { scale: i % 2 ? 1 : 0.78, duration: 0.5, ease: "sine.inOut" },
+            tw + i * 0.5,
+          );
+        }
+
+        const scrollTo = (target, at, dur) =>
+          tl.to(thread, { y: target, duration: dur || 0.55, ease: "power2.out" }, at);
+
+        /* ---- 5. tool rows, then the lead sentence, then the search */
+        tw += 0.5;
+        tl.to(
+          boxThink,
+          { height: rowThinkH, autoAlpha: 1, duration: 0.26, ease: "power2.out" },
+          tw,
+        );
+        tw += T.toolStep;
+
+        let lastLine = -1;
+        leadWords.forEach((w, wi) => {
+          const li = leadMeta.lineOf[wi];
+          if (li !== lastLine) {
+            tl.to(
+              leadPara,
+              { height: leadMeta.heights[li], duration: 0.16, ease: "power2.out" },
+              tw,
+            );
+            lastLine = li;
+          }
+          tl.to(w, { opacity: 1, duration: 0.09 }, tw);
+          tw += T.wordStep * 2.2;
+        });
+        scrollTo(anchorLead, tw - 0.3, 0.6);
+
+        tw += 0.3;
+        tl.to(
+          boxSearch,
+          { height: rowSearchH, autoAlpha: 1, duration: 0.26, ease: "power2.out" },
+          tw,
+        );
+        scrollTo(anchorTools, tw, 0.6);
+
+        /* ---- 6. the two tool rows collapse into "2 steps" */
+        tw += 0.85;
+        tl.to([boxThink, boxSearch, leadPara], { autoAlpha: 0, duration: 0.16 }, tw);
+        tl.to(
+          [boxThink, boxSearch, leadPara],
+          { height: 0, duration: 0.3, ease: "power2.inOut" },
+          tw + 0.06,
+        );
+        tl.to(
+          boxCollapsed,
+          { height: rowCollapsedH, autoAlpha: 1, duration: 0.26, ease: "power2.out" },
+          tw + 0.18,
+        );
+        scrollTo(0, tw + 0.06, 0.5);
+
+        /* ---- 7. the usage notice is dismissed, the card shrinks, the answer streams */
+        tw += T.collapseAt;
+        tl.to(document.getElementById("cle-notice"), { autoAlpha: 0, duration: 0.16 }, tw);
+        tl.to(composer, { height: 97.7, duration: 0.32, ease: "power2.inOut" }, tw + 0.04);
+        tw += 0.45;
+        blocks.forEach((b, bi) => {
+          let ll = -1;
+          b.words.forEach((w, wi) => {
+            const li = b.meta.lineOf[wi];
+            if (li !== ll) {
+              tl.to(b.node, { height: b.meta.heights[li], duration: 0.16, ease: "power2.out" }, tw);
+              scrollTo(b.lineAnchor[li], tw, 0.5);
+              ll = li;
+            }
+            tl.to(w, { opacity: 1, duration: 0.08 }, tw);
+            tw += T.wordStep;
+          });
+          if (bi < blocks.length - 1) tw += T.paraGap;
+        });
+
+        /* ---- 8. the answer lands: controls revert, footer arrives */
+        tw += T.tailStep;
+        tl.to(document.getElementById("cle-stop-btn"), { autoAlpha: 0, duration: 0.14 }, tw);
+        tl.to(document.getElementById("cle-comp-mic"), { autoAlpha: 1, duration: 0.18 }, tw + 0.04);
+        tl.to(
+          document.getElementById("cle-voice-btn"),
+          { autoAlpha: 1, scale: 1, duration: 0.22, ease: "power2.out" },
+          tw + 0.06,
+        );
+        tl.to(spinWrap, { autoAlpha: 0, scale: 0.7, duration: 0.2, ease: "power2.in" }, tw);
+        tl.to(spinWrap, { height: 0, duration: 0.24, ease: "power2.inOut" }, tw + 0.1);
+        tl.to(
+          actionsBox,
+          { height: actionsH, autoAlpha: 1, duration: 0.3, ease: "power2.out" },
+          tw + 0.22,
+        );
+        tl.to(
+          disclaimBox,
+          { height: disclaimH, autoAlpha: 1, duration: 0.3, ease: "power2.out" },
+          tw + 0.46,
+        );
+        scrollTo(anchorEnd, tw + 0.3, 0.8);
+        tl.to(
+          chevWrap.firstChild,
+          { autoAlpha: 1, y: 0, duration: 0.3, ease: "back.out(1.5)" },
+          tw + 0.7,
+        );
+        // the minute rolls over between the source frames — keep that
+        tl.to(document.getElementById("cle-clock-early"), { autoAlpha: 0, duration: 0.01 }, 8.4);
+        tl.to(document.getElementById("cle-clock-late"), { autoAlpha: 1, duration: 0.01 }, 8.4);
+      }
+
+      build();
+      if (document.fonts && document.fonts.status !== "loaded") {
+        document.fonts.ready.then(build);
+      }
+
+      window.__timelines["claude-exchange"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/claude-exchange/registry-item.json b/registry/blocks/claude-exchange/registry-item.json
new file mode 100644
index 000000000..de7ae3e47
--- /dev/null
+++ b/registry/blocks/claude-exchange/registry-item.json
@@ -0,0 +1,56 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "claude-exchange",
+  "type": "hyperframes:block",
+  "title": "Claude Exchange",
+  "description": "A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions",
+  "tags": ["showcase", "mock-ui", "ai", "chat", "vertical", "ad-template"],
+  "author": "Jake Moran",
+  "dimensions": {
+    "width": 1080,
+    "height": 1920
+  },
+  "duration": 21.4,
+  "files": [
+    {
+      "path": "claude-exchange.html",
+      "target": "compositions/claude-exchange.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/eb-garamond-latin-400-normal.woff2",
+      "target": "assets/fonts/eb-garamond-latin-400-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/eb-garamond-latin-700-normal.woff2",
+      "target": "assets/fonts/eb-garamond-latin-700-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/inter-latin-400-normal.woff2",
+      "target": "assets/fonts/inter-latin-400-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/inter-latin-500-normal.woff2",
+      "target": "assets/fonts/inter-latin-500-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/inter-latin-600-normal.woff2",
+      "target": "assets/fonts/inter-latin-600-normal.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/inter-LICENSE.txt",
+      "target": "assets/fonts/inter-LICENSE.txt",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/eb-garamond-LICENSE.txt",
+      "target": "assets/fonts/eb-garamond-LICENSE.txt",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/catalog-artifact/local-vectors.bin b/registry/catalog-artifact/local-vectors.bin
index 01aff786f..4cf240434 100644
Binary files a/registry/catalog-artifact/local-vectors.bin and b/registry/catalog-artifact/local-vectors.bin differ
diff --git a/registry/catalog-artifact/local-vectors.json b/registry/catalog-artifact/local-vectors.json
index 21059a741..62c8a1823 100644
--- a/registry/catalog-artifact/local-vectors.json
+++ b/registry/catalog-artifact/local-vectors.json
@@ -2,7 +2,7 @@
   "model": "bge-small-en-v1.5",
   "modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3",
   "dimensions": 384,
-  "revision": "f5cb199165f8e7faec1f52713596613af0ef6b5495938341233a63167ee43d3a",
+  "revision": "6e03561a0082cf676faac12c7d566fa2846ac0593be183b2fca4543e51aff1ee",
   "names": [
     "ai-chat-reveal",
     "ai-generation-canvas",
@@ -55,10 +55,12 @@
     "chart-story",
     "chat-message",
     "chat-thread",
+    "chatgpt-exchange",
     "checkout-flow",
     "chromatic-aberration-wipe",
     "chromatic-radial-split",
     "cinematic-zoom",
+    "claude-exchange",
     "code-3d-extrude",
     "code-diff",
     "code-highlight",
diff --git a/registry/registry.json b/registry/registry.json
index dae767263..ae2fb69d6 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -71,6 +71,10 @@
       "name": "camera-dolly-zoom",
       "type": "hyperframes:block"
     },
+    {
+      "name": "chatgpt-exchange",
+      "type": "hyperframes:block"
+    },
     {
       "name": "chromatic-radial-split",
       "type": "hyperframes:block"
@@ -79,6 +83,10 @@
       "name": "cinematic-zoom",
       "type": "hyperframes:block"
     },
+    {
+      "name": "claude-exchange",
+      "type": "hyperframes:block"
+    },
     {
       "name": "code-3d-extrude",
       "type": "hyperframes:block"
@@ -1525,6 +1533,6 @@
     }
   ],
   "catalogArtifact": {
-    "revision": "f5cb199165f8e7faec1f52713596613af0ef6b5495938341233a63167ee43d3a"
+    "revision": "6e03561a0082cf676faac12c7d566fa2846ac0593be183b2fca4543e51aff1ee"
   }
 }
